如何在flutter中不使用shrinkwrap的情况下提高列表视图的性能?

2sbarzqh  于 2023-02-20  发布在  Flutter
关注(0)|答案(2)|浏览(182)

我想要的逻辑是显示一个类别列表,当一个类别被选中时,它下面的类别就会被下推,选中的类别产品就会显示出来。
下面是我目前正在使用的最小代码:

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()所带来的性能增益。
有什么办法能解决这个问题

rdlzhqv9

rdlzhqv91#

尝试CustomScrollView(sliver)。对于大量的数据,Sliver总是更好的选择,无论是对于少量的ListView。builder(shrinkWrap)都能很好地工作

w1jd8yoj

w1jd8yoj2#

我不知道你创建的Category类,但是这将帮助你在DropdownFormField的帮助下列出你的分类。
您只需使用onChange处理选择。

@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 DropdownButtonFormField(
              hint: Text(category.name),
              items: category.products
                  .map<DropdownMenuItem<String>>(
                      (categoryitem) => DropdownMenuItem<String>(
                            value: categoryitem,
                            child: Text(categoryitem),
                          ))
                  .toList(),
              onChanged: (value) {
                // selections to manage
              });
        },
      ),
    );
  }

相关问题