1.构建本地模型,在实际应用中一般会从网络中获取模型数据
post.dart
class Post {const Post({this.title,this.author,this.imageUrl,});
final String title;
final String author;
final String imageUrl;
}final List【Flutter的ListView】 posts = [Post(title: 'Candy Shop',author: 'Mohamed Chahin',imageUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1554172475&di=e1d97f537fdf9fab5f1bdb17f6e23681&src=http://pic9.nipic.com/20100825/4139254_123008053611_2.jpg'),Post(title: 'Childhood in a picture',author: 'Mohamed Chahin',imageUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1554172475&di=e1d97f537fdf9fab5f1bdb17f6e23681&src=http://pic9.nipic.com/20100825/4139254_123008053611_2.jpg'),Post(title: 'Contained',author: 'Mohamed Chahin',imageUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1554172475&di=e1d97f537fdf9fab5f1bdb17f6e23681&src=http://pic9.nipic.com/20100825/4139254_123008053611_2.jpg'),];
2.listview的数据导入和界面显示
Widget build(BuildContext context) {
// TODO: implement build
return ListView.builder(
//列表控件
itemCount: posts.length,
itemBuilder: _listItemBuilder,
);
}
3.listViewItem的具体布局
Widget _listItemBuilder(BuildContext context, int index) {
return Container(
color: Colors.white, //背景色
margin: EdgeInsets.all(8.0), //外边距
child: Stack(
children: [
Column(
children: [
AspectRatio(//Image
aspectRatio: 16 / 9,
child: Image.network(posts[index].imageUrl),
),
SizedBox(height: 16.0),
Text(//title
posts[index].title,
style: Theme.of(context).textTheme.title,
),
Text(//author
posts[index].author,
style: Theme.of(context).textTheme.subhead,
),
],
),
Positioned.fill(
child: Material(
color: Colors.transparent,
child: InkWell(
splashColor: Colors.white.withOpacity(0.3),
highlightColor: Colors.white.withOpacity(0.1),
onTap: () {
Navigator.of(context).push(MaterialPageRoute(builder: (context)=>PostShow(post:posts[index])));
},
),
),
)
],
),
);
}
