如何在Flutter中实现点击可变色的图标按钮（收藏功能）

核心通过StatefulWidget的状态更新能力实现UI动态变化，具体修改逻辑如下：

具体修改步骤 #

• 在_p1State类中新增布尔类型的状态变量，用来标记当前是否为收藏状态，默认设置为false
• 将Icon的color属性与状态变量绑定，收藏时显示红色，未收藏时显示白色
• 在onPressed回调中调用setState方法更新状态变量，同步完成Hive的收藏状态存储操作

修改后的完整代码 #

class p1 extends StatefulWidget {
  @override
  _p1State createState() => _p1State();
}

class _p1State extends State<p1> {
  // 收藏状态标识变量
  bool _isFavorited = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: <Widget>[
            Image(
              image: AssetImage("Image/Chowsun1.jpg"),
              fit: BoxFit.cover,
              width: double.infinity,
              height: double.infinity,
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: IconButton(
                icon: Icon(
                  Icons.favorite,
                  // 动态绑定颜色
                  color: _isFavorited ? Colors.red : Colors.white,
                ),
                onPressed: () {
                  // 更新状态触发UI重绘
                  setState(() {
                    _isFavorited = !_isFavorited;
                  });
                  // 原有Hive存储逻辑，可根据业务需求存储当前收藏状态
                  var favoritesBox = Hive.box(FAVORITES_BOX);
                  // 示例存储逻辑：favoritesBox.put(当前内容唯一id, _isFavorited);
                },
              ),
            )
          ],
        ),
      ),
    );
  }
}

补充说明 #

• 如果需要退出页面再进入仍然保留收藏状态，可在页面初始化时从Hive中读取存储的收藏状态赋值给_isFavorited，再调用setState更新UI即可
• 建议按照Dart开发规范将类名调整为大驼峰格式，例如把p1改为P1，提升代码可读性

内容的提问来源于stack exchange，提问作者Arefin