Flutter滑动开关组件插件sliding_switch的使用

Flutter滑动开关组件插件 sliding_switch 的使用

sliding_switch 是一个简单的滑动开关小部件，支持高度自定义，包括宽度、颜色、文本等。它还维护选择状态。

Live Demo (Codeapprun)

你可以通过以下链接查看实时演示： Live Demo

Getting Started

在你的Flutter项目的pubspec.yaml文件中添加以下依赖项：

dependencies:
  ...
  sliding_switch: "latest"

然后导入它：

import 'package:sliding_switch/sliding_switch.dart';

Usage Examples

最小配置的滑动开关

以下是一个最简单的滑动开关示例：

SlidingSwitch(
  value: false,
  width: 250,
  onChanged: (bool value) {
    print(value);
  },
)

sliding switch

其他配置选项的滑动开关

你可以进一步自定义滑动开关，如下所示：

SlidingSwitch(
  value: false,
  width: 250,
  onChanged: (bool value) {
    print(value);
  },
  height: 55,
  animationDuration: const Duration(milliseconds: 400),
  onTap: () {},
  onDoubleTap: () {},
  onSwipe: () {},
  textOff: "Female",
  textOn: "Male",
  iconOff: Icons.human_female,
  iconOn: Icons.human_male,
  contentSize: 17,
  colorOn: const Color(0xffdc6c73),
  colorOff: const Color(0xff6682c0),
  background: const Color(0xffe4e5eb),
  buttonColor: const Color(0xfff7f5f7),
  inactiveColor: const Color(0xff636f7b),
)

如果设置了iconOn或iconOff，它们将替代相应的textOn和textOff显示。textOn和textOff的值用于图标的语义标签以提高可访问性。

完整示例Demo

以下是一个完整的示例代码，展示了如何在Flutter应用中使用sliding_switch：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.white,
        body: Center(
          child: SlidingSwitch(
            value: false,
            width: 250,
            onChanged: (bool value) {
              print(value);
            },
            height: 55,
            animationDuration: const Duration(milliseconds: 400),
            onTap: () {},
            onDoubleTap: () {},
            onSwipe: () {},
            textOff: "Female",
            textOn: "Male",
            colorOn: const Color(0xffdc6c73),
            colorOff: const Color(0xff6682c0),
            background: const Color(0xffe4e5eb),
            buttonColor: const Color(0xfff7f5f7),
            inactiveColor: const Color(0xff636f7b),
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


当然，以下是一个关于如何在Flutter中使用sliding_switch插件来实现滑动开关组件的示例代码。这个示例展示了如何集成sliding_switch插件，并在UI中显示一个滑动开关，同时处理开关状态的更改。

首先，确保你已经在pubspec.yaml文件中添加了sliding_switch依赖：

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

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

接下来，在你的Flutter项目中创建一个简单的页面来使用SlidingSwitch组件。以下是一个完整的示例代码：

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

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

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

class SlidingSwitchDemo extends StatefulWidget {
  @override
  _SlidingSwitchDemoState createState() => _SlidingSwitchDemoState();
}

class _SlidingSwitchDemoState extends State<SlidingSwitchDemo> {
  bool isSwitchOn = false;

  void _onSwitchChanged(bool value) {
    setState(() {
      isSwitchOn = value;
    });
    print("Switch is now: $isSwitchOn");
  }

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

在这个示例中：

  1. 我们首先导入了sliding_switch包。
  2. 创建了一个简单的Flutter应用，包含一个主页面SlidingSwitchDemo。
  3. SlidingSwitchDemo是一个有状态的小部件，它维护一个布尔值isSwitchOn来表示开关的状态。
  4. _onSwitchChanged方法是一个回调函数，当开关状态改变时被调用。它更新isSwitchOn状态并打印新的状态。
  5. 在UI中，我们使用SlidingSwitch组件，并传入相关参数，包括颜色、当前值以及状态改变时的回调函数。
  6. 我们还添加了一个文本小部件来显示当前的开关状态。

运行这个应用，你将看到一个滑动开关，当你滑动开关时，文本将更新以反映开关的新状态，同时控制台也会打印出开关的新状态。

回到顶部