当列表中的按钮时，单击/按下后如何更改按钮背景颜色？ - 颤振

Question

我想使用按钮来过滤用户列表。所以我创建了一个按钮组。这个按钮组很像一个单选按钮组。它只接受一个值。用户按下按钮后，它应该改变背景颜色。但是当按钮在列表中时，我不知道如何在用户按下按钮后更改按钮颜色。

有人可以帮忙吗？例如，我想让用户知道他/她被按下了哪个年龄段。

这是我的代码。

class BottomPop extends StatefulWidget {
  _BottomPopState createState() => _BottomPopState();
}

class _BottomPopState extends State<BottomPop> {
  List<String> _a = ["0-20", "21-40", "41-60", "61+"];
  List<String> _b = ["< 1year", "1-2 years", "2-3 years", "3+ year"];

  @override
  Widget build(BuildContext context) {
    return
        new ListView(
      shrinkWrap: true,
      physics: ClampingScrollPhysics(),
      padding: EdgeInsets.all(10),
      children: [
        Text(
          "Age",
          style: TextStyle(fontSize: 18),
        ),
        Padding(
          padding: EdgeInsets.only(top: 10),
        ),
        GridView.count(
            shrinkWrap: true,
            physics: ClampingScrollPhysics(),
            mainAxisSpacing: 10,
            crossAxisSpacing: 10,
            childAspectRatio: 100 / 50,
            crossAxisCount: 4,
            children: _a
                .map(
                  (f) => InkWell(
                        child: Container(
                            decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(5),
                                border: Border.all(color: Color(0xffaaaaaa))),
                            padding: EdgeInsets.symmetric(
                                horizontal: 10, vertical: 5),
                            child: Center(
                              child: Text(f),
                            )),
                        onTap: () {},
                      ),
                )
                .toList()),
        Padding(
          padding: EdgeInsets.only(top: 20),
        ),
        Text(
          "Experiences",
          style: TextStyle(fontSize: 18),
        ),
        Padding(
          padding: EdgeInsets.only(top: 10),
        ),
        GridView.count(
            shrinkWrap: true,
            physics: ClampingScrollPhysics(),
            mainAxisSpacing: 10,
            crossAxisSpacing: 10,
            childAspectRatio: 100 / 50,
            crossAxisCount: 4,
            children: _b
                .map(
                  (f) => InkWell(
                        child: Container(
                            decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(5),
                                border: Border.all(color: Color(0xffaaaaaa))),
                            padding: EdgeInsets.symmetric(
                                horizontal: 10, vertical: 5),
                            child: Center(
                              child: Text(f),
                            )),
                        onTap: () {},
                      ),
                )
                .toList()),
        Padding(
          padding: EdgeInsets.only(top: 20),
        ),
        Row(
          children: [
            FlatButton(
              color: Colors.lightBlue,
              child: Text("Filter"),
              onPressed: () {},
            ),
            Padding(
              padding: EdgeInsets.only(right: 10),
            ),
            FlatButton(
              color: Colors.red,
              child: Text("Clear"),
              onPressed: () {},
            ),
          ],
        )
      ],
    );
  }
}

这是一个屏幕截图。

Answer 1

已编辑答案：

创建一个类来存储bool 和String：

class MyButtonModal {
  final String buttonText;
  bool changeButtonColor;

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

  List<MyButtonModal> _a = [
    MyButtonModal(buttonText: "0-20"),
    MyButtonModal(buttonText: "21-40"),
    MyButtonModal(buttonText: "41-60"),
    MyButtonModal(buttonText: "61+"),
  ];
  List<MyButtonModal> _b = [
    MyButtonModal(buttonText: "< 1year"),
    MyButtonModal(buttonText: "1-2 years"),
    MyButtonModal(buttonText: "2-3 years"),
    MyButtonModal(buttonText: "3+ year"),
  ];

并用这些第一个替换您的GridView.count：

                  GridView.count(
                      shrinkWrap: true,
                      physics: ClampingScrollPhysics(),
                      mainAxisSpacing: 10,
                      crossAxisSpacing: 10,
                      childAspectRatio: 100 / 50,
                      crossAxisCount: 4,
                      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))),
                              padding: EdgeInsets.symmetric(
                                  horizontal: 10, vertical: 5),
                              child: Center(
                                child: Text(f.buttonText),
                              )),
                          onTap: () {
                            setState(() {
                              f.changeButtonColor = !f.changeButtonColor;
                            });
                          },
                        );
                      }).toList())

第二个：

                  GridView.count(
                      shrinkWrap: true,
                      physics: ClampingScrollPhysics(),
                      mainAxisSpacing: 10,
                      crossAxisSpacing: 10,
                      childAspectRatio: 100 / 50,
                      crossAxisCount: 4,
                      children: _b
                          .map(
                            (MyButtonModal f) => InkWell(
                                  child: Container(
                                      decoration: BoxDecoration(
                                          color: f.changeButtonColor
                                              ? Colors.blue
                                              : Colors.white,
                                          borderRadius:
                                              BorderRadius.circular(5),
                                          border: Border.all(
                                              color: Color(0xffaaaaaa))),
                                      padding: EdgeInsets.symmetric(
                                          horizontal: 10, vertical: 5),
                                      child: Center(
                                        child: Text(f.buttonText),
                                      )),
                                  onTap: () {
                                    setState(() {
                                      f.changeButtonColor =
                                          !f.changeButtonColor;
                                    });
                                  },
                                ),
                          )
                          .toList())

第一个答案：

您可以像这样更改按钮颜色： 在你的类中声明一个布尔值：

bool changeColor = false;

                  FlatButton(
                    color: changeColor ? Colors.blue: Colors.white,
                    onPressed: (){
                      setState(() {
                        changeColor = !changeColor;
                      });
                    }, child: Text('Button Basic'),
                  )

点击前：

点击后：