Flutter中如何通过按钮点击正确重置RatingBar评分

你当前的写法存在两个核心问题：

• 提前将RatingBar实例缓存为State的成员属性，手动调用onRatingUpdate(0.0)只会触发你定义的回调打印逻辑，不会修改RatingBar组件内部维护的选中状态
• 没有给RatingBar传入可动态变更的初始评分值，setState触发重建时，缓存的RatingBar实例不会同步更新UI展示的评分

不要提前缓存RatingBar实例，在State中单独维护一个评分状态变量，构建RatingBar时将这个变量绑定到initialRating参数上，重置时直接修改这个状态变量即可。
修正后的可运行代码如下：

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  // 单独维护当前评分状态，初始值设为0
  double _currentRating = 0.0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // 直接在build方法中构建RatingBar，不要缓存为成员变量
        RatingBar.builder(
          initialRating: _currentRating, // 绑定状态变量
          itemBuilder: (context, _) => const Icon(
            Icons.star,
            color: Colors.amber,
          ),
          onRatingUpdate: (rating) {
            // 用户手动评分时同步更新状态变量
            setState(() {
              _currentRating = rating;
            });
            print(rating);
          },
        ),
        ElevatedButton(
          onPressed: () {
            // 重置时直接修改状态变量为0，触发UI重建
            setState(() {
              _currentRating = 0.0;
            });
          },
          child: const Text('Reset'),
        )
      ],
    );
  }
}

如果修改后仍存在状态缓存问题，可以给RatingBar追加ValueKey(_currentRating)参数，强制在评分变化时重建组件，避免内部状态缓存导致UI不更新。

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