如何在Flutter运行时实现Rive可自定义角色的服装切换

针对你遇到的「无法同时播放主动画和切换服装」的问题，下面是三个可行的落地方案：

方案1：状态机分层并行运行 #

这是最直接的解决方式，把主动画和服装控制逻辑拆分到不同的状态机层，让两者同时运行：

• 在Rive编辑器中，打开角色Artboard的「Layers」面板，添加两个独立的状态机层：
  • 第一层放主「anim」动画的状态机（负责角色的基础动作）
  • 第二层放服装切换的状态机（负责控制各服装的不透明度显示/隐藏）
• 确保所有服装的骨骼绑定和主角色的骨骼完全匹配，这样服装会跟随主动画同步运动
• 在Flutter中，给Artboard同时添加两个状态机控制器，分别控制主动画和服装切换：

  // 初始化两个控制器
  late StateMachineController _mainAnimController;
  late StateMachineController _clothingController;
  
  @override
  void initState() {
    super.initState();
    // 加载Artboard（假设已提前加载）
    final artboard = riveFile.mainArtboard.instance();
    
    // 绑定主动画状态机
    _mainAnimController = StateMachineController.fromArtboard(artboard, 'MainAnimState')!;
    artboard.addController(_mainAnimController);
    
    // 绑定服装切换状态机
    _clothingController = StateMachineController.fromArtboard(artboard, 'ClothingSwitcher')!;
    artboard.addController(_clothingController);
  }
  

• 通过服装状态机的输入参数切换服装：

  void switchClothing(int clothingId) {
    final input = _clothingController.findInput('clothing_id') as SMINumber;
    input.value = clothingId.toDouble();
  }
  

方案2：主状态机内置服装控制逻辑 #

不用单独做服装切换的状态机，直接在主动画状态机里添加服装不透明度的控制输入：

• 在Rive中，选中每套服装的不透明度属性，右键添加「Number Input」，命名为clothing_1_opacity、clothing_2_opacity等
• 在主状态机的「State Machine」面板，添加「Number Input」类型的全局输入selected_clothing_id
• 给每个服装的不透明度输入添加条件逻辑：比如当selected_clothing_id等于1时，clothing_1_opacity设为1，其他设为0（用「Set Value」动作实现）
• 在Flutter中，只需要一个主状态机控制器，通过修改全局输入值切换服装，同时主动画持续播放：

  void switchClothing(int id) {
    final input = _mainAnimController.findInput('selected_clothing_id') as SMINumber;
    input.value = id.toDouble();
  }
  

方案3：Artboard叠加渲染 #

如果服装是独立制作的Artboard，可以在Flutter中用Stack叠加渲染：

• 在Rive中，把主角色和每套服装分别做成独立的Artboard，确保服装的骨骼绑定和主角色完全一致
• 在Flutter中，用Stack组件把主角色Artboard和选中的服装Artboard叠在一起，同时播放两者的主动画：

  Stack(
    children: [
      Rive(
        artboard: mainCharacterArtboard.instance()..addController(_mainAnimController),
      ),
      Rive(
        artboard: selectedClothingArtboard.instance()..addController(_mainAnimController),
      ),
    ],
  )
  

这种方式适合服装样式差异极大、需要单独维护的场景。

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