Flutter的列表组件ListView、GridView和PageView

Scrolling Widget是一种基本组件，介绍一些基本的使用方法。

ListView

它具有四种构造方法：

• 默认构造函数ListView
• ListView.builder：适合具有大量列表项的ListView。
• ListView.separated：可以配置分割线，适用于具有固定数量的列表项的ListView。
• ListView.custom：提供自定义Widget的能力。

1. 默认构造方式

MaterialApp(
            home: Scaffold(
              body: ListView(
                children: <Widget>[
                  ListTile(
                    leading: Icon(Icons.access_time),
                    title: Text('第1行'),
                  ),
                  ListTile(
                    leading: Icon(Icons.access_time),
                    title: Text('第2行'),
                  )
                ],
              ),
            ),
          ),

2. ListView.builder

import 'package:flutter/material.dart';

class Recommand extends StatelessWidget{
  final List<String> items = new List<String>.generate(300, (i) => '第$i行');
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '推荐',
      home: Scaffold(
        body: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index){
            return ListTile(
              leading: Icon(Icons.access_time),
              title: Text('${items[index]}'),
            );
          },
        ),
      ),
    );
  }
}

3. ListView.separated

import 'package:flutter/material.dart';

class Popular extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    final List<String> item = new List<String>.generate(300, (index) => '第$index行');
    return MaterialApp(
      home: Scaffold(
        body: ListView.separated(
          itemCount: item.length,
          itemBuilder: (context, index){
            return ListTile(
              leading: Icon(Icons.access_time),
              title: Text('${item[index]}'),
            );
          },
          separatorBuilder: (context, index){
            return Container(
              constraints: BoxConstraints.tightFor(height: 1),
              color: Colors.black45,
            );
          },
        ),
      ),
    );
  }
}

GridView

它有五种构造方法。

• 默认构造函数GridView。
• GridView.count：适用于横轴方向上具有固定数量的。
• GridView.extent：适用于横轴方向上具有最大范围的GridView。
• GridView.build：适用于具有大量列表项。
• GridView.custom：提供自定义Widget的能力。

1. 第二种示例

import 'package:flutter/material.dart';

class Cartoon extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: GridView.count(
          crossAxisCount: 2,
          children: <Widget>[
            ListTile(
              title: Text('item1'),
            ),
            ListTile(
              title: Text('item2'),
            ),
            ListTile(
              title: Text('item3'),
            ),
            ListTile(
              title: Text('item4'),
            ),
            ListTile(
              title: Text('item5'),
            ),
            ListTile(
              title: Text('item6'),
            ),
            ListTile(
              title: Text('item7'),
            ),
          ],
        ),
      ),
    );
  }
}

PageView

它有三种构造方法。

• 默认构造函数PageView。
• PageView.build：适用于具有大量列表项的。
• PageView.custom：自定义。

1. 默认示例
   可以配置PageController来对它的PageView进行控制，类似TabController。

import 'package:flutter/material.dart';

class Movie extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: PageView(
          onPageChanged: (index){
            print('当前为第$index页');
          },
          children: <Widget>[
            ListTile(
              title: Text('第0页'),
            ),
            ListTile(
              title: Text('第1页'),
            ),
            ListTile(
              title: Text('第2页'),
            ),
          ],
        ),
      ),
    );
  }
}