在 Flutter 中，ListView 可以沿一個方向（垂直或水平方向）來排列其所有子 Widget，常被用于需要展示一組連續視圖元素的場景

ListView 構造方法

• ListView：僅適用于列表中含有少量元素的場景
• ListView.build：適用于子 Widget 比較多的場景
• ListView.separated：適用于需要設置分割線的場景

ListView

可以通過設置 children 參數，將所有子 Widget 包含到 listView 中，但這種創建方法要求提前將所有子 Widget 一次性創建好，而不是等到真正需要在屏幕上顯示時才創建，即這種方法是導致性能下降。因此，這種方式只適合列表中含有少量元素的場景

class List extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Android小白營"),
      ),
      body: ListView(
        children: <Widget>[
          ListTile(
            leading: Icon(
              Icons.home,
              color: Colors.cyan, // 圖標顏色
            ),
            title: Text("首頁"),
            selected: true, // 設置狀態為選中狀態
          ),
          ListTile(
            leading: Icon(
              Icons.add_shopping_cart,
              color: Colors.black54,
            ),
            title: Text("購物車"),
          ),
          ListTile(
            leading: Icon(
              Icons.account_circle,
              color: Colors.black54,
            ),
            title: Text("我的"),
          )
        ],
      ),
    );
  }
}

運行結果如下

file

ListView.builder

• itemBuilder：列表項的創建方法。當列表滾動到相應位置時，ListView 會調用該方法創建對應的子 Widget
• itemCount：列表項的數目。如果不設置或設置為空，則表示 ListView 為無限列表
• itemExtent：列表項高度。可選參數，但對于定高的列表項元素，建議設置該參數的值（不設置時，ListView 會動態的根據子 Widget 創建完成后的結果，決定自身的視圖高度，以及子 Widget 在 ListView 中的相對位置）

class ListBuild extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemBuilder: (context, index) => ListTile(
          leading: Icon(Icons.adb),
          title: Text("下標" + index.toString()),
        ),
        itemExtent: 46, // 列表項高度
        itemCount: 50, //列表項總數，不設置為無限加載
      ),
    );
  }
}

運行結果如下

file

ListView.separatorBuilder

設置列表項之間的分隔線，可以根據下標設置不同的分隔線

class ListSeparated extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Android小白營"),
      ),
      body: ListView.separated(
        itemBuilder: (context, index) => GestureDetector(
          child: ListTile(
            leading: Icon(Icons.adb),
            title: Text("下標" + index.toString()),
          ),
          onTap: () => Fluttertoast.showToast(msg: index.toString()), // 列表項點擊事件
        ),
        separatorBuilder: (BuildContext context, index) {
          Divider divider;
          if (index % 2 == 0) {
            divider = Divider(
              thickness: 1, // 分隔線寬度
              height: 0,
              color: Colors.black12, // 分隔線顏色
            );
          } else {
            divider = Divider(
              thickness: 2,
              height: 0,
              color: Colors.deepOrangeAccent,
            );
          }
          return divider;
        },
        itemCount: 100,
      ),
    );
  }
}

運行效果如下

file

本文由博客一文多發平臺 OpenWrite 發布！