在App中，我们实际上是有很多地方是根据动态数据去构建页面的。下面我们拿文章列表来举例。
首先根目录创建文件夹model，并在下面创建post.dart文件，内容为:
class Post {
final String title;
final String image;
const Post({this.title, this.image});
}
final List<Post> posts = [
Post(
title: '疯狂动物城',
image: 'http://img5.mtime.cn/mt/2018/10/22/104316.77318635_180X260X4.jpg',
),
Post(
title: '中国蓝盔',
image: 'http://img5.mtime.cn/mt/2018/10/10/112514.30587089_180X260X4.jpg',
),
Post(
title: '克隆人',
image: 'http://img5.mtime.cn/mt/2018/11/13/093605.61422332_180X260X4.jpg',
),
Post(
title: '龙猫',
image: 'http://img5.mtime.cn/mt/2018/11/07/092515.55805319_180X260X4.jpg',
),
Post(
title: '恐怖快递',
image: 'http://img5.mtime.cn/mt/2018/11/21/090246.16772408_135X190X4.jpg',
),
];
上面即为我们的动态数据。数据好了，下面我们在main.dart中引入:
import 'model/post.dart';
下来我们创建个Home的widget，用于展示列表:
class Home extends StatelessWidget {
Widget _listItemBuilder(BuildContext context, int index) {
return Text(posts[index].title);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('ListView'),
),
body: ListView.builder(
itemCount: posts.length,
itemBuilder: _listItemBuilder,
),
);
}
}
上面代码中,ListView.builder用于构建一个列表视图。itemCount是代表列表的个数，itemBuilder是构建方法，_listItemBuilder是我们自定义的构建方法，返回Text组件。显示如下:
list.png
那我们该如何把图片也显示进去呢?
我们将_listItemBuilder修改下:
class Home extends StatelessWidget {
Widget _listItemBuilder(BuildContext context, int index) {
return Column(
children: <Widget>[
Image.network(posts[index].image),
Text(posts[index].title),
],
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('ListView'),
),
body: ListView.builder(
itemCount: posts.length,
itemBuilder: _listItemBuilder,
),
);
}
}
Column为列组件，里面children是它的子组件数组。 在里面我们定义了新的Image组件，Image.network为网络图片。 下面是显示效果:
do
下面是全部代码:
import 'package:flutter/material.dart';
import 'model/post.dart';
void main() {
runApp(App());
}
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Home(),
);
}
}
class Home extends StatelessWidget {
Widget _listItemBuilder(BuildContext context, int index) {
return Container(
child: Column(
children: <Widget>[
Image.network(
posts[index].image,
),
Text(posts[index].title),
SizedBox(
height: 10.0,
)
],
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('ListView'),
),
body: ListView.builder(
itemCount: posts.length,
itemBuilder: _listItemBuilder,
),
);
}
}
谢谢观看
