Flutter 开关控制插件 keepswitch 的使用

安装

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

dependencies:
  keepswitch: <latest-version>

然后在 Dart 文件中导入：

import 'package:keepswitch/keepswitch.dart';

基本用法

首先创建一个 Scaffold 并设置 AppBar 和 body。在 body 中调用 settingsList() 方法。

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      shape: BeveledRectangleBorder(),
      toolbarHeight: 60,
      title: Center(child: const Text('Settings UI')),
    ),
    body: Padding(
      padding: const EdgeInsets.only(top: 10),
      child: SafeArea(
        child: settingsList(),
      ),
    ),
  );
}

// 创建一个列表项，其中包含一个开关控件
Widget settingsList() {
  return ListTile(
    leading: leading, // 可以自定义图标或组件
    trailing: KeepSwitch(
      value: switchValue!, // 控制开关的状态
      onChanged: enabled ? onToggle : null, // 开关状态改变时的回调函数
      activeColor: Theme.of(context).accentColor, // 开关开启时的颜色
      inactiveColor: Colors.grey, // 开关关闭时的颜色
      inactiveText: 'Off', // 开关关闭时的文本
      activeText: 'On', // 开关开启时的文本
      activeTextColor: Colors.white70, // 开关开启时文本颜色
      inactiveTextColor: Colors.white70, // 开关关闭时文本颜色
      isSwitchDisabled: false, // 是否禁用开关
      switchHeight: 55, // 开关的高度
      switchWidth: 27, // 开关的宽度
      switchButtonColor: Colors.white, // 开关按钮的颜色
    ),
    title: Text(
      title, // 列表项的标题
      style: titleTextStyle,
      maxLines: titleMaxLines,
      overflow: TextOverflow.ellipsis,
    ),
    subtitle: subtitle != null
        ? Text(
            subtitle!,
            style: subtitleTextStyle ?? titleTextStyle,
            maxLines: subtitleMaxLines,
            overflow: TextOverflow.ellipsis,
          )
        : null,
  );
}

示例代码

下面是一个完整的示例代码，展示了如何使用 keepswitch 插件来创建一个带有开关控件的设置界面。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SettingsPage(),
    );
  }
}

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

class _SettingsPageState extends State<SettingsPage> {
  bool switchValue = false;
  bool enabled = true;

  void onToggle(bool value) {
    setState(() {
      switchValue = value;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        shape: BeveledRectangleBorder(),
        toolbarHeight: 60,
        title: Center(child: const Text('Settings UI')),
      ),
      body: Padding(
        padding: const EdgeInsets.only(top: 10),
        child: SafeArea(
          child: settingsList(),
        ),
      ),
    );
  }

  Widget settingsList() {
    return ListView(
      children: [
        settingsItem('主题模式', switchValue, onToggle),
        settingsItem('夜间模式', switchValue, onToggle),
        settingsItem('蓝牙连接', switchValue, onToggle),
      ],
    );
  }

  Widget settingsItem(String title, bool value, Function(bool) onChanged) {
    return ListTile(
      leading: Icon(Icons.settings), // 自定义图标
      trailing: KeepSwitch(
        value: value,
        onChanged: enabled ? onChanged : null,
        activeColor: Theme.of(context).accentColor,
        inactiveColor: Colors.grey,
        inactiveText: 'Off',
        activeText: 'On',
        activeTextColor: Colors.white70,
        inactiveTextColor: Colors.white70,
        isSwitchDisabled: false,
        switchHeight: 55,
        switchWidth: 27,
        switchButtonColor: Colors.white,
      ),
      title: Text(
        title,
        style: TextStyle(fontSize: 18),
        maxLines: 1,
        overflow: TextOverflow.ellipsis,
      ),
    );
  }
}