Flutter开关切换插件reactive_toggle_switch的使用

Flutter开关切换插件reactive_toggle_switch的使用

reactive_toggle_switch 是一个围绕 toggle_switch 构建的包装器，旨在与 reactive_forms 结合使用。

文档仍在编写中。有关示例，请参阅以下示例文件夹：

packages/reactive_toggle_switch/example

完整示例代码

// ignore_for_file: depend_on_referenced_packages

import 'package:flutter/material.dart';
import 'package:reactive_forms/reactive_forms.dart';
import 'package:reactive_toggle_switch/reactive_toggle_switch.dart';

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

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

  // 创建表单组
  FormGroup buildForm() => fb.group({
        'input': FormControl<int>(value: 0), // 表单控件初始值为0
      });

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        appBar: AppBar(),
        body: SafeArea(
          child: SingleChildScrollView(
            physics: const BouncingScrollPhysics(), // 使用反弹滚动效果
            padding: const EdgeInsets.symmetric(
              horizontal: 20.0,
              vertical: 20.0,
            ),
            child: ReactiveFormBuilder(
              form: buildForm, // 设置表单
              builder: (context, form, child) {
                return Column(
                  children: [
                    // 使用ReactiveToggleSwitch组件
                    ReactiveToggleSwitch(
                      formControlName: 'input', // 绑定表单控件
                      totalSwitches: 3, // 切换按钮总数
                      labels: const ['美国', '加拿大', '墨西哥'], // 切换按钮标签
                    ),
                    ElevatedButton(
                      child: const Text('提交'), // 提交按钮
                      onPressed: () {
                        if (form.valid) { // 检查表单是否有效
                          debugPrint(form.value.toString()); // 打印表单值
                        }
                      },
                    ),
                  ],
                );
              },
            ),
          ),
        ),
      ),
    );
  }
}

说明

  1. 导入库:

    import 'package:flutter/material.dart';
import 'package:reactive_forms/reactive_forms.dart';
import 'package:reactive_toggle_switch/reactive_toggle_switch.dart';

  2. 创建表单:

    FormGroup buildForm() => fb.group({
      'input': FormControl<int>(value: 0),
    });

  3. 构建UI:

    [@override](/user/override)
Widget build(BuildContext context) {
  return MaterialApp(
    theme: ThemeData(
      primarySwatch: Colors.blue,
      visualDensity: VisualDensity.adaptivePlatformDensity,
    ),
    home: Scaffold(
      appBar: AppBar(),
      body: SafeArea(
        child: SingleChildScrollView(
          physics: const BouncingScrollPhysics(),
          padding: const EdgeInsets.symmetric(
            horizontal: 20.0,
            vertical: 20.0,
          ),
          child: ReactiveFormBuilder(
            form: buildForm,
            builder: (context, form, child) {
              return Column(
                children: [
                  ReactiveToggleSwitch(
                    formControlName: 'input',
                    totalSwitches: 3,
                    labels: const ['美国', '加拿大', '墨西哥'],
                  ),
                  ElevatedButton(
                    child: const Text('提交'),
                    onPressed: () {
                      if (form.valid) {
                        debugPrint(form.value.toString());
                      }
                    },
                  ),
                ],
              );
            },
          ),
        ),
      ),
    ),
  );
}

更多关于Flutter开关切换插件reactive_toggle_switch的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter开关切换插件reactive_toggle_switch的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


reactive_toggle_switch 是一个用于 Flutter 的开关切换插件，它允许你创建一个可自定义的开关组件，并且可以与状态管理工具（如 Provider 或 Riverpod）结合使用，以实现响应式的状态切换。

安装

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

dependencies:
  flutter:
    sdk: flutter
  reactive_toggle_switch: ^1.0.0

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

基本用法

reactive_toggle_switch 提供了一个 ReactiveToggleSwitch 组件，你可以通过它来创建一个开关切换。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Reactive Toggle Switch Example'),
        ),
        body: ToggleSwitchExample(),
      ),
    );
  }
}

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

class _ToggleSwitchExampleState extends State<ToggleSwitchExample> {
  bool _isSwitched = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: ReactiveToggleSwitch(
        value: _isSwitched,
        onChanged: (bool value) {
          setState(() {
            _isSwitched = value;
          });
        },
      ),
    );
  }
}

自定义选项

ReactiveToggleSwitch 提供了多个可自定义的属性，例如：

  • activeColor: 开关打开时的背景颜色。
  • inactiveColor: 开关关闭时的背景颜色。
  • activeThumbColor: 开关打开时滑块的颜色。
  • inactiveThumbColor: 开关关闭时滑块的颜色。
  • activeText: 开关打开时显示的文本。
  • inactiveText: 开关关闭时显示的文本。
  • width: 开关的宽度。
  • height: 开关的高度。
ReactiveToggleSwitch(
  value: _isSwitched,
  onChanged: (bool value) {
    setState(() {
      _isSwitched = value;
    });
  },
  activeColor: Colors.green,
  inactiveColor: Colors.red,
  activeThumbColor: Colors.white,
  inactiveThumbColor: Colors.white,
  activeText: 'ON',
  inactiveText: 'OFF',
  width: 100,
  height: 50,
);

与状态管理工具结合

你可以将 ReactiveToggleSwitch 与状态管理工具（如 Provider 或 Riverpod）结合使用，以实现更复杂的逻辑。

例如，使用 Provider：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:reactive_toggle_switch/reactive_toggle_switch.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => ToggleState(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Reactive Toggle Switch with Provider'),
        ),
        body: ToggleSwitchExample(),
      ),
    );
  }
}

class ToggleSwitchExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final toggleState = Provider.of<ToggleState>(context);

    return Center(
      child: ReactiveToggleSwitch(
        value: toggleState.isSwitched,
        onChanged: (bool value) {
          toggleState.toggle();
        },
      ),
    );
  }
}

class ToggleState with ChangeNotifier {
  bool _isSwitched = false;

  bool get isSwitched => _isSwitched;

  void toggle() {
    _isSwitched = !_isSwitched;
    notifyListeners();
  }
}
回到顶部