ListView初體驗

垂直清單

ListView(
      children: <Widget>[
        //ListTile是ListView子元素的一個内嵌模式，其類似于OC中的内嵌固定模式的cell
        ListTile(
            title: Text("标題1"),
            subtitle: Text("詳細資訊1..."),
            leading: Icon(
              Icons.settings,
              color: Colors.yellow,
              size: 10,
            ),
            trailing: Icon(Icons.face)),
        ListTile(
            title: Text("标題2"),
            subtitle: Text("詳細資訊2..."),
            leading: Icon(Icons.ac_unit, color: Colors.red, size: 20),
            trailing: Image.network(
                "http://pic51.nipic.com/file/20141029/6470615_135409321000_2.jpg")),
        ListTile(
            title: Text("标題3"),
            subtitle: Text("詳細資訊3..."),
            leading: Icon(Icons.backspace, color: Colors.orange, size: 30)),
        Image.network(
            "http://pic14.nipic.com/20110603/7658638_151231191000_2.jpg"),
        Container(
          height: 10,
          color: Colors.red,
        ),
        Image.network(
            "http://pic62.nipic.com/file/20150318/8684504_093611837474_2.jpg"),
      ], //配置ListView清單子元素
      padding: EdgeInsets.all(10), //設定ListView的内邊距
    );

複制

ListView的children屬性的值是一個Widget數組，該數組裡面裝載的就是ListView裡面展示的各個子元素。

ListView的子元素可以是任何類型的Widget，可以是Text、可以是Image、也可以是Container，也可以是ListTile。

ListTile是Flutter内置的用于作為ListView子元素的widget，其類似于OC中的内置cell。

Container可用于設定ListView各個子元素之間的間隔。

效果如下：

水準清單

Container(
      height: 180,
      child: ListView(
        children: <Widget>[
          Container(
            width: 180,
            color: Colors.red,
            child: ListView(
              children: <Widget>[
                Image.network("http://pic33.nipic.com/20131010/10391882_093034327358_2.jpg"),
                Text("公司簡介")
              ],
            ),
          ),
          Container(
            width: 180,
            color: Colors.blue,
          ),
          Container(
            width: 180,
            color: Colors.green,
          ),
          Container(
            width: 180,
            color: Colors.brown,
          ),
          Container(
            width: 180,
            color: Colors.yellow,
          ),
        ],
        padding: EdgeInsets.all(10),
        scrollDirection: Axis.horizontal,//通過該參數配置是水準還是垂直
      ),
    );

複制

通過ListView的scrollDirection屬性可以配置該ListView是水準還是垂直的。

ListView的元素裡面還可以嵌套其他的元素：

Container(
            width: 180,
            color: Colors.red,
            child: ListView(
              children: <Widget>[
                Image.network("http://pic33.nipic.com/20131010/10391882_093034327358_2.jpg"),
                Text("公司簡介")
              ],
            ),
          ),

複制

效果圖如下：

動态清單

所謂動态清單，其實就是根據資料來控制清單的内容展示。

首先，我們自己建立一個JSON資料數組，放在NormanDatas.dart檔案中：

//NormanDatas.dart檔案
List listData = [
  {
    "title":"title1",
    "detail":"detail1",
    "imgUrl":"http://pic38.nipic.com/20140217/7643674_131828170000_2.jpg"
  },
  {
    "title":"title2",
    "detail":"detail2",
    "imgUrl":"http://pic23.nipic.com/20120815/7976459_193605074324_2.jpg"
  },
  {
    "title":"title3",
    "detail":"detail3",
    "imgUrl":"http://pic17.nipic.com/20111101/3094309_171235018306_2.jpg"
  },
  {
    "title":"title4",
    "detail":"detail4",
    "imgUrl":"http://pic36.nipic.com/20131216/7205248_104247058321_2.jpg"
  },
  {
    "title":"title5",
    "detail":"detail5",
    "imgUrl":"http://pic27.nipic.com/20130129/11900941_205032216185_2.jpg"
  },
  {
    "title":"title6",
    "detail":"detail6",
    "imgUrl":"http://pic36.nipic.com/20131206/9885883_193903882000_2.jpg"
  },
  {
    "title":"title7",
    "detail":"detail7",
    "imgUrl":"http://pic18.nipic.com/20120114/7303631_154218056334_2.jpg"
  },
  {
    "title":"title8",
    "detail":"detail8",
    "imgUrl":"http://pic26.nipic.com/20130116/6647776_154516318110_2.jpg"
  },
  {
    "title":"title9",
    "detail":"detail9",
    "imgUrl":"http://pic32.nipic.com/20130822/11918471_133412467197_2.jpg"
  },
  {
    "title":"title10",
    "detail":"detail10",
    "imgUrl":"http://pic24.nipic.com/20120922/10614245_073225718000_2.jpg"
  }
];

複制

使用代碼如下：

import 'resource/NormanDatas.dart';


class HomeContent extends StatelessWidget {

  List<Widget> _getDatas() {
    List<Widget> datas = new List();
    for (var i = 0; i < listData.length; i++) {
      Map map = listData[i];
      datas.add(ListTile(
        title: Text(map["title"]),
        subtitle: Text(map["detail"]),
        leading: Image.network(map["imgUrl"]),
      ));
    }
    return datas;
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: this._getDatas(),
    );
  }
  
}

複制

這裡我定義了一個私有的方法 _getDatas 用來生成ListView的子元素們。

然後在私有方法 _getDatas 中循環周遊資料源listData，然後依次生成對應的ListTile。

實際上，上述代碼中的_getDatas方法：

List<Widget> _getDatas() {
    List<Widget> datas = new List();
    for (var i = 0; i < listData.length; i++) {
      Map map = listData[i];
      datas.add(ListTile(
        title: Text(map["title"]),
        subtitle: Text(map["detail"]),
        leading: Image.network(map["imgUrl"]),
      ));
    }
    return datas;
  }

複制

可以利用List的map方法來進行簡化，簡化後的代碼如下：

List<Widget> _getDatas() {
    var datas = listData.map((value){
      return ListTile(
        title: Text(value["title"]),
        subtitle: Text(value["detail"]),
        leading: Image.network(value["imgUrl"]),
      );
    });
    return datas.toList();
  }

複制

需要注意的一點是，List的map方法用于周遊處理List中的每一個元素。

實際上，針對固定格式的子元素，ListView給我們提供了ListView.builder 方法，用于周遊處理每一個子元素，代碼如下：

ListView.builder(
      itemBuilder: (context, index){
        Map value = listData[index];
        return ListTile(
          title: Text(value["title"]),
          subtitle: Text(value["detail"]),
          leading: Image.network(value["imgUrl"]),
        );
      },
    );

複制

以上。