Flutter - 动态显示列表

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

谢谢观看