Flutter 单击“谢谢”时，如何阻止所有构建按钮更改其状态

单击按钮时，按钮将变为灰色。这种情况会发生，但问题是当按下一个按钮时，所有按钮都会变成灰色，这是我不想要的。我一次只想要一个

var pressed = false;
  Widget BuildButton(
    String buttonText,
  ) {
    MainAxisAlignment.spaceEvenly;
    return new Expanded(
        child: new FlatButton(
            shape: new RoundedRectangleBorder(
                borderRadius: new BorderRadius.circular(
                  15.0,
                ),
                side: BorderSide(color: Colors.black)),
            color: pressed ? Colors.grey : Colors.white, // colour change when clicked
            textColor: Colors.black,
            padding: EdgeInsets.all(6.0),
            child: new Text(buttonText),
            onPressed: () {
              setState(() {
                pressed = !pressed;
              });
            }));

          Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              new Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [ // buttons start here
                    BuildButton("XXS"),
                    BuildButton("XS"),
                    BuildButton("S"),
                    BuildButton("M"),
                  ]),



                  ]),

var pressed=false；
小部件构建按钮(
字符串按钮文本，
) {
MainAxisAlignment.space；
返回新的扩展(
孩子：新的扁平按钮(
形状：新的RoundedRectangleBorder(
borderRadius:新的borderRadius.circular(
15.0,
),
边：边框边（颜色：Colors.black）），
颜色：按下？颜色。灰色：颜色。白色，//单击时颜色改变
textColor:Colors.black，
填充：所有边缘设置（6.0），
子项：新文本（buttonText），
已按下：（）{
设置状态（）{
按下=！按下；
});
}));
纵队(
mainAxisAlignment:mainAxisAlignment.spaceBetween，
儿童：[
新行(
mainAxisAlignment:mainAxisAlignment.spaceBetween，
子项：[//按钮从这里开始
BuildButton（“XXS”），
BuildButton（“XS”），
BuildButton（“S”），
BuildButton（“M”），
]),
]),

问题在于，您在所有变量中使用的是pressed变量，因此当您更改pressed value的值时，所有按钮都会更改其颜色

您可以创建一个列表，其中包含每个按钮的按下值

List<bool> pressed = [false, false, false, false];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            new Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                BuildButton("XXS", 0),
                BuildButton("XS", 1),
                BuildButton("S", 2),
                BuildButton("M", 3),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget BuildButton(String buttonText, int index) {
    return new Expanded(
      child: new FlatButton(
        shape: new RoundedRectangleBorder(
            borderRadius: new BorderRadius.circular(
              15.0,
            ),
            side: BorderSide(color: Colors.black)),
        color: pressed[index]
            ? Colors.grey
            : Colors.white, // colour change when clicked
        textColor: Colors.black,
        padding: EdgeInsets.all(6.0),
        child: new Text(buttonText),
        onPressed: () {
          setState(() {
            pressed[index] = !pressed[index];
          });
        },
      ),
    );
  }

Map<String, bool> pressed = {};
Widget BuildButton(
String buttonText,
) {
    return new Expanded(
        child: new FlatButton(
            color: pressed['buttonText] == true ? Colors.grey : Colors.white, // colour change when clicked
            textColor: Colors.black,
            padding: EdgeInsets.all(6.0),
            child: new Text(buttonText),
            onPressed: () {
              setState(() {
                pressed['buttonText'] = !(pressed['buttonText'] ?? false);
              });
            },
          ),
      );
}

按下列表=[false，false，false，false]； @凌驾 小部件构建（构建上下文）{ 返回脚手架( 主体：容器( 子：列( mainAxisAlignment:mainAxisAlignment.spaceBetween， 儿童：[ 新行( mainAxisAlignment:mainAxisAlignment.spaceBetween， 儿童：[ BuildButton（“XXS”，0）， BuildButton（“XS”，1）， 构建按钮（“S”，2）， BuildButton（“M”，3）， ], ), ], ), ), ); } 小部件BuildButton（字符串buttonText，int索引）{ 返回新的扩展( 孩子：新的扁平按钮( 形状：新的RoundedRectangleBorder( borderRadius:新的borderRadius.circular( 15.0, ), 边：边框边（颜色：Colors.black））， 颜色：按下[索引] ？颜色：灰色 ：Colors.white，//单击时颜色更改 textColor:Colors.black， 填充：所有边缘设置（6.0）， 子项：新文本（buttonText）， 已按下：（）{ 设置状态（）{ 按下[索引]=！按下[索引]； }); }, ), ); }

---

您需要每个按钮的不同“按下”状态的地图

List<bool> pressed = [false, false, false, false];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            new Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                BuildButton("XXS", 0),
                BuildButton("XS", 1),
                BuildButton("S", 2),
                BuildButton("M", 3),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget BuildButton(String buttonText, int index) {
    return new Expanded(
      child: new FlatButton(
        shape: new RoundedRectangleBorder(
            borderRadius: new BorderRadius.circular(
              15.0,
            ),
            side: BorderSide(color: Colors.black)),
        color: pressed[index]
            ? Colors.grey
            : Colors.white, // colour change when clicked
        textColor: Colors.black,
        padding: EdgeInsets.all(6.0),
        child: new Text(buttonText),
        onPressed: () {
          setState(() {
            pressed[index] = !pressed[index];
          });
        },
      ),
    );
  }

Map<String, bool> pressed = {};
Widget BuildButton(
String buttonText,
) {
    return new Expanded(
        child: new FlatButton(
            color: pressed['buttonText] == true ? Colors.grey : Colors.white, // colour change when clicked
            textColor: Colors.black,
            padding: EdgeInsets.all(6.0),
            child: new Text(buttonText),
            onPressed: () {
              setState(() {
                pressed['buttonText'] = !(pressed['buttonText'] ?? false);
              });
            },
          ),
      );
}

Map按下={}；
小部件构建按钮(
字符串按钮文本，
) {
返回新的扩展(
孩子：新的扁平按钮(
颜色：按下['buttonText]==true？颜色。灰色：颜色。白色，//单击时颜色会改变
textColor:Colors.black，
填充：所有边缘设置（6.0），
子项：新文本（buttonText），
已按下：（）{
设置状态（）{
按下['buttonText']=！（按下['buttonText']？错误）；
});
},
),
);
}

我建议将您的

BuildButton

功能移动到自己的

StatefulWidget

中，这样每次创建新按钮时，按钮都负责管理自己的状态

我还将

扩展的

小部件从新的

构建按钮

小部件中移出，以使其更易于重用。

扩展的

小部件只能在

行

和

列

中使用。现在，您的按钮可以在任何地方使用

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Home(),
    ),
  );
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        new Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            BuildButton("XXS"),
            BuildButton("XS"),
            BuildButton("S"),
            BuildButton("M"),
          ].map((item) => Expanded(child: item)).toList(),
        ),
      ],
    );
  }
}

class BuildButton extends StatefulWidget {
  final String buttonText;

  const BuildButton(this.buttonText);

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

class _BuildButtonState extends State<BuildButton> {
  bool pressed = false;

  @override
  Widget build(BuildContext context) {
    return FlatButton(
      onPressed: () => setState(() => pressed = !pressed),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15.0),
        side: BorderSide(color: Colors.black),
      ),
      color: pressed ? Colors.grey : Colors.white, // colour change when clicked
      textColor: Colors.black,
      padding: EdgeInsets.all(6.0),
      child: Text(widget.buttonText),
    );
  }
}

导入“包装：颤振/材料.省道”；
void main（）{
runApp(
材料聚丙烯(
debugShowCheckedModeBanner:false，
home:home（），
),
);
}
类Home扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回列(
mainAxisAlignment:mainAxisAlignment.spaceBetween，
儿童：[
新行(
mainAxisAlignment:mainAxisAlignment.spaceBetween，
儿童：[
BuildButton（“XXS”），
BuildButton（“XS”），
BuildButton（“S”），
BuildButton（“M”），
].map（（项）=>已展开（子项））.toList（），
),
],
);
}
}
类BuildButton扩展StatefulWidget{
最后一个字符串buttonText；
const BuildButton（this.buttonText）；
@凌驾
_BuildButtonState createState（）=>\u BuildButtonState（）；
}
类_BuildButtonState扩展状态{
bool PRESHED=false；
@凌驾
小部件构建（构建上下文）{
返回按钮(
onPressed:（）=>setState（（）=>pressed=！pressed），
形状：圆形矩形边框(
边界半径：边界半径。圆形（15.0），
边：边框边（颜色：颜色。黑色），
),
颜色：按下？颜色。灰色：颜色。白色，//单击时颜色改变
textColor:Colors.black，
填充：所有边缘设置（6.0），
子：文本（widget.buttonText），
);
}
}

专业提示

---

使用尾随逗号让dart格式化程序帮助您保持代码可读性。

上传

BuildButton

widget@developer的代码谢谢这项工作，但问题是构建按钮之后的所有内容现在都消失了。我修复了错误，但我想知道是否有办法根据先前的ious按钮单击如果这有助于您，请接受它作为已接受的答案。