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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页
评论

打赏作者

怀君

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值