Flutter Listview， Column， Row学习个人总结2

最新推荐文章于 2024-12-16 15:27:02 发布

tnan2522

最新推荐文章于 2024-12-16 15:27:02 发布

阅读量1.1k

点赞数 1

分类专栏： Flutter

本文链接：https://blog.csdn.net/qq_42031243/article/details/107504491

版权

Flutter 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

上一篇博客写到了children，那么，这篇博客将会记录Listview， Column， Row 这些可以使用children进行多组件布局的列表组件和行组件

Listview

Listview是一个列表组件，它可以将children 组件列表中的组件进行垂直布局，如

ListView(    //是一个线性布局的widgets 列表.
      children: <Widget>[  // 代表这是个多种组件列表
        ListTile(
          leading: Image.network("https://api.iehu.cn/Image.php"),
          // leading: Icon(Icons.security,color: Colors.yellow,size: 80,), //icon 图标
          title: Text("这是主标题"), // 当前listtile 标题
          subtitle: Text("这是二级标题"), // 二级标题
        )
        ListTile(
          leading: Image.network("https://api.iehu.cn/Image.php"),
          // leading: Icon(Icons.security,color: Colors.yellow,size: 80,), //icon 图标
          title: Text("这是主标题"), // 当前listtile 标题
          subtitle: Text("这是二级标题"), // 二级标题
        )
      ],
    );

Column

Column 也是一个垂直布局的列表组件，它和Listview的区别是它 Listview中的子组件是填满父组件的宽度的，而 Column 是被父组件限制的，
在这里插入图片描述

如图可以看到，在Listview中是不可以设置width的，设置了也没用，

在这里插入图片描述
可以看到，在Column中是可以设置子组件的大小的，这就是两个列表组件的差异，而且，在Column中是可以使用 Spacer() 属性的，Spacer 属性是将它下面的其他组件像弹簧样把下面的子组件给压到下面去，而在Listview 中是办不到的

在这里插入图片描述

Row

Row是一个行列表组件，它会将组件列表中的组件以行的形式进行布局，如
在这里插入图片描述
基于父组件下将列表组件中的元素已行的方式进行排序布局，可以配合 Spacer() 进行使用， Spacer 可以实现将子组件从右往左来进行布局，一般在Row还可以使用 Expanded()组件，Expanded()可以实现将子组件自动拉伸平分行级
在这里插入图片描述
如图可以看到，如果使用了 Expanded 的话，那么在child 中设置的width 是没有用的， Expanded 将当前父组件的width平分，有多少个Expanded就平分成多少份，也可以使用 flex按比例划分，如

可以看到，原本没有flex 的时候是平分的，当写上flex后，它会将当前的宽度按比例 1:5 进行划分为两份