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

本文首發於公衆號「劉望舒」

ReactNative入門系列 React Native組件 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 默認構造函數

用默認構造函數的方式來實現一個簡單的列表。

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: Text('ListView示例'),
        ),
        body: ListView(
          children: <Widget>[
            ListTile(
              leading: Icon(Icons.access_time),
              title: Text('第1行'),
            ),
            ListTile(
              leading: Icon(Icons.access_time),
              title: Text('第2行'),
            ),
          ],
        ),
      ),
    );
  }
}
複製代碼

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的能力。

以默認構造函數爲例，代碼以下所示。

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: Text('PageView示例'),
        ),
        body: PageView(
          onPageChanged: (index) {//1
            print('當前爲第 $index 頁');
          },
          children: <Widget>[
            ListTile(
              title: Text('第0頁'),
            ),
            ListTile(
              title: Text('第1頁'),
            ),
            ListTile(
              title: Text('第2頁'),
            ),
          ],
        ),
      ),
    );
  }
}
複製代碼

經過註釋1處的onPageChanged屬性能夠得知當前滑動到了第幾頁。

總結

本文並無介紹每一個Widget的構造函數，那樣的話就不是一篇文章能寫下的了，也沒有必要，咱們掌握了其中一種構造函數基本就能夠觸類旁通了。Scrolling Widget還包含了一些其餘Widget，好比：NestedScrollView、Scrollbar、CustomScrollView、NotificationListener等等，就須要去自行查看官方文檔了：flutter.dev/docs/develo…

---

這裏不只分享大前端、Android、Java等技術，還有程序員成長類文章。