Flutter滑动开关插件slider_switch的使用

发布于 1周前 作者 vueper 来自 Flutter

Flutter滑动开关插件slider_switch的使用

Slider Switch 是一个用于 Flutter 应用的滑动开关组件。它提供了丰富的配置选项，可以满足不同的需求。

安装

首先，在 pubspec.yaml 文件中添加 slider_switch 依赖：

dependencies:
  flutter:
    sdk: flutter
  slider_switch: ^0.0.9

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

使用

在你的 Dart 文件中导入 slider_switch 包，并使用它来创建滑动开关组件。

示例代码

以下是一个完整的示例代码，展示了如何使用 SliderSwitch 组件。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                // 第一个滑动开关
                SliderSwitch(
                  isEnabled: false, // 禁用滑动开关
                  statusColorOpacity: 0.7,
                  onChanged: (bool value) => print("new listen value $value"),
                ),
                // 第二个滑动开关
                SliderSwitch(
                  statusColorOpacity: 0.7,
                  onChanged: (bool value) => print("new speaking value $value"),
                  statusOnIcon: Icons.record_voice_over,
                  statusOffIcon: Icons.voice_over_off,
                  statusOnColor: Colors.red,
                  statusOnIconOffset: Offset(-5.0, 0.0),
                ),
              ],
            ),
            // 第三个滑动开关
            SliderSwitch(
              orientation: Axis.horizontal,
              statusColorOpacity: 0.7,
              onChanged: (bool value) => print("new listen value $value"),
            ),
            // 第四个滑动开关
            SliderSwitch(
              orientation: Axis.horizontal,
              statusColorOpacity: 0.7,
              onChanged: (bool value) => print("new speaking value $value"),
              statusOnIcon: Icons.record_voice_over,
              statusOffIcon: Icons.voice_over_off,
              statusOnColor: Colors.red,
            ),
          ],
        ),
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是一个关于如何在Flutter中使用slider_switch插件的示例代码。首先，你需要确保在pubspec.yaml文件中添加了slider_switch依赖项：

dependencies:
  flutter:
    sdk: flutter
  slider_switch: ^x.y.z  # 请替换为最新的版本号

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

以下是一个完整的Flutter应用示例，展示了如何使用slider_switch插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Slider Switch Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool isSwitchOn = false;

  void _toggleSwitch(bool value) {
    setState(() {
      isSwitchOn = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Slider Switch Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SliderSwitch(
              activeColor: Colors.blue,
              inactiveColor: Colors.grey,
              activeThumbColor: Colors.white,
              inactiveThumbColor: Colors.grey[300]!,
              value: isSwitchOn,
              onChanged: _toggleSwitch,
            ),
            SizedBox(height: 20),
            Text(
              'Switch is ${isSwitchOn ? 'ON' : 'OFF'}',
              style: TextStyle(fontSize: 24),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中：

  1. 依赖导入：我们导入了slider_switch包。
  2. 状态管理：_MyHomePageState类管理开关的状态（isSwitchOn）。
  3. UI构建：
    • 使用SliderSwitch小部件创建一个滑动开关。
    • activeColor和inactiveColor属性分别定义了开关处于打开和关闭状态时的背景颜色。
    • activeThumbColor和inactiveThumbColor属性定义了开关滑块（拇指）的颜色。
    • value属性绑定到当前开关状态。
    • onChanged回调在开关状态改变时被调用，用于更新状态。
  4. 显示开关状态：在开关下方显示当前开关的状态（ON或OFF）。

运行这个示例应用，你会看到一个滑动开关，点击它可以切换开关状态，并且下方的文本会实时更新以反映当前状态。

回到顶部