欢迎关注『郝先生谈技术』头条号，您的关注，是对作者最大的鼓励，也是作者创作的动力。

在Flutter教程-行星之卡片信息（3）等系列文章中，我们完成了展示行星信息的卡片Widget。这篇文章中我们将学习使用ListView Widget，以列表的形式展示多条行星信息。加黑字体代表新增代码。

创建数据源

在上篇文章Flutter教程-行星之卡片信息（3）中，我们定义了行星的数据结构，接下来我们利用它创建一组数据源。

在HomePageBody.dart中添加如下代码：

final List<Planet> planets = [

const Planet(

id: 1,

name: "火星",

location: "银河系",

distance: "220.0m km",

gravity: "3.7 m/s",

description: "遥远的星球",

image: "assets/img/mars.png",

),

const Planet(

id: 1,

name: "海王星",

location: "银河系",

distance: "54.6m km",

gravity: "11.15 m/s",

description: "遥远的星球",

image: "assets/img/neptune.png",

),

const Planet(

id: 1,

name: "月球",

location: "银河系",

distance: "54.6m km",

gravity: "1.622 m/s",

description: "遥远的星球",

image: "assets/img/moon.png",

),

const Planet(

id: 1,

name: "地球",

location: "银河系",

distance: "0m km",

gravity: "9.8 m/s",

description: "我们的星球",

image: "assets/img/earth.png",

),

const Planet(

id: 1,

name: "水星",

location: "银河系",

distance: "54.6m km",

gravity: "3.7 m/s",

description: "遥远的星球",

image: "assets/img/mercury.png",

),

];

创建列表

我们使用Flutter提供的ListView Widget根据数据源创建一个列表，类似Android中的Adapter类。ListView.builder()函数参数如下：

• itemCount : 行数
• itemBuilder : 函数，创建每行的Widget
• itemExtent : 设置每行的高度，如果行高固定的话，可以加快渲染速度

在HomePageBody.dart中添加如下代码：

@override

Widget build(BuildContext context) {

return new ListView.builder(

itemBuilder: (context, index) => new PlanetRow(planets[index]),

itemCount: planets.length,

itemExtent: 152.0,

padding: new EdgeInsets.symmetric(vertical: 16.0),

)；

}

运行后报错，原因是ListView无法计算自身高度。一种解决办法是将它放到一个高度一定的容器部件内，但是这样又产生了新的问题，不同的设备高度不同。所以一个更好的解决办法是使用Expanded Widget。

修改后的代码如下：

@override

Widget build(BuildContext context) {

return new Expanded(

child: new ListView.builder(

itemBuilder: (context, index) => new PlanetRow(planets[index]),

itemCount: planets.length,

itemExtent: 152.0,

padding: new EdgeInsets.symmetric(vertical: 16.0),

));

}

上面的代码中我们还设置了每一行的上下向内偏移16.0px。

运行项目

完成后点击Hot reload，iPhone8模拟器效果如下：

换一种实现方式，初识Slivers Widget

尽管我们已经使用ListView完成了上述页面，但是我还要给大家介绍一下利用Slivers Widget的实现方式。Slivers是一个非常强大的工具，可滚动部件都是基于Slivers实现的。

一个Sliver就是一条可以滚动的内容。Slivers应该被放到一个ScrollView Widget内，CustomScrollView是创建ScrollView的基础类，它的children可以是一组Slivers。

Flutter提供了多种Slivers，以下是创建列表常用到的几个Slivers：

• SliverAppBar：被用于创建可折叠的AppBar
• SliverList：线性列表
• SliverFixedExtentList：和上一个类似，只不过行高固定
• SliverToBoxAdapter：包含一个指定大小子部件的Sliver
• SliverPadding：可以用于为Sliver指定padding值

我们这里使用到了SliverChildBuildDelegate，它成为Slivers代理，负责创建包含子部件的Sliver。

修改后的代码如下：

@override

Widget build(BuildContext context) {

return new Expanded(

child: new Container(

color: new Color(0xff736ab7),

child: new CustomScrollView(

scrollDirection: Axis.vertical, // 竖直方向滚动

slivers: <Widget>[

new SliverPadding(

padding: const EdgeInsets.symmetric(vertical: 24.0),

sliver: new SliverFixedExtentList(

delegate: new SliverChildBuilderDelegate(

(context, index) => new PlanetRow(planets[index]),

childCount: planets.length,

),

itemExtent: 152.0),

)],),));

}

运行项目

完成后点击Hot reload，iPhone8模拟器效果如下：

项目地址

[email protected]:hao2008/flutter-demo.git

下篇预告

行星之路由/导航

欢迎关注『郝先生谈技术』头条号，您的关注，是对作者最大的鼓励，也是作者创作的动力。