flutter - Flutter 转换 - UICollectionViewDiffableDataSource
问题描述
我试图将我现有的 iOS 应用程序转换为 Flutter。
在 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")
]),
看起来像这样:
在 Flutter 中,我尝试使用 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 中创建可变数量的 Tiles。或者更好的是,如何在 iOS 环境中使用 UICollectionViewDiffableDataSource 构建类似所示的东西。目前,我必须手动创建所有图块,这在最终版本中是不可行的。Flutter 目前看起来是这样的:
谢谢。
编辑:有一个错误“找到重复的键”。下图显示了调试窗口。我不知道为什么条目是双倍的。
EDIT2:知道了,CustomExpansionTile 中有一行注释掉了!
解决方案
输出:
创建类似于 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(),
)
],
);
}
}
推荐阅读
- javascript - 为什么改变一个属性(对象)也会在不同的单独声明的属性中发生变化?
- php - 如何在 PHP 中强制下载 .xlsx 文件而不使其损坏?
- micronaut - 如何将 HTTP 客户端库写入 Micronaut 服务?
- sql - 如何将 Sysdate 转换为 Int?
- sql-server - 使用 dtsx 包运行功能导入 .mdb 文件 从 SQL Server 转换为 PostgreSQL
- excel - 有没有办法用范围单元格进行 VLOOKUP 包含在单元格值中
- javascript - saveToCameraRoll 不是函数
- python - 在为其他装饰器(例如夹具、模拟)传递参数时如何正确使用 pytest mark.parametrize 装饰器?
- javascript - 如何修复 Windows 终端中的“查找”命令
- r - 使用“dplyr”计算高效汉明距离