flutter -------- ListView的使用

學習了Flutter，來分享一下學習的一些常用的知識，先來說說ListView

 

案例效果：

 

 

 

ListView是一個類似列的widget，它的內容對於其渲染框太長時會自動提供滾動。

ListView 摘要:
用於組織盒子中列表的特殊Column
可以水平或垂直放置
檢測它的內容超過顯示框時提供滾動
比Column配置少，但更易於使用並支持滾動

 

構建ListView有四個選項：

默認構造函數采用子類的顯式List <Widget>。此構造函數適用於具有少量子項的列表視圖，因為構造List需要為可能在列表視圖中顯示的每個子項執行工作，而不僅僅是那些實際可見的子項。

該ListView.builder構造函數采用IndexedWidgetBuilder，它建立在孩子的需求。此構造函數適用於具有大量（或無限）子項數的列表視圖，因為僅為那些實際可見的子項調用構建器。

該ListView.separated構造函數有兩個IndexedWidgetBuilder S： itemBuilder按需建立個子項目，separatorBuilder 同樣建立其出現在子項之間的分隔符的孩子。此構造函數適用於具有固定數量子項的列表視圖。

該ListView.custom構造需要SliverChildDelegate，它提供了自定義子模型的其他方面的能力。例如，SliverChildDelegate可以控制用於估計實際上不可見的子項大小的算法。

 

官方文檔介紹：

https://docs.flutter.io/flutter/widgets/ListView-class.html

 

案例代碼：

 

class UITest3_ListView extends StatelessWidget{

  List<Widget> list = <Widget>[
    new ListTile(
      title: new Text('Mi is One',
          style: new TextStyle(fontWeight: FontWeight.w500,fontSize: 20),
      ),
      subtitle: new Text("85 W zq"),
      leading: new Icon(Icons.theaters,color: Colors.blue[500]),
    ),
    new ListTile(
      title: new Text("Test at Tow",style: new TextStyle(fontWeight: FontWeight.w500,fontSize: 20)),
      subtitle: new Text("666 Car"),
      leading: new Icon(Icons.list,color: Colors.blue[500])
    ),
    new ListTile(
      title: new Text('Three',
        style: new TextStyle(fontWeight: FontWeight.w500,fontSize: 20),
      ),
      subtitle: new Text("85 W zq"),
      leading: new Icon(Icons.theaters,color: Colors.blue[500]),
    ),
    new ListTile(
        title: new Text("Four",style: new TextStyle(fontWeight: FontWeight.w500,fontSize: 20)),
        subtitle: new Text("666 Car"),
        leading: new Icon(Icons.list,color: Colors.blue[500]),
        onTap: (){
          Fluttertoast.showToast(
              msg: " Four",
              toastLength: Toast.LENGTH_SHORT,
              gravity: ToastGravity.BOTTOM,
              timeInSecForIos: 1,
              backgroundColor: Colors.blue,
              textColor: Colors.white
          );
        },

    )
  ];


  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: Text("ListView"),
      ),
      body: new Center(
        child: new ListView(
            children: list,
        ),
      ),
    );
  }
}