Question

要在点击时更改图标的颜色。默认情况下，如果项目已被收藏，则图标为红色，而其他图标为默认颜色。

如果用户点击“图标”将其设置为“收藏”或“不收藏”，我想在更新后更改颜色。

new ListTile(
    trailing: InkWell(
      child: Icon(Icons.share),
    ),
    leading: InkWell(
        onTap: () {
          snapshot.data[index].isFavorite == 0
              ? makeFavorite(snapshot.data[index].id)
              : makeUnfavorite(
              snapshot.data[index].id);
        },
        child: snapshot.data[index].isFavorite == 1
            ? Icon(
          Icons.favorite,
          color: Colors.red,
        )
            : Icon(Icons.favorite)),
    title: new Text(snapshot.data[index].body,
        style: new TextStyle(
            fontWeight: FontWeight.bold, fontSize: 14.0)),
),

Answer 1

创建一个Statefull小部件以更改其状态

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Title'),
      ),
      body: new ListView.builder(itemBuilder: (context, index) {
        return new ListItem();
      }),
    );
  }

class ListItem extends StatefulWidget {
    @override
    State<StatefulWidget> createState() => new _ItemView();
  }
  class _ItemView extends State<ListItem>{
    bool isFavorite = false;
    @override
    Widget build(BuildContext context) {
      return new ListTile(
        trailing: InkWell(
          child: Icon(Icons.share),
        ),
        leading: InkWell(
            onTap: () {
              isFavorite = !isFavorite;
              setState(() {
              });
            },
            child: isFavorite ? Icon(
              Icons.favorite,
              color: Colors.red,
            ): Icon(Icons.favorite)),
        title: new Text('Your Text',
            style: new TextStyle(
                fontWeight: FontWeight.bold, fontSize: 14.0)),
      );
    }
  }

Answer 2

在onTap函数中使用setState并在其中分配颜色。

Answer 3

通过这种方式解决了该问题（更新的代码）

列表图块的代码

new ListTile(
                        trailing: InkWell(
                          child: Icon(Icons.share),
                        ),
                        leading: InkWell(
                            onTap: () {
                              snapshot.data[index].isFavorite == 0
                                  ? makeFavorite(
                                      snapshot.data[index].id, index)
                                  : makeUnfavorite(
                                      snapshot.data[index].id, index);
                            },
                            child: (indexes[index] == 1)
                                ? Icon(
                                    Icons.favorite,
                                    color: Colors.red,
                                  )
                                : Icon(Icons.favorite)),
                        title: new Text(snapshot.data[index].body,
                            style: new TextStyle(
                                fontWeight: FontWeight.bold, fontSize: 14.0)),
                      ),

更改状态的功能

 makeFavorite(int id, int index) {
    // operations to be performed
    // end of operations to be performed
    setState(() {
      indexes[index] = 1;
    });
  }

在onTap（Flutter ListItem）中执行函数后如何更改图标的颜色

3 个答案: