Flutter性能优化：解决ListView内嵌含大量DropdownMenuItem的DropdownButton滚动卡顿问题

这个卡顿问题的核心原因很明确：你每个列表项里的DropdownButton都提前创建了1000个DropdownMenuItem实例——哪怕用户根本没点击展开下拉框，这些Widget也会被全部构建并占用内存。5个列表项就意味着5000个额外的Widget，滚动时Flutter要处理这么多Widget的布局和绘制，不卡才怪！

下面给你两个针对性的解决方案，从根源上解决性能问题：

方案1：复用全局DropdownMenuItem列表 #

最直接的优化是只创建一次1000个MenuItem的列表，让所有列表项共享这个列表，避免重复生成大量Widget。这样不管有多少个列表项，内存里只会存在1000个MenuItem实例，大幅降低内存占用和重复构建的开销。

修改后的代码示例：

class MyList extends StatelessWidget {
  final List<Item> items; // 你的5个条目数据
  // 全局只初始化一次DropdownMenuItem列表！
  final List<DropdownMenuItem<int>> quantityItems = List<int>.generate(1000, (i) => i)
      .map((e) => DropdownMenuItem<int>(
            value: e,
            child: Text(e.toString()),
          ))
      .toList();

  MyList({required this.items, super.key});

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) {
        // 把全局列表传给每个列表项
        return MyItem(quantityItems: quantityItems);
      },
    );
  }
}

class MyItem extends StatelessWidget {
  final List<DropdownMenuItem<int>> quantityItems;
  // 用const构造函数帮助Flutter缓存Widget实例
  const MyItem({required this.quantityItems, super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 300,
      height: 300,
      child: DropdownButton<int>(
        value: 1, // 这里绑定你的选中值（建议用状态管理或父组件传值）
        items: quantityItems, // 直接复用全局列表，不再重复生成
        onChanged: (value) {
          // 处理选中逻辑
        },
      ),
    );
  }
}

方案2：用PopupMenuButton替代DropdownButton（懒加载项） #

如果1000个MenuItem的内存占用还是让你担心，可以改用PopupMenuButton——它的itemBuilder是懒加载的：只有当用户点击弹出菜单时，才会生成对应的MenuItem，平时每个列表项里的PopupMenuButton只是一个轻量的按钮，不会提前创建任何MenuItem，彻底解决内存过载问题。

修改后的代码示例：

class MyItem extends StatelessWidget {
  final int selectedValue; // 当前选中的值（从父组件传入）
  final Function(int) onValueChanged; // 选中值变化的回调

  const MyItem({required this.selectedValue, required this.onValueChanged, super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 300,
      height: 300,
      child: PopupMenuButton<int>(
        initialValue: selectedValue,
        // 自定义按钮显示样式，和DropdownButton的选中效果一致
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text('当前选中：$selectedValue'),
              const Icon(Icons.arrow_drop_down),
            ],
          ),
        ),
        // 只有弹出菜单时才会执行这个builder，按需生成MenuItem
        itemBuilder: (context) {
          return List<int>.generate(1000, (i) => i).map((e) {
            return PopupMenuItem<int>(
              value: e,
              child: Text(e.toString()),
            );
          }).toList();
          // 还可以进一步优化：比如只显示选中值附近的20个选项，或者添加搜索框缩小范围
        },
        onSelected: (value) {
          onValueChanged(value);
        },
      ),
    );
  }
}

额外优化小技巧 #

• 避免在build方法里做任何计算（比如map.toList()），所有需要提前准备的数据都在build方法外初始化完成；
• 如果使用StatelessWidget，尽量用const构造函数，帮助Flutter缓存Widget实例，减少滚动时的重建开销；
• 用--release模式测试性能，profile模式虽然能排查问题，但性能表现和正式发布版本有差异。

内容的提问来源于stack exchange，提问作者Mena