rive_checkbox #

Rive复选框插件，支持带有两个或三个状态动画的自定义复选框。

使用方法 #

RiveCheckbox(
  animation: 'assets/checkbox.riv',
  value: true,
),

您可以使用以下参数自定义该小部件：

animation: 指向您的Rive动画路径/名称。
animationOn: 开启状态的动画名称，默认为 “On”。
animationOff: 关闭状态的动画名称，默认为 “Off”。
animationUnknown: 不确定状态的动画名称，默认为 “Unknown”。
value: 可以为 null, false 或 true。
width: 强制设置动画的宽度。
height: 强制设置动画的高度。
tristate: 是否启用三态模式（允许 null 值），默认为 false。
onChanged: 当复选框状态变化时触发的回调函数。
useArtboardSize: 是否使用Rive画布的实际尺寸代替缩放。

如果 tristate 为 false 且 value 为 null，则会将其设置为 false。

它是如何工作的 #

要使您的Rive动画与该小部件兼容非常简单：

当 value 为 true 时，调用动画 On。
当 value 为 false 时，调用动画 Off。
当 value 为 null 且 tristate 为 true 时，调用动画 Unknown。

示例代码

以下是完整的示例代码，展示如何使用 rive_checkbox 插件：

import 'package:flutter/material.dart';
import 'package:rive_checkbox/rive_checkbox.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // 应用程序的根小部件
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 自定义复选框示例',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: '自定义复选框示例'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isChecked = true; // 初始值为选中状态

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: RiveCheckbox(
          // 使用Rive动画文件
          animation: 'assets/checkbox.riv',
          // 设置初始值
          value: _isChecked,
          // 使用Rive画布的实际大小
          useArtboardSize: true,
          // 状态变化时的回调
          onChanged: (bool newValue) {
            setState(() {
              _isChecked = newValue;
            });
          },
        ),
      ),
    );
  }
}

更多关于Flutter自定义复选框插件rive_checkbox的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

sinazl 1楼作者

更多关于Flutter自定义复选框插件rive_checkbox的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

rive_checkbox 是一个基于 Rive 动画的 Flutter 自定义复选框插件。它允许你使用 Rive 动画来创建具有丰富交互效果的复选框。Rive 是一个强大的动画工具，可以创建复杂的矢量动画，并将其嵌入到 Flutter 应用中。

安装 `rive_checkbox`

首先，你需要在 pubspec.yaml 文件中添加 rive_checkbox 依赖：

dependencies:
  flutter:
    sdk: flutter
  rive_checkbox: ^0.0.1  # 请检查最新版本

然后运行 flutter pub get 来安装依赖。

使用 `rive_checkbox`

导入包：

在你的 Dart 文件中导入 rive_checkbox 包：
```
import 'package:rive_checkbox/rive_checkbox.dart';
```
创建 Rive 动画文件：

你需要一个 Rive 动画文件（.riv），该文件包含复选框的动画。你可以使用 Rive 编辑器创建这个动画，并确保动画包含两个状态：checked 和 unchecked。

使用 RiveCheckbox 组件：

在你的 Flutter 应用中使用 RiveCheckbox 组件。你需要提供 Rive 动画文件的路径，并处理复选框的状态变化。

class MyCheckboxPage extends StatefulWidget {
  [@override](/user/override)
  _MyCheckboxPageState createState() => _MyCheckboxPageState();
}

class _MyCheckboxPageState extends State<MyCheckboxPage> {
  bool _isChecked = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Rive Checkbox Example'),
      ),
      body: Center(
        child: RiveCheckbox(
          value: _isChecked,
          onChanged: (bool newValue) {
            setState(() {
              _isChecked = newValue;
            });
          },
          riveFile: 'assets/checkbox.riv', // 你的 Rive 动画文件路径
          checkedState: 'checked', // Rive 动画中的 checked 状态名称
          uncheckedState: 'unchecked', // Rive 动画中的 unchecked 状态名称
        ),
      ),
    );
  }
}

加载 Rive 动画文件：

确保你的 Rive 动画文件在 pubspec.yaml 中正确配置：
```
flutter:
  assets:
    - assets/checkbox.riv
```

参数说明

value: 复选框的当前状态（true 表示选中，false 表示未选中）。
onChanged: 当复选框状态发生变化时调用的回调函数。
riveFile: Rive 动画文件的路径。
checkedState: Rive 动画中表示选中状态的名称。
uncheckedState: Rive 动画中表示未选中状态的名称。

示例

以下是一个完整的示例，展示了如何使用 rive_checkbox 创建一个自定义复选框：

import 'package:flutter/material.dart';
import 'package:rive_checkbox/rive_checkbox.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyCheckboxPage(),
    );
  }
}

class MyCheckboxPage extends StatefulWidget {
  [@override](/user/override)
  _MyCheckboxPageState createState() => _MyCheckboxPageState();
}

class _MyCheckboxPageState extends State<MyCheckboxPage> {
  bool _isChecked = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Rive Checkbox Example'),
      ),
      body: Center(
        child: RiveCheckbox(
          value: _isChecked,
          onChanged: (bool newValue) {
            setState(() {
              _isChecked = newValue;
            });
          },
          riveFile: 'assets/checkbox.riv',
          checkedState: 'checked',
          uncheckedState: 'unchecked',
        ),
      ),
    );
  }
}

Flutter自定义复选框插件rive_checkbox的使用