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

Posted 2022-01-02 怀君

ListView简介：

列表显示，可容纳多个子组件，可以通过builder、separated、custom等构造。

属性	作用
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列表总数的一致性，不然会导致列表长度溢出报错。