Flutter：使用 Radio 选择单个项目答案

【问题标题】：Flutter: Select single item in using RadioFlutter：使用 Radio 选择单个项目
【发布时间】：2020-09-27 16:56:11
【问题描述】：

我有一个小部件需要使用 Radio 动态选择单个项目。我已经创建了如下所示的小部件：

int number;
return Container(
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Radio(
              value: index,
              groupValue: number,
              activeColor: Color(0xFFE91E63),
              onChanged: (int val) {
                setState(() {
                  number = val;
                  print('Show the Resumes $number');
                });
              },
            ),
            Text(
              'Show',
            ),
          ],
        ),
      );

我在ListView.builder 中循环上面的小部件。而value 中的index 来自index 来自itemBuilder 上ListView.builder。当我运行代码时，它看起来像this。

那么如何让我的 Radio 只选择一个项目呢？

【问题讨论】：

标签： flutter radio

【解决方案1】：

也许你可以这样写，在循环外声明value和groupValue（builder in ListView）。并在构造函数中创建value、groupValue 和onChanged。结果类似于this。

...

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List<int> _numbers = List<int>.generate(5, (index) => index);
  int _groupNumber;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemBuilder: (BuildContext context, int index) {
          return HomeContent(
            value: _numbers[index],
            groupValue: _groupNumber,
            onChanged: (int value) {
              setState(() {
                _groupNumber = value;
              });
            },
          );
        },
        itemCount: _numbers.length,
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  final int value;
  final int groupValue;
  final ValueChanged<int> onChanged;

  const HomeContent({
    Key key,
    this.value,
    this.groupValue,
    this.onChanged,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return RadioListTile<int>(
      value: this.value,
      groupValue: this.groupValue,
      onChanged: this.onChanged,
      title: Text('Value $value On Group $groupValue'),
    );
  }
}

【讨论】：

【解决方案2】：

将 'groupValue: number' 更改为

final var _groupValue = -1;
return Container(
    ...
    groupValue: _groupValue,
    ...
);

并显示Trouble with flutter radio button

【讨论】：