Flutter开关切换插件toggle_switch_plus的使用

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

Flutter开关切换插件toggle_switch_plus的使用

特性

  • 可以轻松获取选中的值通过onChanged(value)方法
  • 可以设置不同的值和显示值

开始使用

  • 需要传递一个包含选项的列表
  • 在onChanged回调中获取选中的值

使用示例

ToggleSwitchPlus(
  values: const ['male', 'female', 'other'], // 选项值
  labels: const ['Male', 'Female', 'Other'], // 显示文本
  onChanged: (value) {
    debugPrint(value); // 打印选中的值
  },
),

完整示例代码

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

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

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

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'An example app for toggle',
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: ToggleSwitchPlus(
            values: const ['male', 'female', 'other'],
            labels: const ['Male', 'Female', 'Other'],
            onChanged: (value) {
              debugPrint(value); // 打印选中的值
            },
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


当然，下面是一个关于如何在Flutter项目中使用toggle_switch_plus插件的示例代码。这个插件提供了一个易于使用的开关组件，适用于用户界面的开关切换功能。

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

dependencies:
  flutter:
    sdk: flutter
  toggle_switch_plus: ^2.0.0  # 请检查最新版本号并替换

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

接下来，你可以在你的Dart文件中使用这个插件。以下是一个完整的示例，展示了如何使用ToggleSwitch组件：

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

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

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

class ToggleSwitchDemo extends StatefulWidget {
  @override
  _ToggleSwitchDemoState createState() => _ToggleSwitchDemoState();
}

class _ToggleSwitchDemoState extends State<ToggleSwitchDemo> {
  bool isSwitchOn = false;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Toggle Switch Plus Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ToggleSwitch(
              initialLabelIndex: 0,
              activeBgColor: Colors.blue,
              inactiveBgColor: Colors.grey,
              activeFgColor: Colors.white,
              inactiveFgColor: Colors.white,
              labels: ['Off', 'On'],
              totalSwitches: 1,
              active: isSwitchOn,
              onToggle: (index) {
                handleSwitchChanged(!isSwitchOn);
              },
            ),
            SizedBox(height: 20),
            Text(
              'Switch is ${isSwitchOn ? 'ON' : 'OFF'}',
              style: TextStyle(fontSize: 20),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个ToggleSwitch组件。ToggleSwitch组件有以下关键属性：

  • initialLabelIndex: 初始标签索引，通常设为0。
  • activeBgColor和inactiveBgColor: 开关激活和未激活时的背景颜色。
  • activeFgColor和inactiveFgColor: 开关激活和未激活时的前景颜色（通常是文字或图标的颜色）。
  • labels: 包含开关状态标签的列表，例如“Off”和“On”。
  • totalSwitches: 开关的总数，在这个例子中我们只有一个开关，所以设为1。
  • active: 表示开关当前状态的布尔值。
  • onToggle: 当开关状态改变时调用的回调函数。

运行这个应用后，你会看到一个开关，当点击开关时，开关的状态会在“ON”和“OFF”之间切换，同时文本标签也会更新以反映当前状态。

希望这个示例对你有帮助！如果你有其他问题或需要进一步的帮助，请随时告诉我。

回到顶部