一、列表

ListView是列表控件，与iOS中的tableView, Android中的ListView一个意思。
list view中的属性列表如下：

  ListView({
    Key key,
    Axis scrollDirection = Axis.vertical,
    bool reverse = false,
    ScrollController controller,
    bool primary,
    ScrollPhysics physics,
    bool shrinkWrap = false,
    EdgeInsetsGeometry padding,
    this.itemExtent,
    bool addAutomaticKeepAlives = true,
    bool addRepaintBoundaries = true,
    bool addSemanticIndexes = true,
    double cacheExtent,
    List<Widget> children = const <Widget>[],
    int semanticChildCount,
    DragStartBehavior dragStartBehavior = DragStartBehavior.start,
  })

看如下代码：

import 'package:flutter/material.dart';

void main () => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build (BuildContext context) {
    return MaterialApp(
      title: 'This is a Flutter Demo',
      home: Scaffold(
        appBar: AppBar(title: Text('ListView Widget')),
        body: new ListView( //这个ListView和iOS的tableView一样，和安卓的ListView一样
          children: <Widget>[
            new ListTile(
              leading: new Icon(Icons.perm_camera_mic), //设置list的图片
              title: new Text('perm_camera_mic') //设置list中的文字
            ),
            new ListTile(
                leading: new Icon(Icons.add_call),
                title: new Text('add_call')
            ),
            new ListTile(
                leading: new Icon(Icons.access_time),
                title: new Text('access_time')
            ),
          ],
        )
      ),
    );
  }
}

运行结果如下：

image.png

当然，我们在ListView中可以插入任意类型的组建，比如说插入一个Image组件

import 'package:flutter/material.dart';

void main () => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build (BuildContext context) {
    return MaterialApp(
      title: 'This is a Flutter Demo',
      home: Scaffold(
        appBar: AppBar(title: Text('ListView Widget')),
        body: new ListView( //这个ListView和iOS的tableView一样，和安卓的ListView一样
          children: <Widget>[
            new Image.network('https://wenhui.whb.cn/u/cms/www/202003/17180400l29o.jpg'),
            new Image.network('https://wenhui.whb.cn/u/cms/www/202003/17180417lku5.jpg'),
            new Image.network('https://wenhui.whb.cn/u/cms/www/202003/17180424raqz.jpg'),
          ],
        )
      ),
    );
  }
}

运行结果如下：

image.png

二、横向列表

flutter中一切皆组件，为了更加直观的查看代码，在本示例中把ListView抽取出来作为一个class，这样在MyApp中直接调用MyList组件即可。

import 'package:flutter/material.dart';

void main () => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build (BuildContext context) {
    return MaterialApp(
      title: 'This is a Flutter Demo',
      home: Scaffold(
        appBar: AppBar(title: Text('ListView Widget')),
        body: Center(
          child: Container(
            height: 200,
            child: MyList(),
          ),
        ),
      ),
    );
  }
}

//flutter中一切皆组件，此处把ListView这个组件抽取出来作为一个类
class MyList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      scrollDirection: Axis.horizontal ,//列表的滚动方向，horizontal：横向，Vertical：竖向
      children: <Widget>[
        new Container(
          width: 180,
          color: Colors.lightBlue,
        ),
        new Container(
          width: 180,
          color: Colors.yellow,
        ),
        new Container(
          width: 180,
          color: Colors.deepOrange,
        ),
        new Container(
          width: 180,
          color: Colors.deepPurple,
        ),
      ],
    );
  }
}

运行结果如下：

可以左右滚动查看四个颜色块。

三、向ListView中添加数据

下列示例的意思是：最创建一个长度为100的items数组并初始化值，然后在MyApp中使用这个数组作为ListView的元素显示。

import 'package:flutter/material.dart';

void main () => runApp(MyApp(
  //List就是一个数组，下面这句代码的意思是声明一个字符串类型的数组items，长度为100，给每个元素都赋值
  items: new List<String>.generate(100, (i)=> "Item $i")
));

class MyApp extends StatelessWidget {
  final List<String> items;  //用final修饰items
  //构造函数，Key是构造函数自带的，@required表示这个参数是必须存在的。使用super就是调用父类
  MyApp({Key key, @required this.items}):super(key:key);
  //此处可以省略Key不写也是可以的
//  MyApp({@required this.items}):super();
  @override
  Widget build (BuildContext context) {
    return MaterialApp(
      title: 'This is a Flutter Demo',
      home: Scaffold(
        appBar: AppBar(title: Text('ListView Widget')),
        body: new ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index){
            return new ListTile(
              title: new Text('${items[index]}'),
            );
          },
        ),
      ),
    );
  }
}

运行结果如下：

结果会从0-99显示完整