Flutter——最详细ListView(列表)布局教程

Posted 怀君

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Flutter——最详细ListView(列表)布局教程相关的知识,希望对你有一定的参考价值。

ListView简介:

列表显示,可容纳多个子组件,可以通过builderseparatedcustom等构造。

属性作用
padding内边距
controller列表滚动控制器
itemExtent每条item的高度
itemCount列表的总数
separatorBuilder每条item的分隔符
keyboardDismissBehavior键盘关闭模式
scrollDirection滚动方向

创建ListView列表

class CustomListView extends StatelessWidget 
  final data = <Color>[
    Colors.purple[50]!,
    Colors.purple[100]!,
    Colors.purple[200]!,
    Colors.purple[300]!,
    Colors.purple[400]!,
    Colors.purple[500]!,
    Colors.purple[600]!,
    Colors.purple[700]!,
    Colors.purple[800]!,
    Colors.purple[900]!,
  ];

  @override
  Widget build(BuildContext context) 
    return Container(
      child: ListView(
        padding: EdgeInsets.symmetric(horizontal: 5),
        children: data
            .map((color) => Container(
                  alignment: Alignment.center,
                  width: 100,
                  height: 50,
                  color: color,
                  child: Text(
                    colorString(color),
                    style: TextStyle(color: Colors.white, shadows: [
                      Shadow(
                          color: Colors.black,
                          offset: Offset(.5, .5),
                          blurRadius: 2)
                    ]),
                  ),
                ))
            .toList(),
      ),
    );
  

  String colorString(Color color) =>
      "#$color.value.toRadixString(16).padLeft(8, '0').toUpperCase()";



属性scrollDirection:Axis.horizontal


属性separatorBuilder

 Container(
      height: 200,
      child: ListView.separated(
        separatorBuilder: (context, index) => Divider(
          thickness: 1,
          height: 1,
          color: Colors.orange,
        ),
        itemCount: data.length,
        itemBuilder: (context, index) => _buildItem(data[index]),
      ),
    )

明显的可以看出每条item中间都有一条分割线
thickness属性代表分割线颜色的厚度
height属性代表分割线的整体高度

看一个修改 thickness=1 跟 height=30属性的效果图

使用ListView.builder样式

Container(
      height: 400,
      child: ListView.builder(
        itemExtent: 100,
        itemCount: data.length,
        itemBuilder: (context, index) => _buildItem(data[index]),
      ),
    )

属性itemExtent设置item的固定高度,有助于提高列表的渲染速度。

总结:
1.开发的过程中会遇到列表顶部有默认内间距的高度。有两种方法可以解决此问题
2.我们可以根据列表的索引,展示不同的item样式

  • 第一种
MediaQuery.removePadding(
     context: context,
     removeTop: true,
     child:  ListView.builder(
        itemExtent: 100,
        itemCount: data.length,
        itemBuilder: (context, index) => _buildItem(data[index]),
      ),
   )
  • 第二种
ListView.builder(
        padding: EdgeInsets.only(top: 0),
        itemExtent: 100,
        itemCount: data.length,
        itemBuilder: (context, index) => _buildItem(data[index]),
      )

根据ListView索引,展示不同的item样式

使用场景:例如得意生活应用首页列表,顶部是广告item、中间是一周精选活动、底部全部都是Item样式
这种列表可以根据索引做判断显示不同的item样式

Container(
      height: 400,
      child: ListView.builder(
        itemExtent: 100,
        itemCount: data.length + 2,
        itemBuilder: (context, index) 
          if (index == 0) 
            return Container(
              height: 100,
              child: Text('我是头'),
            );
           else if (index == 1) 
            return Container(
              height: 100,
              child: Text('我在中间'),
            );
          
          return _buildItem(data[index - 2]);
        ,
      ),
    )

这里需要注意的是,itemCount的个数。当列表多了两个自定义视图,需要在列表数据基础上加上二。以确保ListView列表总数的一致性,不然会导致列表长度溢出报错。

以上是关于Flutter——最详细ListView(列表)布局教程的主要内容,如果未能解决你的问题,请参考以下文章

Flutter——最详细ListView(列表)布局教程

Flutter——最详细ListView(列表)布局教程

Flutter:ListView 里面的 ListView.builder

ListView 基础列表组件水平 列表组件图标组件

Flutter使用ListView加载列表数据

Flutter - 如何访问 ListView.builder 中的一个元素?