Flutter基础（七）Scrolling Widget之ListView、GridView、PageView

た入场券 2024-04-17 06:30 52阅读 0赞

> **本文首发于公众号「刘望舒」**

[ReactNative入门系列][ReactNative] [React Native组件][React Native] [Flutter基础系列][Flutter]

### **前言** ###

我们知道Widget的分类有很多种，比如：Basics、Material Components、Cupertino、Scrolling等等，在前面的文章我介绍了Basics和Material Components，这一篇讲一下Scrolling分类中比较常用的ListView、GridView、PageView。

### **1 ListView** ###

ListView可以说是Flutter中最常用的Scrolling Widget。 ListView有四种构造函数：

1.  默认构造函数ListView。
2.  ListView.builder，适用于具有大量（或无限）列表项。
3.  ListView.separated，可以配置分割线，适用于具有固定数量列表项的ListView。
4.  ListView.custom，提供了自定义子Widget的能力。

#### **1.1 默认构造函数** ####

用默认构造函数的方式来实现一个简单的列表。

ListTile是Material Components中的Widget，通常用于填充ListView，可以满足基本的图片+文字的列表需求。

#### **1.2 ListView.builder创建** ####

如果要展示大量列表项，可以使用ListView.builder。

import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp(
          items: new List<String>.generate(300, (i) => "第$i行"), //1
        ));
    
    class MyApp extends StatelessWidget {
      final List<String> items;
    
      MyApp({
        @required this.items});
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter',
          home: Scaffold(
            appBar: AppBar(
              title: Text('ListView示例'),
            ),
            body: ListView.builder( //2
              itemCount: items.length,
              itemBuilder: (context, index) {
                return ListTile(
                  leading: Icon(Icons.access_time),
                  title: Text('${items[index]}'),
                );
              },
            ),
          ),
        );
      }
    }
    复制代码

在注释1生成300个数据，并将其传入到MyApp中，注释2处通过ListView.builder创建ListView，最终会通过ListTile来显示每一个列表项。

#### **1.3 ListView.separated创建** ####

import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp(
          items: new List<String>.generate(300, (i) => "第$i行"), 
        ));
    
    class MyApp extends StatelessWidget {
      final List<String> items;
    
      MyApp({
        @required this.items});
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Test',
          home: Scaffold(
            appBar: AppBar(
              title: Text('ListView示例'),
            ),
            body: ListView.separated(
              itemCount: items.length,
              itemBuilder: (context, index) {
                return ListTile(
                  leading: Icon(Icons.access_time),
                  title: Text('${items[index]}'),
                );
              },
              separatorBuilder: (context, index) {
        //1
                return Container(
                  constraints: BoxConstraints.tightFor(height: 1),
                  color: Colors.black45,
                );
              },
            ),
          ),
        );
      }
    }
    
    复制代码

这种创建方式和ListView.builder类似，有个最大的不同就是可以通过注释1处的separatorBuilder来设置分割线以及分割线的样式。

### **2 GridView** ###

GridView的使用方法和ListView类似，它有五种构造函数：

1.  默认构造函数GridView。
2.  GridView.count：在横轴方向上具有固定数量的GridView。
3.  GridView.extent：在横轴方向上具有最大范围的GridView。
4.  GridView.builder：适用于具有大量（或无限）列表项。
5.  GridView.custom：提供了自定义子Widget的能力。

这里以第2种构造函数为例。

import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter',
          home: Scaffold(
            appBar: AppBar(
              title: new Text('GridView示例'),
            ),
            body: GridView.count(
              crossAxisCount: 3, //1
              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'),
                ),
                ListTile(
                  title: Text('item8'),
                ),
                ListTile(
                  title: Text('item9'),
                ),
              ],
            ),
          ),
        );
      }
    }
    
    复制代码

注释1处的crossAxisCount用于设置横轴item的数量。效果如下图所示：

### **3 PageView** ###

PageView是一个可逐页滚动的列表，和Android中ViewPage类似。 PageView有三种构造函数：

1.  默认构造函数PageView
2.  PageView.builder：适用于具有大量（或无限）列表项。
3.  PageView.custom：提供了自定义子Widget的能力。

以默认构造函数为例，代码如下所示。

通过注释1处的onPageChanged属性可以得知当前滑动到了第几页。

### **总结** ###

本文并没有介绍每个Widget的构造函数，那样的话就不是一篇文章能写下的了，也没有必要，我们掌握了其中一种构造函数基本就可以举一反三了。Scrolling Widget还包含了一些其他Widget，比如：NestedScrollView、Scrollbar、CustomScrollView、NotificationListener等等，就需要去自行查看官方文档了：[flutter.dev/docs/develo…][flutter.dev_docs_develo]

--------------------

这里不仅分享大前端、Android、Java等技术，还有程序员成长类文章。

转载于:https://juejin.im/post/5d2c9df8e51d45777540fe5e

[ReactNative]: https://link.juejin.im?target=http%3A%2F%2Fliuwangshu.cn%2Ftags%2FReact-Native%25E5%2585%25A5%25E9%2597%25A8%2F
[React Native]: https://link.juejin.im?target=http%3A%2F%2Fliuwangshu.cn%2Ftags%2FReact-Native%25E7%25BB%2584%25E4%25BB%25B6%2F
[Flutter]: https://link.juejin.im?target=http%3A%2F%2Fliuwangshu.cn%2Ftags%2FFlutter%25E5%259F%25BA%25E7%25A1%2580%2F
[flutter.dev_docs_develo]: https://link.juejin.im?target=https%3A%2F%2Fflutter.dev%2Fdocs%2Fdevelopment%2Fui%2Fwidgets%2Fscrolling