Flutter Sectioned GridView - 标题/类别/组答案

【问题标题】：Flutter Sectioned GridView - Header/Category/GroupFlutter Sectioned GridView - 标题/类别/组
【发布时间】：2019-09-03 23:23:26
【问题描述】：

https://gist.github.com/gabrielemariotti/e81e126227f8a4bb339c

Android 为 RecyclerView 提供 SimpleSectionedListAdapter。

这可以在 Flutter 中使用 Nested ListView 和 GridView 或 CustomScrollView 来实现。

问题在于，第一个解决方案的性能不如后一个解决方案，而后一个解决方案现在有问题：https://github.com/flutter/flutter/issues/16125

那么还有其他有利于性能的方法吗？

【问题讨论】：

我希望实现相同的布局。您是否设法在 Flutter 中实现了这一点？
也需要这个。

标签： performance listview gridview flutter customscrollview

【解决方案1】：

解决此问题的一种方法是使用 flutter_staggered_grid_view 插件来管理动态 GridView 项目。

这是一个您可以试用的示例。

import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatelessWidget(),
      ),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    int cursor = 1;
    int sectionCursor = 1;
    return StaggeredGridView.countBuilder(
      crossAxisCount: 4,
      itemCount: null,
      itemBuilder: (BuildContext context, int index) => Container(
          color: (index % 9 == 0) ? Colors.lightBlueAccent : Colors.white,
          child: Center(
            child: (index % 9 == 0) ? Text('Section ${sectionCursor++}') : Text('Sub item ${cursor++}'),
          )),
      staggeredTileBuilder: (int index) =>
          StaggeredTile.count((index % 9 == 0) ? 4 : 1, 1),
      mainAxisSpacing: 4.0,
      crossAxisSpacing: 4.0,
    );
  }
}

演示

【讨论】：