flutter - 如何仅在调用 onPressed 时更改 CupertinoButton 背景颜色

Question

我尝试过以下代码，但只有在按下按钮时它才会改变按钮的颜色。

//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');
  },
),

Answer 1

如果您只想调整突出显示按钮颜色的不透明度，可以更改pressedOpacity属性：

CupertinoButton(
  pressedOpacity: 0.4,
  ...

默认pressedOpacity值为0.1，非常低。我发现0.4原生 iOS 的外观更自然。

Answer 2

你可以CupertinoButton用GestureDetector. 比使用onTapDownandonTapCancel仅在按下时更改颜色。像这样：

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,
            ),
          ),
        ),
      ),
    );
  }
}

现在您可以在 GestureDetector 上使用 onTap 事件来调用导航或任何您需要的东西。

Answer 3

您的代码有效。

您只需将“bgColor”放在构建函数之外，这样当调用 setState 时，它​​就不会再次将其设置回 Purple。

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

Answer 4

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

编辑：如果您想永久更改按钮的颜色，@sina-seirafi 的答案是正确的。但是，如果您只想让按钮变为黑色，那么您按下带有黑色初始颜色的 RawMaterialButton 是最好的解决方案。