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

【问题标题】：How to change CupertinoButton background color only when onPressed is called如何仅在调用 onPressed 时更改 CupertinoButton 背景颜色
【发布时间】：2019-11-06 11:44:53
【问题描述】：

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

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

【问题讨论】：

您想在 onPressed 后永久更改颜色吗？还是仅在按下时？
@GaboBrandX 仅在按下时

标签： flutter dart flutter-cupertino

【解决方案1】：

如果只想调整高亮按钮颜色的不透明度，可以更改pressedOpacity属性：

CupertinoButton(
  pressedOpacity: 0.4,
  ...

pressedOpacity 的默认值是0.1，这是相当低的。我发现0.4 更适合原生 iOS 外观。

【讨论】：

【解决方案2】：

您可以用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 事件来调用导航或您需要的任何内容。

【讨论】：

我已经将它包裹在 GestureDetector 上，现在 onTapCancel 可以工作，但 onTapDown 不行！我还应该包装 ButtonTheme 吗？
@AminMemariani 抱歉，我已经从答案中删除了 ButtonTheme，因为它不需要。关于 onTapDown 事件，您正在使用 deepPurpleAccent 初始化颜色变量。所以你应该设置颜色 onTapCancel 和黑色 onTapDown。
@AminMemariani 请查看我的最新更新。还添加了最终结果。那应该工作！ :)
谢谢它帮助很大

【解决方案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');
        },
      ),
    ),
  );
}

【讨论】：

【解决方案4】：

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

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

【讨论】：