Flutter开关组件插件dh_switch的使用

Flutter开关组件插件dh_switch的使用

dh_switch

一个简单的开关组件包。

使用说明

您可以通过设置 thumb 和 track 的颜色来定制外观，使用 switchSize 来调整开关大小，通过 borderColor 设置边框颜色。如果不需要边框，可以将 borderStyle 设置为 BorderStyle.none。

DHSwitch 示例

示例代码

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

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'DHSwitch',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: SwitchPage(title: 'DHSwitch Demo'),
    );
  }
}

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

  final String title;

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

class _SwitchPageState extends State<SwitchPage> {
  bool value = false; // 控制开关的状态

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text(widget.title)), // 设置标题
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              SizedBox(height: 80), // 添加间距
              Text("BorderStyle.solid"), // 显示文字
              DHSwitch(
                value: value, // 当前开关状态
                activeTrackColor: Colors.lightBlueAccent, // 开关开启时轨道颜色
                inactiveTrackColor: Colors.lightBlue, // 开关关闭时轨道颜色
                borderColor: Colors.redAccent, // 边框颜色
                switchSize: SwitchSize( // 自定义开关大小
                  width: 44.0, // 宽度
                  height: 24.0, // 高度
                  borderWidth: 2.0, // 边框宽度
                ),
                onChanged: (value) { // 状态改变回调
                  setState(() => this.value = value); // 更新状态
                },
                borderStyle: BorderStyle.solid, // 固定边框样式
              ),
              SizedBox(height: 30), // 添加间距
              Text("BorderStyle.none"), // 显示文字
              DHSwitch(
                value: value, // 当前开关状态
                activeTrackColor: Colors.lightGreenAccent, // 开关开启时轨道颜色
                inactiveTrackColor: Colors.lightGreen, // 开关关闭时轨道颜色
                borderColor: Colors.yellowAccent, // 边框颜色
                onChanged: (value) { // 状态改变回调
                  setState(() => this.value = value); // 更新状态
                },
                borderStyle: BorderStyle.none, // 无边框样式
              )
            ],
          ),
        ));
  }
}

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

1 回复

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


dh_switch 是一个自定义的 Flutter 开关组件插件，它提供了一个可定制的开关控件，可以用于替代 Flutter 自带的 Switch 组件。使用 dh_switch 可以让你的应用程序中的开关控件更加个性化和美观。

安装 dh_switch

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

dependencies:
  flutter:
    sdk: flutter
  dh_switch: ^1.0.0  # 请查看最新版本

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

使用 dh_switch

安装完成后，你可以在你的 Flutter 项目中使用 dh_switch。以下是一个简单的示例，展示了如何使用 dh_switch：

import 'package:flutter/material.dart';
import 'package:dh_switch/dh_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('dh_switch Example'),
        ),
        body: Center(
          child: DhSwitchExample(),
        ),
      ),
    );
  }
}

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

class _DhSwitchExampleState extends State<DhSwitchExample> {
  bool _isSwitched = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('Switch Value: $_isSwitched'),
        SizedBox(height: 20),
        DhSwitch(
          value: _isSwitched,
          onChanged: (bool value) {
            setState(() {
              _isSwitched = value;
            });
          },
          activeColor: Colors.green, // 设置开启状态的颜色
          inactiveColor: Colors.red, // 设置关闭状态的颜色
          activeThumbColor: Colors.white, // 设置开启状态滑块的颜色
          inactiveThumbColor: Colors.white, // 设置关闭状态滑块的颜色
          activeTrackBorderColor: Colors.transparent, // 设置开启状态轨道边框颜色
          inactiveTrackBorderColor: Colors.transparent, // 设置关闭状态轨道边框颜色
          activeIcon: Icon(Icons.check, color: Colors.white), // 设置开启状态的图标
          inactiveIcon: Icon(Icons.close, color: Colors.white), // 设置关闭状态的图标
        ),
      ],
    );
  }
}
回到顶部