Flutter动画渲染插件rive_native的使用

Rive Native 是一个新的运行时，它允许你在 Flutter 应用中显示和交互 Rive 图形。Rive Native 由 Rive 渲染器（Rive Renderer）驱动，通过 FFI（Foreign Function Interface）与 Rive 的 C++ 运行时进行交互。

Rive Native 与当前 Rive Flutter 运行时的区别

• rive_native 使用 Rive 的 C++ 运行时通过 FFI 驱动，不再通过 Dart 实现的相同运行时。这确保了跨平台的一致性体验，并且能够在未来实现性能改进和新功能，如响应式布局。
• rive_native 将 Rive 渲染器引入到 Flutter 中。你仍然可以选择使用基于 Flutter 的渲染器（Dart / Impeller）。在某些情况下，一个比另一个更受欢迎。我们将提供更多文档来帮助你根据具体需求选择正确的渲染器。如果性能是首要考虑因素，我们建议使用 Rive 渲染器。未来，高度请求的功能（如辉光和阴影）可能仅由 Rive 渲染器支持。

技术预览

该软件包目前处于技术预览阶段，并不支持所有来自当前 Rive Flutter 运行时的功能和平台。

我们正在努力添加对所有主要功能的支持。

平台支持

注意：iOS 模拟器支持当前不可用。请使用真实设备进行测试。

功能支持

入门指南

rive_native 目前还没有在 GitHub 上公开发布，但很快就会发布。现在你可以通过以下步骤拉取源代码和示例：

dart pub unpack rive_native
cd rive_native/example
flutter pub get
flutter run

正在开发一个更高层次的声明性 API，以使在 Flutter 应用中使用 Rive 图形更加容易。

请参阅 rive_native/example/rive_player.dart 文件中的示例实现，了解如何使用此包。

排错

相关的本地库应该会在构建步骤（flutter run 或 flutter build）期间自动下载。

如果你遇到问题，请尝试以下操作：

• flutter clean
• flutter pub get
• flutter run

或者，你也可以直接运行 rive_native 设置脚本。在你的 Flutter 应用根目录下运行：

dart run rive_native:setup --verbose --clean --platform macos

这将清理 rive_native 设置并下载指定平台的库，具体平台支持请参见上面的表格。

构建

默认情况下，预构建的本地库会被下载并使用。你也可以选择自己构建库，使用 rive_native 设置，传递 --build 标志：

flutter clean # 重要
dart run rive_native:setup --verbose --clean --build --platform macos

这将需要一些工具在你的机器上可用。我们很快会提供更多文档。

测试

共享库也包括在下载/构建过程中。如果你在测试中遇到使用 rive_native 的困难，请联系我们。

示例代码

以下是示例代码，展示了如何在 Flutter 应用中使用 rive_native。

lib/main.dart

import 'package:flutter/material.dart';
import 'package:rive_native/rive_native.dart' as rive;

import 'examples/examples.dart';
import 'rive_player.dart';

const _appBarColor = Color(0xFF323232);
const _backgroundColor = Color(0xFF1D1D1D);
const _primaryColor = Color(0xFF57A5E0);

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await rive.RiveNative.init(); // 初始化 Rive Native
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      darkTheme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: _backgroundColor,
        appBarTheme: const AppBarTheme(backgroundColor: _appBarColor),
        colorScheme: ColorScheme.fromSwatch().copyWith(primary: _primaryColor),
      ),
      themeMode: ThemeMode.dark,
      home: const HomePage(),
    );
  }
}

class Demo {
  final Widget widget;
  final String text;

  Demo(this.widget, this.text);
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List<Demo> widgets = [
    Demo(const ExampleBasic(), "Basic"),
    Demo(const ExampleTickerMode(), "Ticker Mode"),
    Demo(const ExampleResponsiveLayout(), "Responsive Layout"),
    Demo(const ExampleTimeDilation(), "Time Dilation"),
    Demo(const ExampleHitTestBehaviour(), "Hit test behaviour"),
    Demo(const ExampleArtboardDoesNotExists(), "Artboard does not exists"),
  ];

  bool isRiveRender = true; // 控制渲染器的选择

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Rive Native Examples"),
      ),
      body: Column(
        children: [
          Expanded(
            child: Padding(
              padding: const EdgeInsets.only(top: 120),
              child: ListView.builder(
                itemCount: widgets.length,
                itemBuilder: (context, index) {
                  return _button(widgets[index].text, () {
                    Navigator.of(context).push(
                      MaterialPageRoute(
                        builder: (context) {
                          return BasePage(child: widgets[index].widget);
                        },
                      ),
                    );
                  });
                },
              ),
            ),
          ),
          Padding(
              padding: const EdgeInsets.all(8.0),
              child: isRiveRender
                  ? const Text("Active Renderer: Rive")
                  : const Text("Active Renderer: Flutter (Skia or Impeller)")),
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: () {
                    setState(() {
                      isRiveRender = true;
                    });
                  },
                  child: const Text("Rive Renderer"),
                ),
                ElevatedButton(
                  onPressed: () {
                    setState(() {
                      isRiveRender = false;
                    });
                  },
                  child: const Text("Flutter Renderer"),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _button(String title, VoidCallback onPressed) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Center(child: ElevatedButton(onPressed: onPressed, child: Text(title)))
    );
  }
}

class BasePage extends StatelessWidget {
  const BasePage({super.key, required this.child});

  final Widget child;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Center(child: child),
      ),
    );
  }
}