Flutter 列表组件 ListView

垂直静态列表

• 默认为垂直方向

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ListViewVerticalExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "垂直静态列表",
      home: Scaffold(
        appBar: AppBar(
          title: Text("垂直静态列表"),
        ),
        body: ListView(
          children: <Widget>[
            ListTile(
              leading: Icon(Icons.alarm),
              title: Text("alarm"),
            ),
            ListTile(
              leading: Icon(Icons.close),
              title: Text("close"),
            ),
            ListTile(
              leading: Icon(Icons.transform),
              title: Text("transform"),
            ),
            ListTile(
              leading: Icon(Icons.launch),
              title: Text("launch"),
            ),
            ListTile(
              leading: Icon(Icons.title),
              title: Text("title"),
            ),
            ListTile(
              leading: Icon(Icons.computer),
              title: Text("computer"),
            ),
            ListTile(
              leading: Icon(Icons.height),
              title: Text("height"),
            ),
            ListTile(
              leading: Icon(Icons.school),
              title: Text("school"),
            ),
          ],
        ),
      ),
    );
  }
}

水平静态列表

• scrollDirection: Axis.horizontal 属性为水平方向

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ListViewHorizontalExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "水平静态列表",
      home: Scaffold(
        appBar: AppBar(
          title: Text("水平静态列表"),
        ),
        body: ListView(
          scrollDirection: Axis.horizontal,
          children: <Widget>[
            Container(
              width: 160.0,
              color: Colors.lightGreen,
            ),
            Container(
              width: 160.0,
              color: Colors.amber,
            ),
            Container(
              width: 160.0,
              color: Colors.blue,
              child: Column(
                children: <Widget>[
                  Text(
                    "水平",
                    style:
                        TextStyle(fontWeight: FontWeight.bold, fontSize: 36.0),
                  ),
                  Text(
                    "列表",
                    style:
                    TextStyle(fontWeight: FontWeight.bold, fontSize: 36.0),
                  ),
                  Icon(Icons.list)
                ],
              ),
            ),
            Container(
              width: 160.0,
              color: Colors.cyan,
            ),
          ],
        ),
      ),
    );
  }
}

动态列表

• 通常我们不会使用过多的静态列表，后台加载数据通常会使用动态列表
• 通过ListView.builder构建
• itemCount 指定列表明细数量
• itemBuilder 构建明细的样式与数据绑定

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ListViewDynamicExample extends StatelessWidget {
  List<String> mList;

  ListViewDynamicExample() {
    mList = new List<String>.generate(500, (index) => "Item $index");
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "动态列表",
      home: Scaffold(
        appBar: AppBar(
          title: Text("动态列表"),
        ),
        body: ListView.builder(
          itemCount: mList.length,
          itemBuilder: (context, index) {
            return new ListTile(
              leading: Icon(Icons.shopping_cart),
              title: Text("${mList[index]}"),
            );
          },
        ),
      ),
    );
  }
}