美文网首页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 周四

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