如何在Flutter应用中实现可持久保持状态的收藏标记图标功能

问题原因 #

你的代码目前存在三个核心问题导致收藏状态跳转页面后重置：

1. FavoriteButton的isFavorite属性被写死为固定值true，没有用可变状态变量存储实际收藏状态
2. valueChanged回调为空实现，点击按钮后没有同步更新当前状态
3. 未做持久化/全局状态管理，页面销毁重建后状态会丢失

解决方法 #

1. 基础实现（页面切换不销毁时状态保持） #

先在State类中定义状态变量存储收藏状态，同步绑定到按钮组件，点击时更新状态：

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

class _p1State extends State<p1> {
  // 存储收藏状态，初始false对应未收藏（白色图标）
  bool _isFavorite = 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.center,
              child: Text(' Hello world   ',
                style: TextStyle(
                  fontSize: 35.0,
                  color: Colors.white,
                  fontFamily: "Explora",
                  fontWeight: FontWeight.w900
                )
              )
            ),
            Align(
              alignment: Alignment.bottomLeft,
              child: const Text('   1 ',
                style: TextStyle(
                  fontSize: 25.0,
                  fontFamily: "MonteCarlo",
                  color: Colors.white,
                  fontWeight: FontWeight.w900
                ),
              ),
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: FavoriteButton(
                // 绑定动态状态变量，不要写死固定值
                isFavorite: _isFavorite,
                iconSize: 40,
                iconDisabledColor: Colors.red,
                iconColor: Colors.white,
                valueChanged: (newValue) {
                  // 点击后更新状态触发UI重绘
                  setState(() {
                    _isFavorite = newValue;
                  });
                },
              )
            )
          ]
        )
      ),
    );
  }
}

2. 进阶实现（APP重启/页面销毁重建后状态仍保留） #

如果需要永久保存收藏状态，可使用shared_preferences做本地持久化存储，操作如下：

1. 在pubspec.yaml中添加shared_preferences依赖
2. 页面初始化时读取本地存储的收藏状态
3. 点击更新状态时同步写入本地存储
   对应核心代码示例：

@override
void initState() {
  super.initState();
  // 进入页面时读取已保存的收藏状态
  _loadFavoriteStatus();
}

// 读取本地存储的收藏状态
Future<void> _loadFavoriteStatus() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  setState(() {
    // 可按不同名言ID设置不同key，区分多条内容的收藏状态
    _isFavorite = prefs.getBool('quote_1_favorite') ?? false;
  });
}

// 修改valueChanged回调，更新状态同时写入本地
valueChanged: (newValue) async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  setState(() {
    _isFavorite = newValue;
  });
  await prefs.setBool('quote_1_favorite', newValue);
},

3. 多页面同步状态 #

如果多个页面需要展示同一条名言的收藏状态，可使用全局状态管理方案（如Provider、Riverpod）将收藏状态存储在全局层级，所有页面统一读取全局状态即可实现多端同步。

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