Flutter Rive特定区域点击检测与星级评分返回值异常问题求助

核心问题 #

1. 全局点击监听无法识别Rive内部区域：你用外部GestureDetector包裹Rive动画，只能监听整个动画区域的点击，无法区分点击的是哪颗星星，自然无法触发对应评分的更新。
2. 混淆了Rive状态机的输入与输出：代码里把Rating当作输入（SMINumber）获取，但实际上这个Rive文件里的Rating是状态机的输出值，用来反馈当前选中的星级，不是接收外部输入的变量。
3. 未监听Rive内部交互事件：Rive动画里的每颗星星都有内置点击区域（Hit Area），需要让Rive自身处理点击事件，才能触发状态机更新评分值。

修复后的代码 #

SMINumber? _rating;

void _onRiveInit(Artboard artboard) {
  final controller = StateMachineController.fromArtboard(artboard, 'State Machine 1');
  if (controller == null) return;
  
  artboard.addController(controller);
  // 正确获取状态机的输出值
  _rating = controller.findOutput<double>('Rating') as SMINumber;
  
  // 监听评分变化，点击星星后自动打印最新分值
  _rating?.addListener(() {
    debugPrint("当前评分：${_rating!.value}");
  });
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      // 移除外部GestureDetector，让Rive自身处理内部点击交互
      child: RiveAnimation.network(
        'https://public.rive.app/community/runtime-files/3145-6649-star-rating.riv',
        fit: BoxFit.cover,
        onInit: _onRiveInit,
        // 显式开启Rive内置交互支持
        gestures: const {
          RiveGestureType.tap: true,
        },
      ),
    ),
  );
}

关键改动说明 #

• 替换findInput为findOutput：Rating是状态机输出的评分结果，不是用来设置的输入参数。
• 移除外部GestureDetector：让Rive自身处理内部点击区域的交互，点击不同星星时，状态机会自动更新Rating的值。
• 添加addListener监听评分变化：用户点击星星后，状态机更新Rating时会触发回调，此时就能获取到正确的1-5分值。

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