按下后如何立即更改图标颜色? [英] how to change icon color immediately after pressed in flutter?

问题描述

我想在按下图标后更改其颜色，但是以下代码似乎无效.

I would like to change the color of an icon after pressing it, but it seems the following code doesn't work.

  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);
 } 

当前，如果我按该图标，则其颜色不会改变，我必须返回其父级，然后重新输入. 我想知道如何立即更改其颜色，谢谢.

Currently, if I press the icon, its color will not change, I have to go back to its parent, then re-enter. I am wondering how to change its color immediately, Thanks.

更新:

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

推荐答案

您需要使用setState()函数.无论您在何处更新变量值.

You need to use setState() function. Wherever you are updating your variable values.

例如，我想将_newVar值更新为newValue，并且应该将其更新到视图中，而不是编写

For example, I want to update my _newVar value to newValue and this should be updated into the view then instead of writing

_newVar = newValue;

应为:

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

这篇关于按下后如何立即更改图标颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！