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

单击之前：

点击后：

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

1 个答案: