颤振转换- UICollectionViewDiffableDataSource

Question

我试图把我现有的iOS应用程序转换成颤振。

在iOS中，我使用UICollectionViewDiffableDataSource查看这样的结构：

struct ClassItem: Hashable{
 let year: String
 let students: [StudentItem]
}

let BiologyClass = [
 ClassItem(year: "2021", students: [
  StudentItem(name: "Michael Pearson", favColor: "blue"),
  StudentItem(name: "Pearson Michael", favColor: "green")
 ]),
 ClassItem(year: "2020", students: [
  StudentItem(name: "Steve Pearson", favColor: "blue"),
  StudentItem(name: "Steve Michael", favColor: "green"),
  StudentItem(name: "Pearson Steve", favColor: "red")
 ]),

看起来是这样的：

iosView

在颤栗中，我尝试使用ExpansionPanel：

  Widget build(BuildContext context) {
    return ExpansionPanelList(
            children: [
              ExpansionPanel(
                headerBuilder: (context, isExpanded) {
                  return ListTile(
                    title: Text(
                      '2021',
                      style: TextStyle(color: Colors.black),
                    ),
                  );
                },
                body: Column(
                  children: [
                    ListTile(
                      title: Text('Description text',
                          style: TextStyle(color: Colors.black)),
                    ),
                    ListTile(
                      title: Text('Description text2',
                          style: TextStyle(color: Colors.black)),
                    ),
                  ],
                ),
                isExpanded: _expanded,
                canTapOnHeader: true,
              ),
            ],
            dividerColor: Colors.grey,
            expansionCallback: (panelIndex, isExpanded) {
              _expanded = !_expanded;
              setState(() {});
            },
      
    ); 

所以问题是，如何能够在ExpansionPanel中创建一个可变数量的瓷砖。或者更好的是，如何在iOS env中使用iOS来构建类似的东西。目前，我将不得不手工创建所有的瓷砖，这在最终版本中是不可行的。颤振目前如下所示：

FlutterView

谢谢。

编辑:有一个错误“找到重复的钥匙”。下面的图像显示调试窗口。我不知道为什么条目会翻一番。

​

EDIT2:明白了，在CustomExpansionTile中有一行注释！

Answer 1

输出：

​

​

创建类似于Swift结构和数据源的数据模型，如BiologyClass：

class ClassItem {
  ClassItem({this.isExpanded: false, this.year, this.students});

  bool isExpanded;
  final String year;
  final List<StudentItem> students;
}

class StudentItem {
  StudentItem({this.name, this.favColor});

  final String name;
  final String favColor;
}

现在您可以迭代这些项并使用动态数据填充ExpansionPanelList：

class _MyHomePageState extends State<MyHomePage> {
  List<ClassItem> _items = <ClassItem>[
    ClassItem(year: "2021", students: [
      StudentItem(favColor: "blue", name: "Michael Pearson"),
      StudentItem(favColor: "green", name: "Pearson Michael")
    ]),
    ClassItem(year: "2020", students: [
      StudentItem(favColor: "blue", name: "Steve Pearson"),
      StudentItem(favColor: "green", name: "Steve Michael"),
      StudentItem(favColor: "red", name: "Pearson Steve")
    ]),
  ];

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        ExpansionPanelList(
          expansionCallback: (int index, bool isExpanded) {
            setState(() {
              _items[index].isExpanded = !_items[index].isExpanded;
            });
          },
          children: _items.map((ClassItem item) {
            return ExpansionPanel(
              headerBuilder: (BuildContext context, bool isExpanded) {
                return Text(item.year);
              },
              isExpanded: item.isExpanded,
              body: Column(children: [
                ...item.students.map((StudentItem student) {
                  return GestureDetector(
                    onTap: () {
                      print(student.name);
                    },
                    child: Container(child: Padding(padding: const EdgeInsets.all(8.0), child: Text(student.name))),
                  );
                }).toList(),
              ]),
            );
          }).toList(),
        )
      ],
    );
  }
}