Question

我正在使用ListView.builder（）中的单选按钮，但是当我选择任何一个单选按钮时，它将选择每个单选按钮，而不是选择一个。

我的代码如下：

ListView.builder(
                    itemCount: 67,
                    itemBuilder: (BuildContext context, int index) {
                      return _buildCheckListItems(index);
                    }),


Widget _buildCheckListItems(int index) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Text(
          'Seat Belts',
          style: TextStyle(fontSize: 17),
        ),
        Container(
          width: 200,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Radio(
                value: 1,
                groupValue: selectedRadio,
                activeColor: Colors.green,
                onChanged: (val) {
                  changeValue(val);
                },
              ),
              Radio(
                value: 2,
                groupValue: selectedRadio,
                activeColor: Colors.green,
                onChanged: (val) {
                  changeValue(val);
                },
              )
            ],
          ),
        ),
      ],
    );
  }


changeValue(int val) {
    setState(() {
      selectedRadio = val;
    });
  }

以上代码的输出结果如下：

Output result

Answer 1

此处的关键点是您使用的是相同的groupValue: selectedRadio,每个单选按钮组必须具有不同的groupValue，否则它将共享相同的更改。

如果您不想为每个单选按钮组指定名称，则可以创建一个新的.dart文件：

import 'package:flutter/material.dart';

class buildCheckListItems extends StatefulWidget {
  final int index;
  buildCheckListItems(this.index); //I don't know what is this index for but I will put it in anyway
  @override
  _buildCheckListItemsState createState() => _buildCheckListItemsState();
}

class _buildCheckListItemsState extends State<buildCheckListItems> {
  int selectedRadio = -1;

  changeValue(int val) {
    setState(() {
      selectedRadio = val;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        ...
      ],
    );
  }
}

现在一切正常。

关于ListView.builder（）抖动中的单选按钮

1 个答案: