Android 如何从9个按钮中仅选择一个按钮？飞镖

正如你在这里看到的我的代码，我有9个按钮（从1到9），如果我点击其中一个，它们的颜色将变为蓝色，但在我的代码中，它有能力使所有按钮都变为蓝色，但我希望有一些改变，只有其中一个改变。例如，如果单击数字2，数字2将为蓝色，然后单击数字3，数字3将为蓝色，数字2将为白色（默认）。有什么帮助吗

class MyButtonModal {
  final String buttonText;
  bool changeButtonColor;

  MyButtonModal({this.buttonText, this.changeButtonColor = false});
}


GridView.count(
                      shrinkWrap: true,
                      physics: ClampingScrollPhysics(),
                      mainAxisSpacing: 10,
                      crossAxisSpacing: 10,
                      childAspectRatio: 80 / 95,
                      crossAxisCount: 12,
                      children: _a.map((MyButtonModal f) {
                        return InkWell(
                          child: Container(
                              decoration: BoxDecoration(
                                  color: f.changeButtonColor
                                      ? Colors.blue
                                      : Colors.white,
                                  borderRadius: BorderRadius.circular(5),
                                  border: Border.all(color: Color(0xffaaaaaa))),
                              child: Center(
                                child: Text(f.buttonText),
                              )),
                          onTap: () {
                            setState(() {
                              f.changeButtonColor = !f.changeButtonColor;
                            });
                          },
                        );
                      }).toList()),

---

您可以在

MyButtonModal

类中添加一个

index

字段，该字段将作为每个按钮的唯一键

初始化

StatefulWidget

中的

index

变量，并在单击按钮时将

index

变量更新为按钮的索引

现在要更改颜色，请检查if

f.index==index

如果为true，则将颜色更改为蓝色或白色

import 'package:flutter/material.dart';

class MyButtonModal {
  final String buttonText;
  // New field to uniquely identify a button
  final int index;

  MyButtonModal({this.buttonText, this.index});
}

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

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

class _HomePageState extends State<HomePage> {
  // This will create nine [MyButtonModel] with index from 0 to 8
  List<MyButtonModal> _a = List.generate(9,
      (index) => MyButtonModal(buttonText: "Button ${index + 1}", index: index));

  // Initialize index variable and set it to any value other than 0 to 8
  int index = 999;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: GridView.count(
          shrinkWrap: true,
          physics: ClampingScrollPhysics(),
          mainAxisSpacing: 10,
          crossAxisSpacing: 10,
          childAspectRatio: 80 / 95,
          crossAxisCount: 12,
          children: _a.map((MyButtonModal f) {
            return InkWell(
              child: Container(
                  decoration: BoxDecoration(
                      // Check if f.index == index
                      color: f.index == index ? Colors.blue : Colors.white,
                      borderRadius: BorderRadius.circular(5),
                      border: Border.all(color: Color(0xffaaaaaa))),
                  child: Center(
                    child: Text(f.buttonText),
                  )),
              onTap: () {
                // When button is tapped update index to the index of the button
                setState(() {
                  index = f.index;
                });
              },
            );
          }).toList(),
        ),
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
类MyButtonModal{
最后一个字符串buttonText；
//用于唯一标识按钮的新字段
最终整数指数；
MyButtonModel（{this.buttonText，this.index}）；
}
类主页扩展了StatefulWidget{
主页（{Key}）：超级（Key:Key）；
@凌驾
_HomePageState createState（）=>\u HomePageState（）；
}
类_HomePageState扩展状态{
//这将创建九个索引为0到8的[MyButtonModel]
List _a=List.generate（9，
（index）=>MyButtonModal（buttonText:“Button${index+1}”，index:index））；
//初始化索引变量并将其设置为0到8以外的任何值
int指数=999；
@凌驾
小部件构建（构建上下文）{
返回脚手架(
主体：容器(
子项：GridView.count(
收缩膜：对，
物理：ClampingScrollPhysics（），
平均间距：10，
横轴间距：10，
儿童方面：80/95，
交叉轴计数：12，
子项：_a.map（（MyButtonModel f）{
回墨槽(
子：容器(
装饰：盒子装饰(
//检查f.index==index
颜色：f.index==索引？颜色。蓝色：颜色。白色，
边界半径：边界半径。圆形（5），
边框：边框。全部（颜色：颜色（0xffaaaaaa）），
儿童：中心(
子项：文本（f.buttonText），
)),
onTap:（）{
//点击按钮时，将索引更新为按钮的索引
设置状态（）{
指数=f指数；
});
},
);
}).toList（），
),
),
);
}
}

---

如果您有任何疑问，请对此进行评论。

您是否尝试过使用

FilterChip

ref:将您的按钮设为单独的状态widgetindex是999，为什么？索引可以是0到8以外的任何数字，如果我们给索引0到8之间的任何数字，则其中一个按钮将已经是蓝色的初始工作状态完美谢谢