Flutter开关控制插件pm_switch的使用

Flutter开关控制插件pm_switch的使用

Flutter Material PM Switch

自定义开关库用于Flutter

版本 代码 代码

Flutter 开关小部件允许用户在两种状态之间切换，如“开”和“关”，通常通过点击手势触发。

支持平台

  • Android
  • IOS

如何使用

在pubspec.yaml文件中添加以下依赖项：

dependencies:
  pm_switch: ^1.0.0

导入库：

import 'package:pm_switch/pm_switch.dart';

Flutter PM Switch (Android & iOS)

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

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

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

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

class _MyAppState extends State<MyApp> {
  bool isSimpleSwitched = false;
  bool isImageSwitched = false;
  bool isTextSwitched = false;
  bool isColorSwitched = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Center(child: Text('Flutter 自定义开关')),
          backgroundColor: Colors.purple[100],
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Text('简单开关'),
                const SizedBox(
                  height: 2,
                ),
                PMSimpleSwitch(
                  isSwitched: isSimpleSwitched,
                  onChanged: (value) {
                    setState(() {
                      isSimpleSwitched = value;
                    });
                  },
                  activeTrackColor: Colors.green,
                  inactiveThumbColor: Colors.grey,
                ),
                const SizedBox(height: 16),
                const Text('图像开关'),
                const SizedBox(
                  height: 2,
                ),
                ImageSwitch(
                  isSwitched: isImageSwitched,
                  onChanged: (value) {
                    setState(() {
                      isImageSwitched = value;
                    });
                  },
                  activeImage: 'assets/selected.png',
                  inactiveImage: 'assets/close.png',
                ),
                const SizedBox(height: 16),
                const Text('文本开关'),
                const SizedBox(
                  height: 2,
                ),
                TextSwitch(
                  isSwitched: isTextSwitched,
                  onChanged: (value) {
                    setState(() {
                      isTextSwitched = value;
                    });
                  },
                  activeText: '激活',
                  inactiveText: '未激活',
                  activeColor: Colors.purple[300],
                  inactiveTrackColor: Colors.grey,
                  inactiveThumbColor: Colors.white,
                  activeTrackColor: Colors.red[300],
                ),
                const SizedBox(height: 16),
                const Text('颜色开关'),
                SizedBox(
                  height: 2,
                ),
                PMCustomColorSwitch(
                  isSwitched: isColorSwitched,
                  onChanged: (value) {
                    setState(() {
                      isColorSwitched = value;
                    });
                  },
                  activeThumbImage: const AssetImage("assets/active.png"),
                  activeTrackColor: Colors.green[800],
                  inactiveThumbColor: Colors.white,
                  inactiveTrackColor: Colors.green[800],
                  inactiveThumbImage: const AssetImage("assets/inactive.png"),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

属性描述

属性名 描述 默认值
value 开关的状态（必填） false
onChanged 用户切换开关时调用的回调函数（必填） -
activeColor 开关打开时使用的颜色 -
activeTrackColor 开关打开时轨道的颜色 -
inactiveThumbColor 开关关闭时拇指的颜色 -
inactiveTrackColor 开关关闭时轨道的颜色 -
activeThumbImage 开关打开时拇指的图片 -
onActiveThumbImageError 加载activeThumbImage时出错的回调函数 -
inactiveThumbImage 开关关闭时拇指的图片 -
onInactiveThumbImageError 加载inactiveThumbImage时出错的回调函数 -
thumbColor 不管开关状态如何都使用的拇指颜色 -
trackColor 不管开关状态如何都使用的轨道颜色 -
trackOutlineColor 轨道轮廓的颜色 -
trackOutlineWidth 轨道轮廓的宽度 -
thumbIcon 显示在拇指位置的图标 -
materialTapTargetSize 配置点击目标的最小尺寸 -
dragStartBehavior 拖动开始行为的处理方式 DragStartBehavior.start
mouseCursor 当鼠标指针进入或悬停在小部件上时使用的光标 -
focusColor 当开关获得焦点时填充拇指周围区域的颜色 -
hoverColor 当开关被悬停时填充拇指周围区域的颜色 -
overlayColor 当开关被按下时填充拇指周围区域的颜色 -
splashRadius 当开关被按下时溅起效果的半径 -
focusNode 管理此小部件焦点状态的对象 -
onFocusChange 开关焦点状态改变时调用的回调函数 -
autofocus 是否自动聚焦 false

必填属性

属性名 描述
value 开关的状态（必填）
onChanged 用户切换开关时调用的回调函数（必填）

示例

预览示例

示例代码

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

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

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

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

class _MyAppState extends State<MyApp> {
  bool isSimpleSwitched = false;
  bool isImageSwitched = false;
  bool isTextSwitched = false;
  bool isColorSwitched = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Center(child: Text('Flutter 自定义开关')),
          backgroundColor: Colors.purple[100],
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Text('简单开关'),
                const SizedBox(
                  height: 2,
                ),
                PMSimpleSwitch(
                  isSwitched: isSimpleSwitched,
                  onChanged: (value) {
                    setState(() {
                      isSimpleSwitched = value;
                    });
                  },
                  activeTrackColor: Colors.green,
                  inactiveThumbColor: Colors.grey,
                ),
                const SizedBox(height: 16),
                const Text('图像开关'),
                const SizedBox(
                  height: 2,
                ),
                ImageSwitch(
                  isSwitched: isImageSwitched,
                  onChanged: (value) {
                    setState(() {
                      isImageSwitched = value;
                    });
                  },
                  activeImage: 'assets/selected.png',
                  inactiveImage: 'assets/close.png',
                ),
                const SizedBox(height: 16),
                const Text('文本开关'),
                const SizedBox(
                  height: 2,
                ),
                TextSwitch(
                  isSwitched: isTextSwitched,
                  onChanged: (value) {
                    setState(() {
                      isTextSwitched = value;
                    });
                  },
                  activeText: '激活',
                  inactiveText: '未激活',
                  activeColor: Colors.purple[300],
                  inactiveTrackColor: Colors.grey,
                  inactiveThumbColor: Colors.white,
                  activeTrackColor: Colors.red[300],
                ),
                const SizedBox(height: 16),
                const Text('颜色开关'),
                SizedBox(
                  height: 2,
                ),
                PMCustomColorSwitch(
                  isSwitched: isColorSwitched,
                  onChanged: (value) {
                    setState(() {
                      isColorSwitched = value;
                    });
                  },
                  activeThumbImage: const AssetImage("assets/active.png"),
                  activeTrackColor: Colors.green[800],
                  inactiveThumbColor: Colors.white,
                  inactiveTrackColor: Colors.green[800],
                  inactiveThumbImage: const AssetImage("assets/inactive.png"),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


pm_switch 是一个 Flutter 插件，用于创建一个自定义的开关控件。它提供了灵活的自定义选项，可以轻松地集成到你的 Flutter 应用中。以下是如何使用 pm_switch 插件的基本步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  pm_switch: ^1.0.0  # 请使用最新版本

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

2. 导入插件

在你的 Dart 文件中导入 pm_switch 插件：

import 'package:pm_switch/pm_switch.dart';

3. 使用 PmSwitch 控件

你可以在你的 widget 树中使用 PmSwitch 控件。以下是一个简单的示例：

import 'package:flutter/material.dart';
import 'package:pm_switch/pm_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('PmSwitch Example'),
        ),
        body: Center(
          child: PmSwitchExample(),
        ),
      ),
    );
  }
}

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

class _PmSwitchExampleState extends State<PmSwitchExample> {
  bool _switchValue = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        PmSwitch(
          value: _switchValue,
          onChanged: (bool value) {
            setState(() {
              _switchValue = value;
            });
          },
          activeColor: Colors.blue, // 自定义开关打开时的颜色
          inactiveColor: Colors.grey, // 自定义开关关闭时的颜色
          size: 50.0, // 自定义开关的大小
          duration: Duration(milliseconds: 300), // 自定义动画持续时间
        ),
        SizedBox(height: 20),
        Text('Switch is ${_switchValue ? 'ON' : 'OFF'}'),
      ],
    );
  }
}
回到顶部