Flutter进阶组件(4):CupertinoSwitch(iOS 风格开关)
在 Flutter 的Cupertino
组件库中,CupertinoSwitch
是一个用于创建 iOS 风格开关控件的 widget。它提供了一个简洁的滑动开关,允许用户在开启和关闭状态之间进行切换。
一、基本使用
CupertinoSwitch
是 Flutter 的 cupertino 库的一部分,因此不需要添加额外的依赖。只需导入 cupertino.dart
即可使用:
import 'package:flutter/cupertino.dart';
使用CupertinoSwitch
的基本方式如下:
// ignore_for_file: prefer_const_constructors
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
void main() {
runApp(const MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: ExpansionTilePage(),
)));
}
class ExpansionTilePage extends StatefulWidget {
const ExpansionTilePage({super.key});
@override
State<ExpansionTilePage> createState() => CupertinoSwitchExample();
}
class CupertinoSwitchExample extends State<ExpansionTilePage> {
bool _switchValue = false;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text('CupertinoSwitch Example'),
),
child: Center(
child: CupertinoSwitch(
value: _switchValue,
onChanged: (value) {
setState(() {
_switchValue = value;
});
},
),
),
),
);
}
}
在这个例子中,我们创建了一个简单的 iOS 风格开关,并在状态变化时更新_switchValue
。效果图如下图所示:
二、属性
CupertinoSwitch
小部件的主要属性包括:
value
: 开关的当前状态,true
表示开启,false
表示关闭。onChanged
: 当开关状态改变时调用的回调函数。activeColor
: 开关处于开启状态时的背景颜色。
三、自定义 CupertinoSwitch
CupertinoSwitch
可以用于各种自定义场景,例如:
CupertinoSwitch(
value: _switchValue,
onChanged: (value) {
setState(() {
_switchValue = value;
});
},
thumbColor: Color.fromARGB(255, 1, 29, 53), // 滑块颜色
activeColor: Colors.blue, // 滑块打开后的颜色
trackColor: Colors.grey, // 轨道颜色
)
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
2019-12-26 Qt 使用 MPV 开源播放器