Flutter 之 ListView

在 Flutter 中，ListView 能夠沿一個方向（垂直或水平方向）來排列其全部子 Widget，常被用於須要展現一組連續視圖元素的場景

ListView 構造方法

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

構造方法名	特色	使用場景
ListView	一次性建立好全部子 Widget	適用於展現少許連續子 Widget 的場景
ListView.build	提供了子 Widget 建立方法，僅在須要展現時才建立	適用於子 Widget 較多，且視覺效果呈現某種規律性的場景
ListView.separated	提供了子 Widget 建立方法，僅在須要展現時才建立，且提供了自定義分割線的功能	適用於子 Widget 較多，且視覺效果呈現某種規律性、每一個子 Widget 之間須要分割線的場景

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("個人"),
          )
        ],
      ),
    );
  }
}

運行結果以下

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, //列表項總數，不設置爲無限加載
      ),
    );
  }
}

運行結果以下

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,
      ),
    );
  }
}

運行效果以下

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