6

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

Android 有用于RecyclerView的SimpleSectionedListAdapter

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

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

那么还有另一种有利于性能的方法吗?


在此处输入图像描述

4

1 回答 1

0

解决此问题的一种方法是使用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,
    );
  }
}

演示

演示

于 2021-12-07T16:03:32.197 回答