【Flutter】Flutter 使用 toggle_switch 实现切换按钮

一、前言

你好，我是小雨青年，今天我要为大家介绍一个非常实用的 Flutter 组件：toggle_switch。这个组件可以帮助我们在 Flutter 项目中轻松实现切换按钮的功能。在这篇文章中，我将手把手地教大家如何安装和使用这个组件，以及如何在实际业务中应用它。文章的重点有：

• 如何安装 toggle_switch 组件
• toggle_switch 的基础和高级用法
• 根据实际业务需求编写的完整示例代码

这是小雨青年于 2023 年发布在 CSDN 的博客，由于目前采集站侵权行为猖獗，如果你不是在 CSDN 看到本文，麻烦你通过 CSDN 联系我，谢谢你的支持。

你是否对成为 Flutter 高手充满渴望，想要掌握更多前沿技巧和最佳实践？现在，你的机会来了！

🚀 Flutter 从零到一：基础入门到应用上线全攻略 正在热烈招募参与者！

✅ 这个专栏不仅包括了全面的 Flutter 学习资源，还有实用的代码示例和深入的解析教程。
✅ 专栏内容会持续更新，价格也会随之上涨。现在加入，享受最优惠的价格，抓住属于你的机会！
✅ 想要与其他 Flutter 学习者互动交流吗？点击这里 加入我们的讨论群，一起成长、一起进步。

别再等待，让我们今天就启程，共同开启 Flutter 的精彩学习之旅吧！

二、安装和基本使用

首先，我们需要在 Flutter 项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:...toggle_switch: ^2.1.0

安装完成后，记得在你的 Dart 文件中导入这个包：

import 'package:toggle_switch/toggle_switch.dart';

三、Toggle Switch 的基础示例

让我们从最基础的 toggle_switch 开始。以下是一个简单的示例，展示了如何使用默认的主题颜色创建一个切换按钮：

ToggleSwitch(initialLabelIndex: 0,totalSwitches: 3,labels: ['America', 'Canada', 'Mexico'],onToggle: (index) {print('切换到: $index');},
)

在这个示例中，我们创建了一个有三个选项的切换按钮：‘America’, ‘Canada’, 和 ‘Mexico’。initialLabelIndex 设置了默认选中的选项，这里我们默认选中了 ‘America’。

四、Toggle Switch 的高级用法

toggle_switch 组件提供了许多自定义选项，让我们可以根据项目的需求进行调整。下面，我会为大家展示一些常见的高级用法。

1. 自定义高度和字体大小：

ToggleSwitch(minWidth: 90.0,minHeight: 90.0,fontSize: 16.0,initialLabelIndex: 1,activeBgColor: [Colors.green],activeFgColor: Colors.white,inactiveBgColor: Colors.grey,inactiveFgColor: Colors.grey[900],totalSwitches: 3,labels: ['Tall', 'Grande', 'Venti'],onToggle: (index) {print('切换到: $index');},
)

2. 使用图标和自定义宽度：

ToggleSwitch(customWidths: [90.0, 50.0],cornerRadius: 20.0,activeBgColors: [[Colors.cyan], [Colors.redAccent]],activeFgColor: Colors.white,inactiveBgColor: Colors.grey,inactiveFgColor: Colors.white,totalSwitches: 2,labels: ['YES', ''],icons: [null, FontAwesomeIcons.times],onToggle: (index) {print('切换到: $index');},
)

3. 使用不同的背景颜色和图标：

ToggleSwitch(minWidth: 90.0,initialLabelIndex: 1,cornerRadius: 20.0,activeFgColor: Colors.white,inactiveBgColor: Colors.grey,inactiveFgColor: Colors.white,totalSwitches: 2,labels: ['Male', 'Female'],icons: [FontAwesomeIcons.mars, FontAwesomeIcons.venus],activeBgColors: [[Colors.blue],[Colors.pink]],onToggle: (index) {print('切换到: $index');},
)

五、实际业务中的完整示例

假设我们正在开发一个咖啡点单应用，用户可以通过 toggle_switch 选择咖啡的大小。下面是一个完整的示例代码：

import 'package:flutter/material.dart';
import 'package:toggle_switch/toggle_switch.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: '咖啡点单应用',theme: ThemeData(primarySwatch: Colors.brown,),home: CoffeeOrderPage(),);}
}class CoffeeOrderPage extends StatefulWidget {@override_CoffeeOrderPageState createState() => _CoffeeOrderPageState();
}class _CoffeeOrderPageState extends State<CoffeeOrderPage> {int _selectedSize = 0;@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('选择咖啡大小'),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[ToggleSwitch(minWidth: 90.0,minHeight: 90.0,fontSize: 16.0,initialLabelIndex: _selectedSize,activeBgColor: [Colors.brown],activeFgColor: Colors.white,inactiveBgColor: Colors.grey,inactiveFgColor: Colors.grey[900],totalSwitches: 3,labels: ['小杯', '中杯', '大杯'],onToggle: (index) {if (index != null) {setState(() {_selectedSize = index;});print('选择了: $_selectedSize');}},),SizedBox(height: 20.0),Text('你选择了 ${['小杯', '中杯', '大杯'][_selectedSize]} 咖啡')],),),);}
}

运行结果如下所示：

六、总结

toggle_switch 是一个非常实用的 Flutter 组件，无论是在基础应用还是在复杂的业务场景中，都可以帮助我们轻松实现切换按钮的功能。希望通过这篇文章，大家可以更好地理解和使用这个组件。

对 Flutter 感兴趣，渴望深入探索和学习吗？Flutter 从零到一：基础入门到应用上线全攻略 正是你的完美起点！

📘 在这个专栏中，你将发现丰富的 Flutter 学习资源，从代码示例到深入的技术解读，一应俱全。
🛠️ 想要了解如何用 Flutter 构建出色的应用吗？所有的秘诀和答案都在我们的专栏里等着你！
💰 别再犹豫，专栏内容将不断更新，价格也将逐渐上涨。现在就加入，享受最优惠的价格，开启你的 Flutter 探索之旅！

想了解更多？点击这里查看 Flutter Developer 101：入门小册 & 专栏指引。

👥 还有，别忘了点击这里 加入我们的讨论群，与其他 Flutter 爱好者一起交流和学习，共同成长！