Flutter ListView （動態）列表組件、水平列表組件、圖標組件詳解

Flutter ListView （動態）列表組件、水平列表組件、圖標組件

---

Flutter ListView 基礎列表組件、水平列表組件、圖標組件

列表常見的幾種情況：

• 垂直列表
• 垂直圖文列表
• 橫向列表
• 動態列表

ListView組件常用的參數：

• scrollDirection: Axis, Axis.horizontal 橫向列表 Axis.vertical 垂直列表(默認垂直列表)
• padding : EdgeInsetsGeometry, 內邊距
• reverse : bool, 組件反向排序
• children : List, 列表元素

1. 基礎案例列表示例，使用Icon裝飾列表組件

// HomeContent 組件
class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      padding: EdgeInsets.all(10),  // 設置10內邊距
      children: <Widget>[
        ListTile(
          leading: Icon(Icons.home,size: 50), // 設置圖標 尺寸
          title: Text('這是列表標題內容',
            style: TextStyle(  // 設置標題樣式
              fontSize: 23,
              fontWeight: FontWeight.w500
            )
          ),
          subtitle: Text('bilibili是國內知名的視頻彈幕網站,這裏有最及時的動漫新番,最棒的ACG氛圍,最有創意的Up主。大家可以在這裏找到許多歡樂。'),
        ),
        ListTile(
          leading: Icon(Icons.settings), // 設置圖標
          title: Text('這是列表標題內容'),
          subtitle: Text('這是列表副標題內容'),
        ),
        ListTile(
          trailing: Icon(Icons.settings_brightness), // 設置圖標 放在後面
          title: Text('這是列表標題內容'),
          subtitle: Text('這是列表副標題內容'),
        ),
        ListTile(
          title: Text('這是列表標題內容'),
          subtitle: Text('這是列表副標題內容'),
        ),
        ListTile(
          title: Text('這是列表標題內容'),
          subtitle: Text('這是列表副標題內容'),
        )
      ],
    );
  }
}

案例效果展示：

2. 基礎案例圖片列表示例，使用Image裝飾列表組件

// HomeContent 組件
class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      padding: EdgeInsets.all(10),  // 設置10內邊距
      children: <Widget>[
        ListTile(
          leading: Image.network("https://b-ssl.duitang.com/uploads/item/201603/06/20160306015808_yYPGz.thumb.700_0.jpeg"), // 設置圖片
          title: Text('這是列表標題內容',
            style: TextStyle(  // 設置標題樣式
              fontSize: 23,
              fontWeight: FontWeight.w500
            )
          ),
          subtitle: Text('bilibili是國內知名的視頻彈幕網站,這裏有最及時的動漫新番,最棒的ACG氛圍,最有創意的Up主。大家可以在這裏找到許多歡樂。'),
        ),
        ListTile(
          leading: Image.network("https://b-ssl.duitang.com/uploads/item/201601/02/20160102164729_tQefv.jpeg"), // 設置圖片
          title: Text('這是列表標題內容'),
          subtitle: Text('這是列表副標題內容'),
        ),
        ListTile(
          leading: Image.network("https://b-ssl.duitang.com/uploads/item/201501/16/20150116145245_x4zLY.jpeg"), // 設置圖標 放在後面
          title: Text('這是列表標題內容'),
          subtitle: Text('這是列表副標題內容'),
        ),
        ListTile(
          title: Text('這是列表標題內容'),
          subtitle: Text('這是列表副標題內容'),
        )
      ],
    );
  }
}

案例效果展示：

3. 橫向列表排列，適合用於橫向圖文列表佈局

// HomeContent 組件
class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      padding: EdgeInsets.all(10),
      height: 250,
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          Container(
            width: 180,
            color: Colors.cyan,
            child: ListView(
              children: <Widget>[
                Image.network("https://b-ssl.duitang.com/uploads/item/201510/14/20151014195239_vcHiX.thumb.700_0.jpeg"),
                Text(
                  "圖片標題文字",
                  textAlign: TextAlign.center,
                )
              ],
            ),
          ),
          Container(
            width: 180,
            color: Colors.deepPurple
          ),
          Container(
            width: 180,
            color: Colors.indigo
          ),
          Container(
            width: 180,
            color: Colors.orange
          )
        ],
      ),
    );
  }
}

案例展示效果如下：

Flutter 動態列表組件

首先我們來看一下，List類型的使用
List是Dart的集合類型之一，其實你可以把它簡單理解爲數組，其他語言也都有這個類型。它的聲明有幾種方式：

• var myList = List(): 非固定長度的聲明。
• var myList = List(2): 固定長度的聲明。
• var myList= List():固定類型的聲明方式。
• var myList = [1,2,3]: 對List直接賦值。

那我們這裏使用的是一個List傳遞，然後直接用List中的generate方法進行生產List裏的元素。最後的結果是生產了一個帶值的List變量。代碼如下：

void main () => runApp(MyApp(
  items: new List<String>.generate(1000, (i)=> "Item $i")
));

註解：

• 在main函數的runApp中調用了MyApp類，再使用類的使用傳遞了一個items參數,並使用generate生成器對items進行賦值。
• generate方法傳遞兩個參數，第一個參數是生成的個數，第二個是方法。

1. 基礎動態生成的列表

// HomeContent 組件
class HomeContent extends StatelessWidget{

  // 私有方法 _getData 生成列表
  List<Widget> _getData(){
    List<Widget> list = new List();
    for(int i=0;i<20;i++){
      list.add(
        ListTile(
          title: Text("我是一個${i+1}列表")
        )
      );
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      padding: EdgeInsets.all(10),
      child: ListView(
        children: this._getData(),
      ),
    );
  }
}

案例展示效果：

2. 動態數據生成的列表

// HomeContent 組件
class HomeContent extends StatelessWidget{

  // 私有方法 _getData 生成列表
  List<Widget> _getData(){
    // List<Widget> list = new List();
    List listData = [{
      "title":"標題內容1",
      "author":"作者名稱1",
      "imageUrl": "http://pic.qqtn.com/up/2020-1/2020011418121854630.jpg"
    },{
      "title":"標題內容2",
      "author":"作者名稱2",
      "imageUrl": "http://pic4.zhimg.com/50/v2-d4fe5d28374d778e642d30f8019e2f9d_hd.jpg"
    },{
      "title":"標題內容3",
      "author":"作者名稱3",
      "imageUrl": "https://b-ssl.duitang.com/uploads/item/201505/04/20150504234255_f2Gce.jpeg"
    },{
      "title":"標題內容4",
      "author":"作者名稱4",
      "imageUrl": "https://b-ssl.duitang.com/uploads/item/201608/31/20160831175900_xUFNM.jpeg"
    }];

    var tempList = listData.map((v){
      return ListTile(
        leading: Image.network(v['imageUrl']),
        title: Text(v['title']),
        subtitle: Text(v['author']),
      );
    });
    return tempList.toList();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      padding: EdgeInsets.all(10),
      child: ListView(
        children: this._getData(),
      ),
    );
  }
}

案例預覽效果：

3. 使用ListView.builder創建動態列表

// HomeContent 組件
class HomeContent extends StatelessWidget{

  List list = new List();
  HomeContent(){
    for(int i=0;i<20;i++){
      this.list.add("我是一個${i+1}列表");
    }
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      padding: EdgeInsets.all(10),
      child: ListView.builder(
        itemCount: this.list.length,
        itemBuilder: (item, index){
          return ListTile(
            title: Text(this.list[index])
          );
        }
      )
    );
  }
}