四、Flutter經常使用組件-ListView 列表組件

1、ListView 列表組件簡介

列表組件也是一個常常使用的組件。在看ListView組件以前先了解一下ListTile組件。

一、ListTile(列表瓦片)組件

ListTile一般用於填充 ListView。

/**
 * ListTile組件
 */
class ListTileWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListTile(
        //標題
        title: Text("House"),
        //副標題
        subtitle: Text("A House"),
        //前置圖標
        leading: Icon(Icons.home),
        //後置圖標
        trailing: Icon(Icons.keyboard_arrow_right),
        //內容內邊距
        contentPadding: EdgeInsets.all(5.0),
        //是否選中狀態
        selected: true);
  }
}

實現效果以下圖：

• title：標題能夠是任何小部件，但一般是文本小部件
• subtitle：副標題，標題下面較小的文本
• leading：前置圖標
• trailing：後置圖標
• contentPadding：內容內邊距
• onTap：點擊事件
• onLongPress：長按事件
• selected：是否選中狀態

二、ListView的聲明使用

/**
 * 列表組件
 */
class ListViewWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //列表組件
    return ListView(children: <Widget>[
      ListTile(
          leading: Icon(Icons.access_time), title: Text('access_time')),
      ListTile(
          leading: Icon(Icons.account_balance), title: Text('account_balance')),
    ]);
  }
}

實現效果以下圖：

使用ListView，而後在他的內部children中，使用了widget數組，由於是一個列表，因此它接受一個數組，而後有使用了listTite組件，在組件中放置了前置圖標和文字。

三、橫向列表的使用

橫向列表如何使用。其實仍是使用ListView組件，只是在ListView組件里加一個ScrollDirection屬性。

/**
 * 橫向列表
 */
class ListViewHorizontalWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //列表組件
    return ListView(
      //滾動方向
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        Container(
          width: 180.0,
          color: Colors.lightBlue,
        ),
        Container(
          width: 180.0,
          color: Colors.amber,
        ),
        Container(
          width: 180.0,
          color: Colors.deepOrange,
        ),
        Container(
          width: 180.0,
          color: Colors.deepPurpleAccent,
        ),
      ],
    );
  }
}

實現效果以下圖：

• scrollDirection:滾動方向
  • Axis.horizontal：水平
  • Axis.vertical：垂直

四、動態列表的使用

在實際開發中，靜態的列表使用的很是少。最經常使用的是動態列表，好比數據從後臺讀取過來，而後存入一個變量數組裏，而後以數組的內容循環出一個列表。

List類型的使用

List是Dart的集合類型之一，它的聲明有幾種方式：

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

void main() =>
    runApp(DynamicListApp(items: List<String>.generate(20, (i) => "Item ${i}")));

/**
 * 動態列表組件
 */
class DynamicListApp extends StatelessWidget {
  final List<String> items;

  DynamicListApp({Key key, @required this.items}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "DynamicList",
      home: Scaffold(
        appBar: AppBar(
          title: Text("DynamicList"),
        ),
        body: Center(
            child: ListView.builder(
                itemCount: this.items.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text("${items[index]}"),
                  );
                })),
      ),
    );
  }
}

實現效果以下圖：

說明:

1. 在main函數的runApp中調用了DynamicListApp類，再使用類構造函數傳遞了一個List類型的items參數,並使用List的generate生成器對items進行賦值。generate方法傳遞兩個參數，第一個參數是生成的個數，第二個是方法。
2. 接收參數，DynamicListApp類定義了items成員變量，經過構造函數爲其賦值。這裏的@required意思就必傳。:super若是子類沒有無名無參數的默認構造函數，則子類必須手動調用一個父類構造函數。
3. ListView.builder()生成動態列表。