flutter - 如何在颤动中实现从组按钮中仅选择一个按钮

Question

我添加了一张我计划实施的图片。这是一个组按钮，您一次只能选择一个选项。我使用了一个名为“group_button”的包，但它允许一次进行多项选择，这不是我想要的。

推荐一种替代方法来实现这一点。

我计划实施的图片

Answer 1

2022 年 2 月 18 日更新

他们在4.4.0 版本中删除了旧的构造函数 GroupButton.radio 和 GroupButton.checkbox并且仍然没有更新文档。

正确的解决方案是设置to的isRadio属性。GroupButtontrue

GroupButton(
    isRadio: true,
    onSelected: (index, isSelected) => print('$index button is selected'),
    buttons: ["12:00", "13:00", "14:30", "18:00", "19:00", "21:40"],
)

老答案：

从未使用过该软件包，但通过查看他们的 pub.dev 页面，我可以看到以下内容。

现在您可以使用更简单的构造函数来构建您的按钮组。具有单个值选择的组示例：

GroupButton.radio(
  buttons: ['12:00', '13:00', '14:00'],
  onSelected: (i) => debugPrint('Button $i selected'),
)

链接：https ://pub.dev/packages/group_button#cant-easier-to-use

Answer 2

一个完整的工作示例：

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

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

class _TState extends State<T> {
  List<bool> isCardEnabled = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('T'),
      ),
      body: GridView.builder(
        padding: const EdgeInsets.all(15),
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              childAspectRatio: 3,
              crossAxisSpacing: 10,
              mainAxisSpacing: 10
          ),
          itemCount: 4,
          itemBuilder: (BuildContext context, int index){
            isCardEnabled.add(false);
            return GestureDetector(
                onTap: (){
                  isCardEnabled.replaceRange(0, isCardEnabled.length, [for(int i = 0; i < isCardEnabled.length; i++)false]);
                  isCardEnabled[index]=true;
                  setState(() {});
                },
                child: SizedBox(
                  height: 40,
                  width: 90,
                  child: Card(
                    color: isCardEnabled[index]?Colors.cyan:Colors.grey.shade200,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(8)
                    ),
                    child: Center(
                      child: Text('Ability Tag',
                        style: TextStyle(
                            color: isCardEnabled[index]?Colors.white:Colors.grey,
                          fontSize: 18
                        ),
                      ),
                    ),
                  ),
                )
            );
          }),
    );
  }
}