Flutter 如何仅在调用onPressed时更改CupertinoButton背景色

我已经尝试了以下代码，但它并没有改变按钮的颜色，只有当它被按下

//class attribute
Color bgColor = Colors.deepPurpleAccent;

//Widget
CupertinoButton(
  color: bgColor,
  child: Text('LOGIN', style: TextStyle(fontFamily: 'Roboto',)),
  borderRadius: const BorderRadius.all(Radius.circular(80.0)),
  onPressed: () {
  this.setState(() {
    bgColor = Colors.black;  
  });
  print(_emailValue);
  print(_passwordValue);
  Navigator.pushReplacementNamed(context, '/products');
  },
),

---

不幸的是，你无法做到这一点。
您可以扩展CupertinoButton并添加功能，或者使用RawMaterialButton并使其具有所需的外观

编辑：如果要永久更改按钮的颜色，@sina seirafi答案是正确的。但是，如果您希望按钮仅为黑色，则按带有黑色飞溅颜色的RawMaterialButton是最佳解决方案。

您的代码可以正常工作

您只需要将“bgColor”放在build函数之外，这样在调用setState时，它就不会再次将其设置回紫色

Color bgColor = Colors.deepPurpleAccent;

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: CupertinoButton(
        color: bgColor,
        child: Text(
          'LOGIN',
          style: TextStyle(
            fontFamily: 'Roboto',
          ),
        ),
        borderRadius: const BorderRadius.all(Radius.circular(80.0)),
        onPressed: () {
          this.setState(
            () {
              bgColor = Colors.black;
            },
          );

          // Navigator.pushReplacementNamed(context, '/products');
        },
      ),
    ),
  );
}

---

您可以使用

手势检测器

包装您的

CupertinoButton

。然后使用

onTapDown

和

onTapCancel

仅在按下时更改颜色。像这样：

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  Color _buttonColor = Colors.deepPurpleAccent;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Center(
          child: GestureDetector(
            onTap: () {
              print(_emailValue);
              print(_passwordValue);
              Navigator.pushReplacementNamed(context, '/products');
            },
            onTapDown: (tapDetails) {
              setState(() => _buttonColor = Colors.black);
            },
            onTapCancel: () {
              setState(() => _buttonColor = Colors.deepPurpleAccent);
            },
            child: CupertinoButton(
              color: _buttonColor,
              child: Text('test'),
              onPressed: () {},
              pressedOpacity: 1.0,
            ),
          ),
        ),
      ),
    );
  }
}

类主页扩展StatefulWidget{
@凌驾
_HomePageState createState（）=>\u HomePageState（）；
}
类_HomePageState扩展状态{
颜色_按钮颜色=颜色。深紫色；
@凌驾
小部件构建（构建上下文）{
返回脚手架(
主体：容器(
儿童：中心(
儿童：手势检测器(
onTap:（）{
打印（电子邮件值）；
打印（_passwordValue）；
pushReplacementNamed（上下文“/products”）；
},
onTapDown：（点击详情）{
设置状态（（）=>_按钮颜色=颜色。黑色）；
},
onTapCancel:（）{
设置状态（（）=>_按钮颜色=颜色。深紫色）；
},
孩子：丘比特纽顿(
颜色：_按钮颜色，
子项：文本（'test'），
按下：（）{}，
加压能力：1.0，
),
),
),
),
);
}
}

现在，您可以在GestureDetector上使用onTap事件来调用导航或任何您需要的内容

---

如果只想调整高亮显示按钮颜色的不透明度，可以更改

PressedCapacity

属性：

CupertinoButton(
  pressedOpacity: 0.4,
  ...

---

默认的

pressedCapacity

值为

0.1

，非常低。我发现

0.4

对于本机iOS外观来说更自然。

您想在按下后永久更改颜色吗？还是只在按下时？@gaborandx仅在按下时我已将其包裹在GestureDetector上现在onTapCancel起作用，但onTapDown不起作用！我是否也应该把纽扣主题包起来？@Amimemariani抱歉，我已经把纽扣主题从我的答案中删除了，因为它不需要。关于onTapDown事件，您正在使用DeepPurpleAcent初始化颜色变量。所以你应该将颜色设置为onTapCancel，黑色设置为onTapDown。@Amimemariani请检查我上次的更新。还添加了最终结果。这应该行得通！：）谢谢，帮了大忙