Flutter (八) Widget 列表

ListView

ListView是最常用的可滚动widget，它可以沿一个方向线性排布所有子widget。

• scrollDirection:列表排列方向，默认是垂直方法，Axis.vertical。水平是Axis.horizontal;
• itemExtent：该参数如果不为null，则会强制children的"长度"为itemExtent的值；这里的"长度"是指滚动方向上子widget的长度，即如果滚动方向是垂直方向，则itemExtent代表子widget的高度，如果滚动方向为水平方向，则itemExtent代表子widget的长度。在ListView中，指定itemExtent比让子widget自己决定自身长度会更高效;

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = '基础列表';
    return MaterialApp(
        title: 'Listview',
        home: Scaffold(
          appBar: AppBar(
            title: Text('Listview'),
          ),
          body: new ListView(
                children: <Widget>[
                  ListTile(
                    title: Text('Alarm'),
                    leading: Icon(Icons.alarm),
                  ),
                  ListTile(
                    title: Text('Alarm'),
                    leading: Icon(Icons.alarm),
                  ),
                  ListTile(
                    title: Text('Alarm'),
                    leading: Icon(Icons.alarm),
                  ),
                  ListTile(
                    title: Text('Alarm'),
                    leading: Icon(Icons.alarm),
                  ),
                  ListTile(
                    title: Text('Alarm'),
                    leading: Icon(Icons.alarm),
                  ),
                  ListTile(
                    title: Text('Alarm'),
                    leading: Icon(Icons.alarm),
                  ),
                  ListTile(
                    title: Text('Alarm'),
                    leading: Icon(Icons.alarm),
                  ),
                  ListTile(
                    title: Text('Alarm'),
                    leading: Icon(Icons.alarm),
                  ),
                  ListTile(
                    title: Text('Alarm'),
                    leading: Icon(Icons.alarm),
                  ),
                  ListTile(
                    title: Text('Alarm'),
                    leading: Icon(Icons.alarm),
                  ),
                  ListTile(
                    title: Text('Alarm'),
                    leading: Icon(Icons.alarm),
                  ),
                  ListTile(
                    title: Text('Alarm'),
                    leading: Icon(Icons.alarm),
                  ),
                  ListTile(
                    title: Text('Alarm'),
                    leading: Icon(Icons.alarm),
                  ),
                  ListTile(
                    title: Text('Alarm'),
                    leading: Icon(Icons.alarm),
                  ),
                  ListTile(
                    title: Text('Alarm'),
                    leading: Icon(Icons.alarm),
                  ),
                  ListTile(
                    title: Text('Alarm'),
                    leading: Icon(Icons.alarm),
                  ),
                  ListTile(
                    title: Text('Alarm'),
                    leading: Icon(Icons.alarm),
                  ),
                  ListTile(
                    title: Text('Alarm'),
                    leading: Icon(Icons.alarm),
                  ),
                  ListTile(
                    title: Text('Alarm'),
                    leading: Icon(Icons.alarm),
                  ),
                  ListTile(
                    title: Text('Alarm'),
                    leading: Icon(Icons.alarm),
                  ),
                ],
              )
        ));
  }
}

默认是垂直方向的，如果是水平方向

scrollDirection: Axis.horizontal,

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // final title = '基础列表';
    return MaterialApp(
        title: 'Listview',
        home: Scaffold(
            appBar: AppBar(
              title: Text('Listview'),
            ),
            body: Container(
              margin: EdgeInsets.symmetric(vertical: 20.0),
              height: 200.0,
              child: ListView(
                scrollDirection: Axis.horizontal,
                children: <Widget>[
                  Container(
                    width: 160.0,
                    color: Colors.lightBlue,
                  ),
                  Container(
                    width: 160.0,
                    color: Colors.lightGreen,
                    child: Column(
                      children: <Widget>[
                        Text(
                          '水平',
                          style: TextStyle(fontSize: 30.0),
                        ),
                        Text(
                          '排序',
                          style: TextStyle(color: Colors.red),
                        )
                      ],
                    ),
                  ),
                  Container(
                    width: 160.0,
                    color: Colors.red,
                  ),
                  Container(
                    width: 160.0,
                    color: Colors.grey,
                  ),
                ],
              ),
            )));
  }
}

数据太多的话，总不能都写吧。ListView提供了一个构造器，itemBuilder

import 'package:flutter/material.dart';

void main() => runApp(new MyApp(
  //生成500数据
  items:new List<String>.generate(500, (i)=>"Item $i")
));

class MyApp extends StatelessWidget {

  final List<String> items;

  MyApp({Key key,@required this.items}):super(key:key);

  @override
  Widget build(BuildContext context) {
    final title = '基础列表 itemBuilder';
    return MaterialApp(
        title: 'Listview',
        home: Scaffold(
            appBar: AppBar(
              title: Text(title),
            ),
            body: new ListView.builder(
                itemCount: items.length,
                itemBuilder: (context , index){
                  return new ListTile(
                    leading: new Icon(Icons.phone),
                    title: new Text('${items[index]}'),
                  );
                },
            )
            )
            );
  }
}

GridView

GridView可以构建一个二维网格列表

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = '基础列表 GridView';
    return MaterialApp(
        title: 'GridView',
        home: Scaffold(
            appBar: AppBar(
              title: Text(title),
            ),
            //count 构造网格
            body: new GridView.count(
              primary: false,
              padding: const EdgeInsets.all(20.0),
              crossAxisSpacing: 30.0,
              crossAxisCount: 3,
              children: <Widget>[
                const Text('文本一'),
                const Text('文本二'),
                const Text('文本三'),
                const Text('文本四'),
                const Text('文本五'),
                const Text('文本六'),
                const Text('文本七'),
                const Text('文本八'),
                const Text('文本九'),
              ],
            )));
  }
}