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包裹GestureDetector。仅在按下时使用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 2

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

CupertinoButton(
  pressedOpacity: 0.4,
  ...

默认pressedOpacity值为0.1，该值非常低。我发现0.4对于本机iOS外观来说更自然。

Answer 3

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

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

Answer 4

您的代码有效。

您只需要将“ 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');
        },
      ),
    ),
  );
}

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

4 个答案: