Flutter：Select 单项使用 Radio

Question

我有一个小部件需要 select 使用 Radio as 动态地显示单个项目。我已经创建了如下小部件：

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 来自 ListView.builder 上的 itemBuilder 的 index。当我运行代码时，它看起来像 this.

那么如何让我的Radio只有select一个单品呢？

Answer 1

将'groupValue: number'更改为

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

并显示 Trouble with flutter radio button

Answer 2

也许你可以这样写，在循环外声明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'),
    );
  }
}

Flutter：Select 单项使用 Radio

Flutter: Select single item in using Radio

radio

flutter