Flutter 将单选按钮逻辑应用于选择芯片答案

【问题标题】：Flutter apply radio button logic to choicechipFlutter 将单选按钮逻辑应用于选择芯片
【发布时间】：2021-07-10 16:01:50
【问题描述】：

我试图制作单选选择芯片，但它不能正常工作。这是我的芯片：

class ChipWidget extends StatefulWidget {
  const ChipWidget({Key key, this.label, this.listIndex}) : super(key: key);

  final String label;
  final int listIndex;

  @override
  _ChipWidgetState createState() => _ChipWidgetState();
}

class _ChipWidgetState extends State<ChipWidget> {
  int selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return ChoiceChip(
      label: Text(widget.label),
      selected: selectedIndex == widget.listIndex,
      selectedColor: Colors.red,
      onSelected: (value) {
        setState(() {
          selectedIndex = value ? widget.listIndex : null;
        });
        print("Selected: " + selectedIndex.toString());
      },
    );
  }
}

我打电话来的，

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key key}) : super(key: key);

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  List<String> _chipItems;

  @override
  void initState() {
    super.initState();
    _chipItems = ["Terleme", "Aşırı Düşünme", "Baş Ağrısı", "Mide Bulantısı"];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: MediaQuery.of(context).size.height,
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Center(
            child: Wrap(
              children: _chipItems
                  .asMap()
                  .map((key, value) => MapEntry(
                      key,
                      ChipWidget(
                        label: value,
                        listIndex: key,
                      )))
                  .values
                  .toList(),
            ),
          ),
        ),
      ),
    );
  }
}

当我点击一个芯片时，它被选中。但是当我选择一个新的时，旧的仍然被选中。我不想多选。我一次只想要一个。我需要在我的代码中更改什么？谢谢。

【问题讨论】：

标签： flutter widget

【解决方案1】：

我已经改变了方法，使用下面的代码来实现你正在寻找的东西

芯片小部件

class ChipWidget extends StatelessWidget {
  const ChipWidget({this.label, this.isSelected = false, this.onSelected});

  final String label;
  final bool isSelected;
  final Function onSelected;

    @override
    Widget build(BuildContext context) {
      return ChoiceChip(
       label: Text(label),
       selected: isSelected,
       selectedColor: Colors.red,
       onSelected: onSelected,
  );
 }
}

主屏幕

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key key}) : super(key: key);

 @override
_HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
 List<String> _chipItems;
 int selectedPos;

  @override
  void initState() {
  super.initState();
  _chipItems = ["Terleme", "Aşırı Düşünme", "Baş Ağrısı", "Mide Bulantısı"];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
       body: Container(
       height: MediaQuery.of(context).size.height,
       child: Padding(
        padding: const EdgeInsets.all(8.0),
         child: Center(
           child: Wrap(
           children: _chipItems
              .asMap()
              .map((key, value) => MapEntry(
                  key,
                  ChipWidget(
                    label: value,
                    isSelected: key == selectedPos,
                    onSelected: (isSelected) {
                      setState(() {
                        selectedPos = key;
                      });

                      print('Selected: $selectedPos');
                    },
                  )))
              .values
              .toList(),
          ),
        ),
      ),
    ),
   );
  }
 }

【讨论】：