我想要的逻辑是显示一个类别列表,当一个类别被选中时,它下面的类别就会被下推,选中的类别产品就会显示出来。
下面是我目前正在使用的最小代码:
class CategoryPage extends StatefulWidget {
const CategoryPage({Key key}) : super(key: key);
@override
State<CategoryPage> createState() => _CategoryPageState();
}
class _CategoryPageState extends State<CategoryPage> {
Category selectedCategory;
final List<Category> categories = [
Category(name: 'Breakfast', products: ['Cake', 'Sandwich']),
Category(name: 'Lunch', products: ['Chicken', 'Pizza']),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Minimal Example')),
body: ListView.builder(
itemCount: categories.length,
itemBuilder: (context, index) {
final category = categories[index];
return Column(
children: [
GestureDetector(
onTap: () {
setState(() {
selectedCategory = category;
});
},
child: Container(
padding: const EdgeInsets.symmetric(vertical: 10),
margin: const EdgeInsets.only(top: 10),
alignment: Alignment.center,
width: double.infinity,
decoration: BoxDecoration(
color: selectedCategory == category
? Colors.green
: Colors.grey,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Text(category.name),
Icon(
selectedCategory == category
? Icons.keyboard_arrow_up
: Icons.keyboard_arrow_down,
),
],
),
),
),
if (selectedCategory == category)
ListView.builder(
shrinkWrap: true,
itemCount: category.products.length,
itemBuilder: (context, index) {
final product = category.products[index];
return Text(product);
},
)
],
);
},
),
);
}
}
还有一张截图:第一节第一节第一节第一节第一次
现在我想做的是不要使用shrinkWrap
,因为这将消除使用ListView.builder()所带来的性能增益。
有什么办法能解决这个问题
2条答案
按热度按时间rdlzhqv91#
尝试CustomScrollView(sliver)。对于大量的数据,Sliver总是更好的选择,无论是对于少量的ListView。builder(shrinkWrap)都能很好地工作
w1jd8yoj2#
我不知道你创建的
Category
类,但是这将帮助你在DropdownFormField
的帮助下列出你的分类。您只需使用
onChange
处理选择。