Flutter - 在 GroupedListView 和 GridView.builder 中使用列表

Question

我正在尝试基于列表的字符串组件“组”构建分组列表，同一列表“名称”中的另一个字符串组件必须显示在相应组下方的网格中。

代码：

import 'package:flutter/material.dart';
import 'package:simple_grouped_listview/simple_grouped_listview.dart';
import 'package:sticky_headers/sticky_headers.dart';

class CombineStickyGrid extends StatefulWidget {
  const CombineStickyGrid({super.key});

  @override
  State<CombineStickyGrid> createState() => _CombineStickyGridState();
}

class _CombineStickyGridState extends State<CombineStickyGrid> {
  final groupedData = [
    {'group': 'Team A', 'name': 'John'},
    {'group': 'Team B', 'name': 'Will'},
    {'group': 'Team C', 'name': 'Mike'},
    {'group': 'Team D', 'name': 'Wayne'},
    {'group': 'Team A', 'name': 'Beth'},
    {'group': 'Team B', 'name': 'Miranda'},
    {'group': 'Team D', 'name': 'Bert'},
    {'group': 'Team A', 'name': 'Fred'},
    {'group': 'Team A', 'name': 'Bob'},
    {'group': 'Team B', 'name': 'Xian'},
    {'group': 'Team C', 'name': 'Mi Ping'},
    {'group': 'Team D', 'name': 'Olaf'},
    {'group': 'Team A', 'name': 'Oscar'},
  ];

  @override
  Widget build(BuildContext context) {
    return GroupedListView<bool, int>(
      items: List<int>.generate(100, (index) => index + 1),
      customBuilder:
          (context, bool isEvenHeader, List<IndexedItem<int>> items) {
        return StickyHeader(
          header: Container(
            alignment: Alignment.topCenter,
            color: Colors.blue,
            padding: const EdgeInsets.all(16),
            child: Text(
              isEvenHeader ? 'Even' : 'Odd',
              style: const TextStyle(
                  color: Colors.white, fontWeight: FontWeight.bold),
            ),
          ),
          content: GridView.builder(
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 5),
            itemCount: items.length,
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(),
            itemBuilder: (context, int index) {
              return Container(
                color: Colors.white,
                padding: const EdgeInsets.all(8),
                child: Text(items[index].item.toRadixString(10),
                    textAlign: TextAlign.center),
              );
            },
          ),
        );
      },
      itemGrouper: (int i) => i.isEven,
      itemsCrossAxisAlignment: CrossAxisAlignment.center,
    );
  }
}

我尝试更改“项目”并使用 groupedData/groupedData['name']/groupedData['group'] 连接项目。我期望列表中的数据显示在分组的粘头列表中，名称位于下面的网格中。

Answer 1

问题解决了。

粘性标题中有一个解决方案。有关更多信息，请参阅并试用该包：https://github.com/letsar/flutter_sticky_header