Flutter(67):Layout组件之ListBody

Flutter教学目录持续更新中

Github源代码持续更新中

1.ListBody介绍

一个widget,它沿着一个给定的轴,顺序排列它的子元素

2.ListBody属性

  • mainAxis = Axis.vertical:滑动方向
  • reverse = false:是否倒序
  • children = const <Widget>[]:

3.使用

      body: SingleChildScrollView(
        child: ListBody(
          mainAxis: Axis.vertical,
          reverse: false,
          children: [
            Container(
              height: 100,
              color: Colors.blue[50],
            ),
            Container(
              height: 100,
              color: Colors.blue[100],
            ),
            Container(
              height: 100,
              color: Colors.blue[200],
            ),
            Container(
              height: 100,
              color: Colors.blue[300],
            ),
            Container(
              height: 100,
              color: Colors.blue[400],
            ),
            Container(
              height: 100,
              color: Colors.blue[500],
            ),
            Container(
              height: 100,
              color: Colors.blue[600],
            ),
          ],
        ),
image.png

注意点:

  • ListBody创建需要保证在滑动方向上父节点对他没有约束,一般情况与SingleChildScrollView配合使用就行
  • ListBody相对于[Column和Row]的优点是可以保证宽度或者高度的一致性
  • ListBody相对于ListView呢缺点是没有复用回收机制,但是有点也是有的,用法简单而且嵌套滑动组件不需要shrinkWrap,在少量数据而且布局不复杂的情况下使用还能减少内存开销

最后这几个组件怎么使用看需求选择最适合的就行。
Flutter(5):基础组件之Row/Column
Flutter(33):Material组件之ListTile、RefreshIndicator、ListView、Divider

下一节:Layout组件之CustomMultiChildLayout

Flutter(68):Layout组件之CustomMultiChildLayout

Flutter教学目录持续更新中

Github源代码持续更新中

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。