Scrolling widgets (ListView, GridView, PageView

This article was first published on the public account “Liu Wangshu”

ReactNative Features the ReactNative component Flutter Foundation series

preface

We know that widgets can be classified in many ways, such as: Basics, Material Components, Cupertino, Scrolling, etc. In previous articles, I introduced Basics and Material Components. In this article, we will describe the commonly used Scrolling ListView, GridView and PageView.

1 ListView

ListView is arguably the most commonly used Scrolling Widget for Flutter. ListView has four constructors:

1. The default constructor is ListView.
2. Listview. builder, for having a large (or infinite) list of items.
3. Separated, can be configured for listViews with a fixed number of list items.
4. Listview.custom, which provides the ability to customize child widgets.

1.1 Default constructor

Use the default constructor to implement a simple list.

import 'package:flutter/material.dart';

void main(a) => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('the ListView sample'),
        ),
        body: ListView(
          children: <Widget>[
            ListTile(
              leading: Icon(Icons.access_time),
              title: Text('Line 1'),
            ),
            ListTile(
              leading: Icon(Icons.access_time),
              title: Text('Line 2'),),),),); }}Copy the code

Listtiles are widgets in Material Components that are commonly used to populate a ListView and can be used for basic image + text lists.

1.2 ListView. Builder to create

If you want to display a large number of list items, you can use listView.Builder.

import 'package:flutter/material.dart';

void main(a) => runApp(MyApp(
      items: new List<String>.generate(300, (i) => "Line $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('the ListView sample'),
        ),
        body: ListView.builder( / / 2
          itemCount: items.length,
          itemBuilder: (context, index) {
            return ListTile(
              leading: Icon(Icons.access_time),
              title: Text('${items[index]}')); },),),); }}Copy the code

Generate 300 data in comment 1 and pass it to MyApp, create a ListView from ListView.builder in comment 2, and eventually display each list item by ListTile.

1.3 ListView. Separated to create

import 'package:flutter/material.dart';

void main(a) => runApp(MyApp(
      items: new List<String>.generate(300, (i) => "Line $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('the ListView sample'),
        ),
        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, ); },),),); }}Copy the code

This is similar to listView. Builder, except that you can use the separatorBuilder at comment 1 to set the separatorBuilder and the style of the separatorBuilder.

2 GridView

A GridView is similar to a ListView in that it has five constructors:

1. The default constructor is GridView.
2. Gridview.count: Has a fixed number of GridViews along the horizontal axis.
3. Gridview. extent: Has the maximum range of Gridviews in the horizontal direction.
4. Gridview.builder: Works with a large (or infinite) list of items.
5. Gridview.custom: Provides the ability to customize child widgets.

Take the second constructor as an example.

import 'package:flutter/material.dart';

void main(a) => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: new Text('the GridView sample'),
        ),
        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'),),),),); }}Copy the code

The crossAxisCount at comment 1 sets the number of items on the horizontal axis. The effect is shown below:

3 PageView

PageView is a page-by-page scrollable list, similar to ViewPage on Android. PageView has three constructors:

1. The default constructor PageView
2. Pageview. Builder: Works with large (or infinite) list items.
3. Pageview. custom: Provides the ability to customize child widgets.

Take the default constructor as an example. The code is shown below.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('PageView sample'),
        ),
        body: PageView(
          onPageChanged: (index) {/ / 1
            print('Current $index page');
          },
          children: <Widget>[
            ListTile(
              title: Text('Page 0'),
            ),
            ListTile(
              title: Text('Page 1'),
            ),
            ListTile(
              title: Text('Page 2'),),),),); }}Copy the code

The onPageChanged property at comment 1 tells you what page you are currently sliding to.

conclusion

This article does not cover the constructors of each Widget, because that would be more than an article, and it is not necessary. Scrolling widgets include other widgets such as NestedScrollView, Scrollbar, CustomScrollView, NotificationListener, etc. Flutter. Dev/docs/develo…