在App中募谎，我們實(shí)際上是有很多地方是根據(jù)動(dòng)態(tài)數(shù)據(jù)去構(gòu)建頁(yè)面的彭沼。下面我們拿文章列表來(lái)舉例梭灿。
首先根目錄創(chuàng)建文件夾model画侣，并在下面創(chuàng)建post.dart文件，內(nèi)容為:

class Post {
  final String title;
  final String image;

  const Post({this.title, this.image});
}

final List<Post> posts = [
  Post(
    title: '瘋狂動(dòng)物城',
    image: 'http://img5.mtime.cn/mt/2018/10/22/104316.77318635_180X260X4.jpg',
  ),
  Post(
    title: '中國(guó)藍(lán)盔',
    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',
  ),
];

上面即為我們的動(dòng)態(tài)數(shù)據(jù)堡妒。數(shù)據(jù)好了配乱，下面我們?cè)趍ain.dart中引入:

import 'model/post.dart';

下來(lái)我們創(chuàng)建個(gè)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用于構(gòu)建一個(gè)列表視圖皮迟。itemCount是代表列表的個(gè)數(shù)搬泥，itemBuilder是構(gòu)建方法，_listItemBuilder是我們自定義的構(gòu)建方法伏尼，返回Text組件忿檩。顯示如下:

list.png

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是它的子組件數(shù)組爆阶。 在里面我們定義了新的Image組件燥透，Image.network為網(wǎng)絡(luò)圖片。 下面是顯示效果:

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

謝謝觀看