Flutter的ListView

1.构建本地模型,在实际应用中一般会从网络中获取模型数据

post.dart

class Post {

  const Post({

    this.title,

    this.author,

    this.imageUrl,

  });

  final String title;

  final String author;

  final String imageUrl;

}

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