Flutter 如何在单击时更改单个按钮的颜色

我不熟悉颤振/飞镖，也不太熟悉面向对象编程

我有一个带有两个蓝色按钮的简单屏幕，当用户单击其中一个按钮时，该按钮应变为绿色，然而，当单击其中一个按钮时，两个按钮均变为绿色

如何修复代码，使单击的按钮只更改颜色

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {

  Color _buttonColor = Colors.blue;

  @override
  Widget build(BuildContext context) {

    return Scaffold(
        backgroundColor: Colors.grey[400],
        body: SafeArea(
          child: Center(
            child: Container(
              child: Column(
                children: <Widget>[

                  RaisedButton(
                    color: _buttonColor,
                    onPressed: () {
                      setState(() {
                       _buttonColor = Colors.green;
                      });
                    },
                  ),

                  RaisedButton(
                    color: _buttonColor,
                    onPressed: () {
                      setState(() {
                        _buttonColor = Colors.green;
                      });
                    },
                  )

                ],
              ),
            )
          ),
        )
    );
  }
}

导入“包装：颤振/材料.省道”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
home:home（），
);
}
}
类Home扩展了StatefulWidget{
@凌驾
_HomeState createState（）=>\u HomeState（）；
}
类(HomeState扩展状态){
颜色_按钮颜色=Colors.blue；
@凌驾
小部件构建（构建上下文）{
返回脚手架(
背景颜色：颜色。灰色[400]，
正文：安全区(
儿童：中心(
子：容器(
子：列(
儿童：[
升起的按钮(
颜色：_按钮颜色，
已按下：（）{
设置状态（）{
_按钮颜色=Colors.green；
});
},
),
升起的按钮(
颜色：_按钮颜色，
已按下：（）{
设置状态（）{
_按钮颜色=Colors.green；
});
},
)
],
),
)
),
)
);
}
}

每个按钮颜色都需要一个变量：

变量

Color _buttonColor1 = Colors.blue;
Color _buttonColor2 = Colors.red;

RaisedButton(
  color: _buttonColor1,
  onPressed: () {
    setState(() {
      _buttonColor1 = Colors.green;
    });
  },
),

RaisedButton(
  color: _buttonColor2,
  onPressed: () {
    setState(() {
      _buttonColor2 = Colors.orange;
    });
  },
)

小部件

Color _buttonColor1 = Colors.blue;
Color _buttonColor2 = Colors.red;

RaisedButton(
  color: _buttonColor1,
  onPressed: () {
    setState(() {
      _buttonColor1 = Colors.green;
    });
  },
),

RaisedButton(
  color: _buttonColor2,
  onPressed: () {
    setState(() {
      _buttonColor2 = Colors.orange;
    });
  },
)

---

这是因为两个按钮都是从同一个变量_buttonColor获取颜色属性。您应该使用单独的变量。

您有

Color\u按钮Color=Colors.blue

告诉两个小部件使用

\u按钮颜色

设置颜色。您可以将两个

RaisedButtons

的颜色属性设置为指向同一变量

color:\u buttonColor

在

setState（）

我建议使用两个顶级变量，如
\u buttonColor1
和
\u buttonColor2
。并在一个
RaisedButton
小部件中使用一个变量，在第二个
RaisedButton
小部件中使用第二个变量。有意义吗？
如果答案解决了您的问题，请记住将其标记为正确。也许我错了，但修改后的变量不应该用于按钮控件的颜色声明吗？否则，颜色会保持原样吗？你完全正确。在复制粘贴原始代码之后，我忘记了更新这些变量。我现在已经更新了。谢谢，谢谢你的回答。我可以问一下，如果我有26个按钮，26个不同的变量是否仍然是最好的编码方式？如果视图中按钮的顺序没有改变，您可以在列表中拥有颜色，并根据颜色列表[0]、颜色列表[12]、颜色列表[25]的顺序在每个底部访问它们。然后在设置状态上更改颜色时使用相同的设置。