Flutter常用的滚动组建及其优化_flutter 滚动布局

Flutter 常用的滚动组件包括：

ListView：在一个可滚动的列表中显示一系列的子控件。
GridView：在一个网格布局中显示一系列的子控件。
SingleChildScrollView：在一个可滚动的视图中显示单个子控件。
CustomScrollView：自定义滚动模型的可滚动视图，可以同时包含多种滚动模型，如 ListView、GridView 和 SliverAppBar 等。

ListView

ListView 是最常用的可滚动列表组件之一。使用 ListView 可以轻松地在一个可滚动的列表中显示一系列的子控件。

ListView(
  children: <Widget>[
    ListTile(
      leading: Icon(Icons.map),
      title: Text('Map'),
    ),
    ListTile(
      leading: Icon(Icons.photo_album),
      title: Text('Album'),
    ),
    ListTile(
      leading: Icon(Icons.phone),
      title: Text('Phone'),
    ),
  ],
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

当需要显示大量数据时，可以使用 ListView.builder 来避免同时创建所有子控件的问题，这样只会在屏幕上显示当前可见区域内的子控件。

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('Item ${items[index]}'),
    );
  },
);
1
2
3
4
5
6
7
8

GridView

GridView 是另一种常用的可滚动列表组件，它将子控件排列成网格布局。

GridView(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    mainAxisSpacing: 10.0,
    crossAxisSpacing: 10.0,
    childAspectRatio: 1.0,
  ),
  children: <Widget>[
    Container(color: Colors.red),
    Container(color: Colors.green),
    Container(color: Colors.blue),
    Container(color: Colors.yellow),
  ],
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14

与 ListView 一样，当需要显示大量数据时，可以使用 GridView.builder 来避免同时创建所有子控件的问题。

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    mainAxisSpacing: 10.0,
    crossAxisSpacing: 10.0,
    childAspectRatio: 1.0,
  ),
  itemCount: items.length,
  itemBuilder: (context, index) {
    return Container(color: items[index]);
  },
);
1
2
3
4
5
6
7
8
9
10
11
12

SingleChildScrollView

SingleChildScrollView 是一个可滚动的视图，它只能包含单个子控件。

SingleChildScrollView(
  child: Column(
    children: <Widget>[
      Container(height: 100, color: Colors.red),
      Container(height: 100, color: Colors.green),
      Container(height: 100, color: Colors.blue),
      Container(height: 100, color: Colors.yellow),
    ],
  ),
);
1
2
3
4
5
6
7
8
9
10

与 ListView 不同，SingleChildScrollView 不会自动回收不可见区域的子控件。因此，应该尽可能减少子控件的数量，并将其放到层次结构较浅的位置。

CustomScrollView

CustomScrollView 是自定义滚动模型的可滚动视图，可以同时包含多种滚动模型，如 ListView、GridView 和 SliverAppBar 等。

CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(
      title: Text('Title'),
      expandedHeight: 200,
      flexibleSpace: FlexibleSpaceBar(
        background: Image.network(
          'https://picsum.photos/200/300',
          fit: BoxFit.cover,
        ),
      ),
    ),
    SliverFixedExtentList(
      itemExtent: 50,
      delegate: SliverChildBuilderDelegate(
        (context, index) {
          return ListTile(title: Text('Item $index'));
        },
        childCount: 20,
      ),
    ),
  ],
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

优化

使用更轻量级的滚动组件

SingleChildScrollView 比 ListView 更轻松，因为它只有一个子控件。如果列表较短，可以考虑使用 SingleChildScrollView。

使用 ListView.builder 或 GridView.builder

当需要显示大量数据时，使用 ListView.builder 或 GridView.builder 可以避免同时创建所有子控件的问题，仅在屏幕上显示当前可见区域内的子控件。

优化子控件的构建过程

对于静态的子控件，可以使用 const 构造函数创建。对于动态的子控件，可以将部分子控件放到 Stateful 组件中管理，或使用 StatefulBuilder 在需要更新的子树中包装子控件。

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return StatefulBuilder(
      builder: (context, setState) {
        return ListTile(
          title: Text('Item ${items[index]}'),
          trailing: IconButton(
            icon: Icon(Icons.favorite),
            color: isFavorite(index) ? Colors.red : null,
            onPressed: () {
              setState(() {
                setFavorite(index, !isFavorite(index));
              });
            },
          ),
        );
      },
    );
  },
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

避免在滚动时频繁进行重绘

使用 AutomaticKeepAliveClientMixin 可以避免不必要的重绘，将需要保持状态的子控件放到 Stateful 组件中，并在组件中实现 wantKeepAlive 和 build 方法即可。

class MyListItem extends StatefulWidget {
  final int index;

  const MyListItem({Key? key, required this.index}) : super(key: key);

  @override
  _MyListItemState createState() => _MyListItemState();
}

class _MyListItemState extends State<MyListItem>
    with AutomaticKeepAliveClientMixin {
  bool _isFavorite = false;

  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return ListTile(
      title: Text('Item ${widget.index}'),
      trailing: IconButton(
        icon: Icon(Icons.favorite),
        color: _isFavorite ? Colors.red : null,
        onPressed: () {
          setState(() {
            _isFavorite = !_isFavorite;
          });
        },
      ),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

合理使用 ScrollController 和 NotificationListener

使用 ScrollController 可以监听滚动事件，及时释放资源和加载数据。使用 NotificationListener 可以监听滚动事件并执行自定义操作。

class MyListView extends StatefulWidget {
  @override
  _MyListViewState createState() => _MyListViewState();
}

class _MyListViewState extends State<MyListView> {
  final _controller = ScrollController();

  bool get _isScrolledToBottom {
    return _controller.offset >= _controller.position.maxScrollExtent &&
        !_controller.position.outOfRange;
  }

  @override
  Widget build(BuildContext context) {
    return NotificationListener<ScrollNotification>(
      onNotification: (notification) {
        if (notification is ScrollEndNotification && _isScrolledToBottom) {
          loadMoreData();
        }
        return false;
      },
      child: ListView.builder(
        controller: _controller,
        itemCount: items.length,
        itemBuilder: (context, index) {
          return MyListItem(index: index);
        },
      ),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32