使用Listview.builder的RadioButton

ListView.builder 是 Flutter 框架中用于高效构建列表视图的一个功能。它允许你按需创建列表项，而不是一次性创建整个列表，这对于性能优化非常有帮助，尤其是在列表项数量庞大时。

基础概念

ListView.builder: 一个用于构建列表视图的 Widget，它只构建屏幕上可见的部分，其余部分会在滚动到屏幕内时动态构建。
RadioButton: 一个用于表示单选按钮的 Widget，用户可以在多个选项中选择一个。

类型

单选按钮组: 使用 RadioListTile 或 Row 和 RadioButton 组合来创建单选按钮组。

应用场景

适用于需要展示大量数据列表，并且每个列表项包含单选按钮的场景，例如设置页面中的选项选择。

示例代码

以下是一个使用 ListView.builder 和 RadioButton 的简单示例：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('ListView with RadioButton')),
        body: RadioButtonList(),
      ),
    );
  }
}

class RadioButtonList extends StatefulWidget {
  @override
  _RadioButtonListState createState() => _RadioButtonListState();
}

class _RadioButtonListState extends State<RadioButtonList> {
  int _selectedValue = 0;

  final List<String> options = ['Option 1', 'Option 2', 'Option 3'];

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: options.length,
      itemBuilder: (context, index) {
        return RadioListTile(
          title: Text(options[index]),
          value: index,
          groupValue: _selectedValue,
          onChanged: (value) {
            setState(() {
              _selectedValue = value;
            });
          },
        );
      },
    );
  }
}

遇到的问题及解决方法

问题：RadioButton 状态不一致

原因: 当列表滚动时，Flutter 会复用列表项的 Widget，如果没有正确管理状态，可能会导致 RadioButton 的选中状态不一致。

解决方法: 使用 ValueKey 来确保每个 RadioButton 有唯一的状态标识，或者在 onChanged 回调中更新整个列表的状态。

RadioListTile(
  key: ValueKey(index),
  title: Text(options[index]),
  value: index,
  groupValue: _selectedValue,
  onChanged: (value) {
    setState(() {
      _selectedValue = value;
    });
  },
)