【Flutter】入门02-列表

过程如下：

数据模型以及相关处理代码

class DataModel {
  DataModel(this.name, this.code, this.photoUrl);
  String name;
  String code;
  String photoUrl;
}

class DataHandel {
  static List<DataModel> getDatas() {
    List<DataModel> datas = [];
    for (var i = 0; i < 20; i++) {
      datas.add(DataModel("Gecer__(${i})", "1994000${i}",
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1580274504734&di=11e0f7587c1ea7d6f9427a1c5ec53de0&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2923294473%2C968661074%26fm%3D214%26gp%3D0.jpg"));
    }
    return datas;
  }
}

main.dart代码

import 'package:flutter/material.dart';
import 'model/data.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primaryColor: Colors.green),
      home: Scaffold(
        backgroundColor: Colors.grey[200],
        appBar: AppBar(
          title: Text('Gecer'),
        ),
        body: MyListView(),
      ),
    );
  }
}

class MyListView extends StatelessWidget {
  List<DataModel> datas = DataHandel.getDatas();
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: datas.length,
        itemBuilder: (BuildContext itemContext, int i) {
          return Container(
            color: Colors.white,
            margin: EdgeInsets.all(10),
            padding: EdgeInsets.all(12),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Image.network(
                  datas[i].photoUrl,
                ),
                SizedBox(height: 16),
                Text(
                  datas[i].name,
                  style: Theme.of(context).textTheme.title,
                ),
                 SizedBox(height: 8),
                Text(
                  datas[i].code,
                  style: Theme.of(context).textTheme.subhead,
                ),
                SizedBox(height: 16),
              ],
            ),
          );
        });
  }
}

1. 在MyListView，我们首先通过我们定义的数据处理类（DataHandel）获取我们定义好的数据；

2. 通过ListView.builder进行列表中子组件的循环创建。其中需要给此函数传递两个数据，一个是itemCount，即为遍历次数，另一个itemBuilder为每次遍历的处理方法；

3. 给itemBuilder赋值的函数（itemBuilder: (BuildContext itemContext, int i)）中需要带两个参数一个是BuildContext（我们暂且不讲），另一个是便利的索引；

4. 我们在子组件创建时，为了样式的美观在外层套一个Container，这个就相当于html中的div（其实这样说不准确），目的是为了能让元素产生内、外边距和其他的相关的样式；