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

Question

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

推荐实现此目的的替代方法。

Picture of what I plan to implement

Answer 1

更新于 18.02.2022

They removed old constructor GroupButton.radio and GroupButton.checkbox in version 4.4.0 仍然没有更新文档。

正确的解决方案是GroupButton的isRadio属性设置为true。

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'),
)

Link: 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
                        ),
                      ),
                    ),
                  ),
                )
            );
          }),
    );
  }
}

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

How can I implement selecting only one button from group buttons in flutter

button

flutter

group

一个完整的例子：