Flutter 分段 GridView - 标题/类别/组

Question

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

Android 有用于RecyclerView的SimpleSectionedListAdapter。

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

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

那么是否还有另一种有利于性能的方法呢？

---

Answer 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,
    );
  }
}

演示