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

它是一种可滚动的列表，共四种构造方法。其中最常用的是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 ，文章会根据学习进度不定时更新，请多多指教~~