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

Question

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

Android有适用于RecyclerView的SimpleSectionedListAdapter。

在Flutter中，可以使用嵌套的ListView和GridView或CustomScrollView来实现此功能。

问题在于，第一种解决方案的性能不如后者，并且后者目前存在错误：https://github.com/flutter/flutter/issues/16125

那么是否有另一种偏向于性能的方法？

---

- aliep

---

我想要实现相同的布局。你在Flutter中设法实现了吗？ - Georgi Koemdzhiev

还需要这个。 - Wesley Barnes

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

演示

- Omatt