美文网首页
Flutter快速上手9:高级布局之列表 ListView

Flutter快速上手9:高级布局之列表 ListView

作者: 十二栗子 | 来源:发表于2022-04-27 09:23 被阅读0次

    它是一种可滚动的列表,共四种构造方法。其中最常用的是ListView.builder构造方法,因为它适用于大量的列表项的情形,甚至可以是无限数量的项。

    • ListView()
    • ListView.builder()
    • ListView.separated()
    • ListView custom()

    创建一个固定个数,使用ListTile,带样式的列表

    final List<String> titles = ['账户申请', '单笔付款申请', '批量付款申请', '资金下拨申请', '业务支持申请', '单笔收款申请',];
    
    
    Container(
            color: Colors.grey[200],
            padding: const EdgeInsets.only(top: 10),
            child: ListView.builder(
              itemCount: 6,
              itemBuilder: (ctx, index){
                return Container(
    
                  margin: const EdgeInsets.symmetric(horizontal: 15, vertical: 7.5),
                  decoration: const BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.all(Radius.circular(5))
                  ),
                  child: ListTile(
                    leading: CircleAvatar(
                      child: Text('$index'),
                    ),
                    title:  Text(titles[index]),
                    subtitle: Text('您有$index笔'+titles[index] +',请及时申请'),
                    trailing: const Icon(Icons.arrow_forward_ios),
                    onTap: (){
                      debugPrint('你点击了'+titles[index]);
                    },
                  ),
                );
              },
            ),
          )
    
    20220507112714.jpg

    创建一个固定个数,有分割线的列表

    ListView.separated(
              itemCount: 50,
              itemBuilder: (ctx, index){
                return Container(
                  color: bgColors[index%5],
                  height: 70,
                );
              },
              separatorBuilder: (ctx, index) {
                //indent左边缩进, endIndent右边缩进, 线条的厚度
                return const Divider(height: 30,color: Colors.orange, indent: 16, endIndent: 16, thickness: 20,);
              }
            ),
    

    本地Flutter 2.10.1,Mac版Android Studio Bumblebee | 2021.1.1 Patch 2
    我是小栗子,初学Flutter ,文章会根据学习进度不定时更新,请多多指教~~

    相关文章

      网友评论

          本文标题:Flutter快速上手9:高级布局之列表 ListView

          本文链接:https://www.haomeiwen.com/subject/ggasertx.html