替代组件设置

在 Flutter 中缓存 Rive 文件的技术和注意事项。

将 Rive 动画和状态机集成到应用中的最简单方法是通过运行时帮助文档中提到的 RiveAnimation 组件。然而，在某些情况下，你可能希望在画板渲染之前设置与 Rive 组件关联的动画或状态机控制器。请查看以下在 Flutter 应用中集成 Rive 的其他方法：

替代方法

文件加载

如果你想从 rootBundle 加载 .riv 文件，你需要自行导入数据。主要模式如下：

从 .riv 加载字节

使用 RiveFile 解析字节

创建 Artboard 引用

将控制器关联到 Artboard

渲染 Rive 组件

完整示例

综合起来，这个模式可能如下面的代码片段所示：

class _ExampleStateMachineState extends State<ExampleStateMachine> {
  Artboard? _riveArtboard;

  @override
  void initState() {
    super.initState();

    rootBundle.load('assets/rocket.riv').then(
      (data) async {
        final file = RiveFile.import(data);

        final artboard = file.mainArtboard;
        var controller =
            StateMachineController.fromArtboard(artboard, 'Button');
        if (controller != null) {
          artboard.addController(controller);
        }
        setState(() => _riveArtboard = artboard);
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 250,
      height: 250,
      child: Rive(
        artboard: _riveArtboard!.instance(),
      ),
    );
  }
}