【问题标题】:how to change icon color immediately after pressed in flutter?在颤动中按下后如何立即更改图标颜色?
【发布时间】:2025-12-23 10:30:10
【问题描述】:

我想在按下后更改图标的颜色,但是下面的代码似乎不起作用。

  void actionClickRow(String key) {
    Navigator.of(context).push(
      new MaterialPageRoute(builder: (context) {
        return new Scaffold(
            appBar: new AppBar(
              title: new Text(key),
              actions: <Widget>[
                new IconButton(
                  icon: new Icon(
                    Icons.favorite, 
                    color: isSaved(key)  ? Colors.red : null,  //<--- if key is already saved, then set it to red
                    ), 
                  onPressed: ()
                  {
                    setState(() //<--whenever icon is pressed, force redraw the widget
                    {
                      pressFavorite(key);
                    });                    
                  }
                ),
              ],
            ),
            backgroundColor: Colors.teal,
            body: _showContent(key));
      }),
    );
  }


 void pressFavorite(String key)
  {
    if (isSaved(key))
      saved_.remove(key);
    else
      saved_.add(key);
  }

 bool isSaved(String key) {
    return saved_.contains(key);
 } 

目前,如果我按下图标,它的颜色不会改变,我必须回到它的父级,然后重新输入。 我想知道如何立即改变它的颜色,谢谢。

更新:

class MainPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new MainPageState();
  }
}


class MainPageState extends State<MainPage> {
      bool _alreadySaved;

      void actionRowLevel2(String key) {
        _alreadySaved = isSaved(key);
        Navigator.of(context).push(
          new MaterialPageRoute(builder: (context) {
            return new Scaffold(
                appBar: new AppBar(
                  title: new Text(key),
                  actions: <Widget>[
                    new IconButton(
                      icon: new Icon(
                        _alreadySaved ? Icons.favorite : Icons.favorite_border,
                        color:  _alreadySaved ? Colors.red : null,
                        ), 
                      onPressed: ()
                      {
                        setState(()
                        {
                          pressFavorite(key);
                          _alreadySaved = isSaved(key); //<--update alreadSaved
                        });                    
                      }
                    ),
                  ],
                ),
                backgroundColor: Colors.teal,
                body: _showScript(key));
          }),
        );
      }

【问题讨论】:

  • 你确定你有扩展 statefulwidget 吗?
  • @ArnoldParge 是的,MainPage 扩展了 StatefulWidget

标签: flutter


【解决方案1】:

您可以简单地为每种颜色设置一个条件:

color:(isPressed) ? Color(0xff007397)
                        : Color(0xff9A9A9A))

在 onPressed 函数中:

 onPressed: ()
                      {
                        setState(()
                        {
                          isPressed= true;
                        });                    
                      }

【讨论】:

    【解决方案2】:

    您需要使用 setState() 函数。无论您在哪里更新变量值。

    例如,我想将我的 _newVar 值更新为 newValue,然后应该将其更新到视图中,而不是写入

    _newVar = newValue;
    

    应该是:

    setState(() {
     _newVar = newValue;
    });
    

    【讨论】:

    • 我确实在 onPressed 中调用了 setState()。你知道为什么它不起作用吗?
    • 如果您在此处提供最新代码将会很有帮助。在上述代码中,您没有为颜色分配新值。
    • 我更新了代码,你可以看到我在setState函数中更新了_alreadySaved。但它也不起作用
    • 嗨@camino。供您参考,我在 github 上创建了一个示例应用程序。你只需要拉它并运行它。这有用于更改 Press 上颜色的示例代码。 github.com/manishkumar-dsi/awesome_flutter
    • 非常感谢您的帮助和宝贵的时间!!
    最近更新 更多