Flutter:滚动每个包含 1k 个选择的 DropdownButtons 列表太慢

Question

我有一个使用 ListView.builder 显示的项目列表(5-6 项)。 每个项目都包含一个 DropdownButton 小部件，用户可以从 1 - 1000 中选择一个数字，因此包含 1000 个 DropdownMenuItems。

我按如下所示实现了它，但问题是向下滚动 ListView 太慢而且卡顿。即使 listView 有 5 或 6 个项目，但请注意，每个项目都有一个包含 1000 个 DropdownMenuItems 的嵌入式 DropdownButton。

有解决办法吗？或者其他方式来实现我的要求？

注意:即使我将 DropdownMenuItems 的数量减少到 100，在向下滚动 ListView 时它仍然会卡顿。

class List extends StatelessWidget {
   final List<Item> // Contains 5 items.
   final List<int> quantityList = List<int>.generate(1000, (int i) => i);
 //--
   child: ListView.builder(
                  itemBuilder: (buildContext, i) {
                    return MyItem(
                      quantityList,
                    );
                  },
                  itemCount: items.length(),
                )

---

class MyItem extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        child: DropdownButton<int>(
          items: quantityList
              .map(
                (int e) =>
                DropdownMenuItem<int>(
                  value: e,
                  child: Text(e.toString()),
                ),
          )
              .toList(),
        ),
      ),
    );
  }

编辑

我将 MyItem 类更改为如下所示，但仍然存在同样的问题。

尝试使用 ListView 和 ListView.custom 而不是 ListView.builder，根据 this 构建整个列表提前而不是延迟 , 但仍然是同样的问题。

我还尝试使用 --profile 运行该应用程序配置模拟发布版本。性能更好，但仍然存在严重的卡顿和滞后问题。在模拟器和物理设备上测试。

 class MyItem extends StatelessWidget {
      List<DropDownMenuItem> quantityList; // contains 1k 
      @override
      Widget build(BuildContext context) {
        return Container(
            width:300,
            height:300,
            child: DropdownButton<int>(
              items: quantityList, 
            ),
          ),
        );
      }

Answer 1

ListView 将在小部件进入和离开 View 时创建和销毁它们。您的 MyItem 小部件是一个非常重的小部件(有很多东西要创建和销毁)。

您可能不想要每个 MyItem成为Scaffold() .通常你只有 1 个 Scaffold() 可见，因为它是应用程序的奇特 Root View 。它有一个应用程序栏、 snackbar 、抽屉等。试试只用你的 Container(...)目前在 body: 下作为您的 MyItem.build() 的返回.

在items:在 DropdownButton 中，当 DropdownButton 滚动进出 View 时，您可以构建和销毁项目列表。如果此列表对于列表中的每个小部件都相同，就像上面的测试代码一样，请创建一个 List<Widget>[]包含您的 DropdownMenuItem 小部件并将其传递给您的 MyItem()小部件。像这样的东西:

//In your widget with the ListView
List<Widget> myItems;

//In the initState() of your widget with the ListView
...
myItems = quantitySelection.map(
   (int e) => DropdownMenuItem<int>(
      value: e,
      child: Text(e.toString()),
    ),
).toList(),
...


//In your ListView.builder()
return MyItem(
  ...  
  items: myItems,
  ...
);

//In your MyItem.build() ->  DropdownButton()
...
DropDownButton(
   items: items
),
...

FWIW - 我们有一个包含复杂子项的 ListView，我们用 10,000 个项目对其进行了测试。 Flutter 中的调试版本和发布版本在性能上存在显着差异。它在调试版本中有点卡顿，但在发布版本中非常流畅。