Flutter如何制作多级列表
Flutter中制作多级列表的方法:
- 创建一个包含多个层级的数据结构,例如:
class Category {
final String name;
final List<Category> subcategories;
Category({required this.name, required this.subcategories});
}
final List<Category> categories = [
Category(
name: 'Electronics',
subcategories: [
Category(name: 'Phones', subcategories: []),
Category(name: 'Computers', subcategories: [
Category(name: 'Laptops', subcategories: []),
Category(name: 'Desktops', subcategories: []),
]),
Category(name: 'TVs', subcategories: []),
],
),
Category(
name: 'Clothing',
subcategories: [
Category(name: 'Men', subcategories: []),
Category(name: 'Women', subcategories: []),
Category(name: 'Kids', subcategories: []),
],
),
Category(name: 'Books', subcategories: []),
];
- 创建一个Widget用于渲染每个层级的数据,例如:
class CategoryItem extends StatelessWidget {
final Category category;
const CategoryItem({Key? key, required this.category}) : super(key: key);
@override
Widget build(BuildContext context) {
return ExpansionTile(
title: Text(category.name),
children: category.subcategories
.map((subcategory) => CategoryItem(category: subcategory))
.toList(),
);
}
}
- 在Widget树中使用这个Widget来渲染多级列表:
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Categories')),
body: ListView.builder(
itemCount: categories.length,
itemBuilder: (context, index) {
return CategoryItem(category: categories[index]);
},
),
);
}
}
这样就可以创建一个多级列表了。每个层级都可以展开和折叠,同时也可以使用其他Widget来自定义每个层级的样式。
原文地址: https://www.cveoy.top/t/topic/bfAM 著作权归作者所有。请勿转载和采集!