Flutter 第四讲，初探ListView

今天我们来看看Flutter的ListView，我们会展示一个简单的汽车的列表，那么我们首先新建一个car.dart,两个属性一个构造方法，还有一个模仿网络返回的本地数组,因为太占地方，我就只写前几个了

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

  final String name;
  final String imageUrl;

}

final List<Car> 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',
  )
  ......
];

为了便于讲解，我们把MaterialApp里的home，抽出来新建一个Home类

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

这次我们把body换成，ListView.builder()，它有一个itemCount，大家都猜出来是什么了，列表的行数，还有一个itemBuilder是一个回调函数，我们写一个_cellForRow的方法，我们先简单的返回一个Text Widget

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

我们保存下看看效果

是不是跟iOS的TableView也很像，这个更简单不用去遵循Delegate和DataSource了，还有同学可能会问p怎么办？很遗憾Flutter并没有给我们封装好p，只能我们自己来实现，后面我们也会说这个怎么实现，接下来我们来用上我们的datas里面的数据,在这之前我们还是再来介绍一个新的WIdget--Container，这个我们会经常用到，你可以把它想象成空Div或者纯净的UIView，可以添加子Widget的，我们改下我们上面的代码，我们先只显示图片看下，Image有个network方法可以直接传入url来显示

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

再来看下，图片是不是出来了

我们的文字改怎么显示呢，接下来我们再来介绍一个Column布局，它有个children属性可以传入多个Widget, 我们添加个margin让显示更好看一点，同时我们的image和text之间如果嫌太近我们可以加一个SizedBox来分割下

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

这下我们来看下最终的效果

这里我们扩展下，有Column，是不是会有相对的Row呢，答案是肯定的，其实还有一个Stack，我就不贴图了，大家可以自己试下看看效果，一般我们开发用这三种布局就差不多够用了

今天我们就先简单的介绍下ListView使用，废话不多说，明天我们就直接进入我们的项目实战

 

喜欢的朋友可以扫描关注我的公众号(多多点赞，多多打赏，您的支持是我写作的最大动力）

iOS_DevTips