Flutter - 如何在点击时切换 RaisedButton 的颜色？

Posted 2023-02-23

【中文标题】Flutter - 如何在点击时切换 RaisedButton 的颜色？

【英文标题】：Flutter - How do I toggle the color of a RaisedButton upon click?

【发布时间】：2018-11-24 14:19:41

【问题描述】：

我正在尝试切换凸起按钮的颜色。最初按钮应该是蓝色的，当它被按下时它会变成灰色。现在我有一个名为 pressAttention 的布尔值，它被设置为 false。我正在使用它来最初将其设置为 false。当按下按钮时，它会切换 pressAttention bool，但似乎小部件永远不会再次更新。

new RaisedButton(
                  child: new Text("Attention"),
                  textColor: Colors.white,
                  shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0)),
                  color: pressAttention?Colors.grey:Colors.blue,
                  onPressed: () => doSomething("Attention"),
                )

void doSomething(String buttonName)
if(buttonName == "Attention")
  if(pressAttention = false)
    pressAttention = true;
   else 
    pressAttention = false;
  

【问题讨论】：

你在调用 setState 吗？

我不这么认为，我对颤振和飞镖还很陌生。

Flutter 只会在你告诉它发生变化时重绘东西，这样做的一种方法是使用 setState。我建议你看看网站上的教程，例如flutter.io/tutorials/interactive

【参考方案1】：

这个按钮需要在State和StatefulWidget的build中创建，并且State必须有一个成员变量bool pressAttention = false;。正如 Edman 所建议的，您需要在 setState 回调中进行状态更改，以便 Widget 重绘。

new RaisedButton(
  child: new Text('Attention'),
  textColor: Colors.white,
  shape: new RoundedRectangleBorder(
    borderRadius: new BorderRadius.circular(30.0),
  ),
  color: pressAttention ? Colors.grey : Colors.blue,
  onPressed: () => setState(() => pressAttention = !pressAttention),
);

【参考方案2】：

如果您希望按钮更改按下状态的颜色，您只需要使用 RaisedButton 中的“highlightColor”属性

       RaisedButton(
          onPressed: () ,
          child: Text("Test"),
          highlightColor: YOUR_PRESSED_COLOR, //Replace with actual colors
          color: IDLE_STATE_COLOR,
        ),

【参考方案3】：

或者你可以使用 rxdart：

import 'package:rxdart/rxdart.dart';

...

bool presssedFavorite = false;
final _pressAttention = BehaviorSubject<bool>();
Observable<bool> get coursesStream => _pressAttention.stream;

...

StreamBuilder(stream: _pressAttention,
builder: (BuildContext context, AsyncSnapshot<bool> snapshot) 
if (snapshot.hasData)
  presssedFavorite = snapshot.data;

  return RawMaterialButton(
      onPressed: ()
        _addToFavorites(context);
      ,
      child: Padding(
        padding: EdgeInsets.all(5),
        child: Icon(
          presssedFavorite ? Icons.favorite : Icons.favorite_border,
          color: Colors.red,
          size: 17,
        ),
      ),
    );
  ,
),

void _addToFavorites(BuildContext context) async
  //my code...
  _pressAttention.sink.add(!presssedFavorite);

它更复杂，但您也可以将此解决方案与 Web 服务、firestore、db 一起使用...您可以与 StatelessWidget 和 StatefulWidget 一起使用。