Flutter列表ListView 使用概述

Flutter ListView

ListView 是一個線性佈局的widgets 列表.
ListView -extends->BoxScrollView -extends->ScrollView -extends->StatelessWidget

在構建ListView時有4中選擇：

• 利用ListView構造函數。此構造函數適合於具備少許子元素的列表視圖，由於上種方法建立的ListView 會將子Item一次性繪製出來，若是子Item 多的話，會形成頁面卡頓。

• ListView.builder利用IndexedWidgetBuilder來按需構造。這個構造函數適合於具備大量（或無限）子視圖的列表視圖，由於構建器只繪製可見的Item。

• 使用ListView.separated構造函數，採用兩個IndexedWidgetBuilder：itemBuilder根據須要構建子項separatorBuilder相似地構建出如今子項之間的分隔符子項。此構造函數適用於具備固定數量的子控件的列表視圖。

• 使用ListView.custom的SliverChildDelegate構造，它提供了定製子模型的其餘方面的能力。 例如，SliverChildDelegate能夠控制用於估計實際上不可見的孩子的大小的算法。

1 加載少許數據時可使用

本方法建立的ListView ，會將子Item一次性繪製出來

ListView(
       //item 高度會適配 item填充的內容的高度
       shrinkWrap: true,
       padding: EdgeInsets.all(20.0),
       children: <Widget>[
         new Text(
           "test",
           style: new TextStyle(fontSize: 18.0, color: Colors.red),
         ),
         new Text(
           "${list[0].age}",
           style: new TextStyle(fontSize: 18.0, color: Colors.green),
         ),
         new Text(
           "${list[0].content}",
           style: new TextStyle(fontSize: 18.0, color: Colors.blue),
         ),
       ],
     );

2 ListView.builder() 經常使用

假若有 1000 個列表，初始渲染時並不會全部都渲染，而只會特定數量的 item

ListView.builder(
     // item 的個數
     itemCount: 20,
     //設置滑動方向 Axis.horizontal 水平 默認 Axis.vertical 垂直
     scrollDirection: Axis.vertical,
     //內間距
     padding: EdgeInsets.all(10.0),
     //是否倒序顯示 默認正序 false 倒序true
     reverse: false,
     //false，若是內容不足，則用戶沒法滾動 而若是[primary]爲true，它們老是能夠嘗試滾動。
     primary: true,
     //肯定每個item的高度 會讓item加載更加高效
     itemExtent: 50.0,
     //item 高度會適配 item填充的內容的高度 多用於嵌套listView中 內容大小不肯定 好比 垂直佈局中 前後放入文字 listView （須要Expend包裹不然沒法顯示無窮大高度 可是須要肯定listview高度 shrinkWrap使用內容適配不會） 文字
     shrinkWrap: true,
     //滑動類型設置
     //new AlwaysScrollableScrollPhysics() 老是能夠滑動 NeverScrollableScrollPhysics禁止滾動 BouncingScrollPhysics 內容超過一屏 上拉有回彈效果 ClampingScrollPhysics 包裹內容 不會有回彈
     // cacheExtent: 30.0, //cacheExtent 設置預加載的區域 cacheExtent 強制設置爲了 0.0，從而關閉了「預加載」
     physics: new ClampingScrollPhysics(),
     //滑動監聽
     // controller ,
     itemBuilder: (BuildContext context, int index) { 
 
   
       //設置子條目
       return ListTile(
         title: Text("title $index"),
         // item 標題
         leading: Icon(Icons.keyboard),
         // item 前置圖標
         subtitle: Text("subtitle $index"),
         // item 副標題
         trailing: Icon(Icons.keyboard_arrow_right),
         // item 後置圖標
         isThreeLine: false,
         // item 是否三行顯示
         dense: true,
         // item 直觀感覺是總體大小
         contentPadding: EdgeInsets.all(10.0),
         // item 內容內邊距
         enabled: true,
         onTap: () { 
 
   
           print('點擊:$index');
         },
         // item onTap 點擊事件
         onLongPress: () { 
 
   
           print('長按:$index');
         },
         // item onLongPress 長按事件
         selected: false, // item 是否選中狀態
       );
     },
   ),

ListTile 是Flutter 提供好的經常使用widget ，包括文字，icon，點擊事件

3 ListView.separated()

帶分割線的item，separated 相比較於 builder，又多了一個參數 separatorBuilder ，用於控制列表各個元素的間隔如何渲染。

ListView.separated(
              scrollDirection: Axis.vertical,
              itemCount: 100, // item 的個數
              separatorBuilder: (BuildContext context, int index) => Divider(height:1.0,color: Colors.blue),  // 添加分割線
              itemBuilder: (BuildContext context, int index) { 
 
   
                return ListTile(
                  title:  Text("title $index"), // item 標題
                  leading: Icon(Icons.keyboard), // item 前置圖標
                  subtitle: Text("subtitle $index"), // item 副標題
                  trailing: Icon(Icons.keyboard_arrow_right),// item 後置圖標
                  isThreeLine:false,  // item 是否三行顯示
                  dense:true,                // item 直觀感覺是總體大小
                  contentPadding: EdgeInsets.all(10.0),// item 內容內邊距
                  enabled:true,
                  onTap:(){ 
 
   print('點擊:$index');},// item onTap 點擊事件
                  onLongPress:(){ 
 
   print('長按:$index');},// item onLongPress 長按事件
                  selected:false,     // item 是否選中狀態
                );
              },
            ),

4 ListView.custom

ListView.custom(
            scrollDirection: Axis.vertical,
            childrenDelegate:
                SliverChildBuilderDelegate((BuildContext context, int index) { 
 
   
              return Container(
                height: 50.0,
                alignment: Alignment.center,
                color: Colors.lightBlue[100 * (index % 9)],
                child: Text('list item $index'),
              );
            }, childCount: 50),
          ),

本公衆號會首發系列專題文章，付費的視頻課程會在公衆號中免費刊登，在你上下班的路上或者是睡覺前的一刻，本公衆號都是你瀏覽知識乾貨的一個小選擇，收藏不如行動，在那一刻，公衆號會提示你該學習了。

---

【##】 目前在西瓜視頻上免費刊登 Flutter 系列教程，每日更新，歡迎關注接收提醒點擊查看提示

---

本文同步分享在 博客「早起的年輕人」（CSDN）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。