Flutter含Radio/RadioListTile的ListView滚动卡顿缓慢问题求助

核心原因 #

Radio是带状态的组件，每个实例都会维护自身的选中状态，当列表条目数量较多时，频繁的Widget重建+状态管理开销会导致滚动卡顿；另外如果使用的是普通ListView而非懒加载构造器，会一次性渲染所有条目，进一步加重性能负担。

具体优化方案 #

• 改用ListView.builder：这是最关键的一步，builder模式采用懒加载，仅渲染当前可见区域的列表项，大幅减少初始渲染和滚动时的Widget创建数量。示例代码：

  ListView.builder(
    itemCount: questions.length,
    itemExtent: 120, // 提前指定条目高度，减少布局计算开销
    itemBuilder: (context, index) {
      return QuestionItem(
        question: questions[index],
        selectedOption: _selectedOptions[index],
        onChanged: (value) {
          setState(() {
            _selectedOptions[index] = value;
          });
        },
      );
    },
  )
  

• 统一管理选中状态：将每个题目的选中状态提升到父组件，不要让每个Radio单独维护状态。比如用一个数组_selectedOptions存储所有题目的选中值，Radio仅根据父组件传递的状态渲染，变成无状态Widget：

  class QuestionItem extends StatelessWidget {
    final Question question;
    final String? selectedOption;
    final ValueChanged<String?> onChanged;
  
    const QuestionItem({
      super.key,
      required this.question,
      required this.selectedOption,
      required this.onChanged,
    });
  
    @override
    Widget build(BuildContext context) {
      return Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(question.title),
          ...question.options.map((option) {
            return RadioListTile(
              title: Text(option),
              value: option,
              groupValue: selectedOption,
              onChanged: onChanged,
            );
          }).toList(),
        ],
      );
    }
  }
  

• 减少不必要的重建：如果条目需要保留状态（比如滚动回来后不想重新渲染），可以让QuestionItem混入AutomaticKeepAliveClientMixin，并返回true给wantKeepAlive，同时在build里调用super.build(context)：

  class QuestionItem extends StatefulWidget {
    // 保持参数不变
    const QuestionItem({super.key, ...});
  
    @override
    State<QuestionItem> createState() => _QuestionItemState();
  }
  
  class _QuestionItemState extends State<QuestionItem> with AutomaticKeepAliveClientMixin {
    @override
    bool get wantKeepAlive => true;
  
    @override
    Widget build(BuildContext context) {
      super.build(context); // 必须调用
      // 原build内容
    }
  }
  

• 优化样式复用：如果Radio有自定义样式，提前在父组件或全局定义好，不要在每个条目的build方法里重复创建样式对象，避免不必要的对象分配。

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