如何仅在调用 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

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

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

Answer 2

您的代码有效。

您只需要将 "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 3

你可以用 GestureDetector 包裹你的 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,
            ),
          ),
        ),
      ),
    );
  }
}

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

Answer 4

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

CupertinoButton(
  pressedOpacity: 0.4,
  ...

默认的 pressedOpacity 值是 0.1，这是相当低的。我发现 0.4 比原生 iOS 看起来更自然。

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

How to change CupertinoButton background color only when onPressed is called

dart

flutter

flutter-cupertino