美文网首页flutter
Flutter常用组件 2022-05-26 周四

Flutter常用组件 2022-05-26 周四

作者: 勇往直前888 | 来源:发表于2022-05-31 16:45 被阅读0次

Text

  • 最重要的参数是文本内容。

  • 文本样式由TextStyle来定义。

  • Text.rich和TestSpan来定义富文本,点击响应等。

Row 和 Column

  • 这两个是容器,children是个数组,包含按照行或者列排列的成员

  • MainAxisAlignment和CrossAxisAlignment定义对齐方式

  • 这两个组件主要用来排列子子组件;划分空间,占据空间应该考虑用其他组件。

  • 这两个都是一行或者一列,如果需要跨行,需要考虑使用流式布局Wrap

  • Expanded可以配合两者使用,达到充满屏幕的效果。两者都是Flex的子类。

Stack、Positioned

  • 允许子组件重合。后面定义的有可能覆盖前面定义的,造成遮挡

  • 这两个配合使用。Stack定义空间,相当于UIView;Positioned定义位置,相当于frame

  • 子组件超出Stack的范围,可以定义是否裁剪

  • Stack中没有被Positioned包裹的组件,会按照默认行为来布局,不是很好,会造成理解偏差。

  • Align组件也可以配合Stack组件进行子组件的定位(左上,中间靠右之类的位置描述)

Center

  • 水平和垂直方向同时居中

  • 一遍情况下只需要提供child子组件,其他不需要修改

Divider

  • 就是一条线

  • 虚线的话就需要第三方库,比如dotted_line

Padding

  • 内边距,留白。没有Margin组件

  • 需要修饰的组件放在child参数下。

  • EdgeInsets和iOS中的概念很像,all()和only()两个方法足够用了。

DecoratedBox

  • 和BoxDecoration类配合,实现圆角,边框,渐变等等效果

Container

  • 和UIView类似,可以定义一个空间

  • 有padding,也有margin

  • 有宽和高,能定义大小

  • 这个是Padding等Decoration等组件的综合体,可以多用用

Clip

  • ClipOval,显示头像的时候可以用。

Image

  • 显示图片

  • 本地图片:AssetImage

  • 网络图片:NetworkImage

  • 有宽高参数用来限制大小。

Switch和Checkbox

  • Switch和iOS中的样子差不多

  • Checkbox是复选框

  • 状态不能自己维护,需要外部的父组件来设置,这个和iOS原生差距很大

TextField

  • 输入框,参数很多,能定义键盘样式,完成按钮,最长字符等等各种属性

  • TextFormField配合Form一起使用,比较复杂

LinearProgressIndicator和CircularProgressIndicator

  • 进度条,分为线性和圆形两种

SizedBox和ConstrainedBox和AspectRatio和FractionallySizedBox

  • SizedBox固定宽高;这个用得较多

  • ConstrainedBox结合BoxConstraints,设置宽和高的最大最小值

  • AspectRatio是宽高比容器

  • FractionallySizedBox是按照父组件的比例定大小

SingleChildScrollView

  • 这个相当于UIScrollView,在个人中心,设置等页面都可以使用。数量有限,高度超过一屏,可滑动。

ListView和GridView

  • 这个就相当于UITableView,经常用;

  • 一般使用ListView.builder()动态创建列表项;

  • ListView.separated()是带分隔线的ListView.builder

  • GridView相当于UICollectionView,是网格布局

  • GridView.builder()用来动态创建单元格

TabBarView

  • 实现Tab切换

  • TabBar和Tab组件配合使用

GestureDetector

  • 点击响应,单击,双击,长按等等,用得很多

  • 可以套在一个Container外面添加点击响应

参考文章

Flutter-UI-基础控件-组件大全

flutter常用组件整理flutter常用组件整理

相关文章

  • Flutter常用组件 2022-05-26 周四

    Text 最重要的参数是文本内容。 文本样式由TextStyle来定义。 Text.rich和TestSpan来定...

  • 2019-10-20 Fultter学习(五)Gridview组

    一、 Flutter 列表组件概述二、 Flutter GridView 组件的常用参数三、 Flutter Gr...

  • flutter(四,常用组件)

    Tags: flutter 常用组件 [TOC] 1. 重要概念 一切皆组件。flutter所有的元素都是由组件组...

  • Flutter常用组件

    工程中遇到的部分常用的或者必要组件记录 WillPopScope 参数onWillPop用来监听当用户按下返回键时...

  • Flutter 常用组件

    常用组件 1、布局组件 AspectRatio: 根据设置调整子元素 child 的宽高比。IntrinsicHe...

  • flutter常用组件

    可以在github中搜索插件 dio:用于向后端接口作HTTP请求数据 flutter_swiper: 轮播插件,...

  • Flutter 常用组件

    flutter中所有的东西都是组件(widget),组件又分为动态组件(StatefulWidget)、静态组件(...

  • Flutter常用组件

    网络请求 http ^0.11.3+16 pub.dartlang.org/packages/ht… github...

  • flutter常用组件

    Container(盒容器) 主要是关注decoration (装饰) 可以设置container的属性,这里co...

  • Flutter添加购物车效果实现

    1. 要实现先要了解的知识 : (0)flutter 常用组件的使用 (1)flutter 动画 (2) flut...

网友评论

    本文标题:Flutter常用组件 2022-05-26 周四

    本文链接:https://www.haomeiwen.com/subject/lnouprtx.html