Flutter 第四講，初探ListView

今天我們來看看Flutter的ListView，我們會展示一個簡單的汽車的列表，那麼我們首先新建一個car.dart,兩個屬性一個構造方法，還有一個模仿網絡返回的本地數組,因為太佔地方，我就只寫前幾個了

<code>class Car {
  const Car({
    this.name,
    this.imageUrl
});

  final String name;
  final String imageUrl;

}

final List datas = [
  Car(
    name: '保時捷918 Spyder',
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-7d8be6ebc4c7c95b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  ),
  Car(
    name: '蘭博基尼Aventador',
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-e3bfd824f30afaac?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  ),
  Car(
    name: '法拉利Enzo',
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-a1d64cf5da2d9d99?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  )
  ......
];
/<code>

為了便於講解，我們把MaterialApp裡的home，抽出來新建一個Home類

<code>class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('FlutterDemo')),
      body: ListView.builder(itemCount: datas.length,
      itemBuilder: _cellForRow,),
    );
  }
}
/<code> 

這次我們把body換成，ListView.builder()，它有一個itemCount，大家都猜出來是什麼了，列表的行數，還有一個itemBuilder是一個回調函數，我們寫一個_cellForRow的方法，我們先簡單的返回一個Text Widget

<code>Widget _cellForRow(BuildContext context, int index) {
  return Text('123');
}
/<code>

我們保存下看看效果

是不是跟iOS的TableView也很像，這個更簡單不用去遵循Delegate和DataSource了，還有同學可能會問section怎麼辦？很遺憾Flutter並沒有給我們封裝好section，只能我們自己來實現，後面我們也會說這個怎麼實現，接下來我們來用上我們的datas裡面的數據,在這之前我們還是再來介紹一個新的WIdget--Container，這個我們會經常用到，你可以把它想象成空Div或者純淨的UIView，可以添加子Widget的，我們改下我們上面的代碼，我們先只顯示圖片看下，Image有個network方法可以直接傳入url來顯示

<code>Widget _cellForRow(BuildContext context, int index) {
  return Container(
    child: Image.network(datas[index].imageUrl),
  );
}
/<code>

再來看下，圖片是不是出來了

我們的文字改怎麼顯示呢，接下來我們再來介紹一個Column佈局，它有個children屬性可以傳入多個Widget, 我們添加個margin讓顯示更好看一點，同時我們的image和text之間如果嫌太近我們可以加一個SizedBox來分割下

<code>Widget _cellForRow(BuildContext context, int index) {
  return Container(
    color: Colors.white,
    margin: EdgeInsets.all(10),
    child: Column(
      children: <widget>[
        Image.network(datas[index].imageUrl),
        SizedBox(
          height: 10,
        ),
        Text(datas[index].name),
      ],
    ),
  );
}
/<widget>/<code>

這下我們來看下最終的效果

這裡我們擴展下，有Column，是不是會有相對的Row呢，答案是肯定的，其實還有一個Stack，我就不貼圖了，大家可以自己試下看看效果，一般我們開發用這三種佈局就差不多夠用了

今天我們就先簡單的介紹下ListView使用，廢話不多說，明天我們就直接進入我們的項目實戰

閱讀更多 新新猿類 的文章

關鍵字: 成空 法拉利恩佐 我們