Flutter 开关属性

server/2024/12/21 5:47:36/

Switch 构造函数的样式

const Switch({Key? key,required this.value,           // 当前开关的状态,布尔值(true 表示打开,false 表示关闭)required this.onChanged,       // 状态切换时的回调函数,执行您定义的逻辑this.activeColor,              // 开关打开时圆形部分的颜色this.activeTrackColor,         // 开关打开时轨道的颜色this.inactiveThumbColor,       // 开关关闭时圆形部分的颜色this.inactiveTrackColor,       // 开关关闭时轨道的颜色this.activeThumbImage,         // 开关打开时圆形部分的图片this.inactiveThumbImage,       // 开关关闭时圆形部分的图片this.materialTapTargetSize,    // 调整触摸区域的大小this.dragStartBehavior = DragStartBehavior.start, // 控制拖动行为
});

CupertinoSwitch 构造函数的样式

const CupertinoSwitch({Key? key,                        // 小部件的唯一标识符required this.value,             // 当前开关的状态,布尔值,true 为打开,false 为关闭required this.onChanged,         // 当开关状态改变时的回调函数,接受新的状态 (bool) 作为参数this.activeColor = CupertinoColors.systemGreen, // 开关打开时,圆形部分的颜色(默认为绿色)this.trackColor,                 // 开关关闭时轨道的颜色(默认浅灰色,某些版本需要自行设置)this.thumbColor,                 // 开关滑块的颜色(默认为白色)this.dragStartBehavior = DragStartBehavior.start, // 拖动行为,定义用户如何开始拖动开关
});

CupertinoSwitch和Switch的区别

属性CupertinoSwitchSwitch
平台风格模拟 iOS 系统的开关样式,符合 iOS 设计规范主要是 Android 风格的开关,符合 Material Design 规范
默认外观具有 iOS 风格的滑块和轨道,滑块为圆形,整体呈现圆滑且简洁的外观具有 Material Design 风格,开关较大,颜色和样式上更偏向 Android
外观定制支持 activeColortrackColorthumbColordragStartBehavior 等定制项支持 activeColorinactiveTrackColorinactiveThumbColoractiveTrackColorthumbColor 等定制项
使用场景通常在 iOS 风格的应用中使用通常在 Android 风格的应用中使用或跨平台应用中使用
交互体验更符合 iOS 的交互方式,支持滑动并且视觉上简洁适合 Android 风格的交互,支持点击或拖动触发
位置位于 flutter/cupertino.dart 包中位于 flutter/material.dart 包中
自定义样式CupertinoSwitch 的外观与默认值深度绑定,更难做到深度定制Switch 更灵活,允许更详细的颜色、轨道、滑块样式定制

示例代码


import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: SwitchDemo(),);}
}class SwitchDemo extends StatefulWidget {@override_SwitchDemoState createState() => _SwitchDemoState();
}class _SwitchDemoState extends State<SwitchDemo> {bool _isSwitched = false;@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Switch 示例')),body: Center(child: Column(children: [Switch(value: _isSwitched,onChanged: (bool value) {setState(() {_isSwitched = value;});},activeColor: Colors.green, // 打开时的颜色inactiveThumbColor: Colors.red, // 关闭时圆形部分的颜色inactiveTrackColor: Colors.grey, // 关闭时轨道的颜色),CupertinoSwitch(value: _isSwitched,onChanged: (bool value) {setState(() {_isSwitched = value;});},activeColor: CupertinoColors.activeGreen,trackColor: CupertinoColors.systemGrey,)],),),);}
}


http://www.ppmy.cn/server/151876.html

相关文章

裸金属服务器和传统服务器的区别

本文将来探讨一下裸金属服务器与传统服务器两者之间的区别&#xff0c;并且讲解一下裸金属服务器和传统服务器各自的优势都有哪些&#xff01; 首先&#xff0c;裸金属服务器是一种没有虚拟化层的服务器架构&#xff0c;用户能够直接访问和管理服务器的物理资源&#xff1b;而传…

道路运输企业安全生产管理人员安全考核试题

道路运输企业安全生产管理人员安全考核试题 一、单选题 题干&#xff1a;在公交车行驶过程中&#xff0c;乘客王某因与驾驶员发生矛盾&#xff0c;遂殴打驾驶员并抢夺方向盘&#xff0c;造成其他乘客受轻微伤&#xff0c;依照《中华人民共和国刑法》的规定&#xff0c;王某触…

ffmpeg使用方法

1.转换视频格式 cmd 打开视频所在目录 输入命令 ffmpeg -i 111.mp4 111.webm 前为原视频名字 后为目标格式视频名称 2.压缩图片 2-1 调整图片质量 ffmpeg -i input.jpg -q:v 5 output.jpg q:v的值范围从1&#xff08;最佳质量&#xff09;到31&#xff08;最差质量&…

复习打卡大数据篇——Hadoop HDFS 02

目录 1. HDFS辅助工具 2. namenode安全模式 1. HDFS辅助工具 跨集群数据拷贝 当我们需要跨集群进行文件数据的拷贝时可以用&#xff1a; hadoop distcp 集群1的某个文件路径 要拷贝到集群2的地址路径 文件归档工具archive 由于HDFS的块的数量取决于文件的大小和数量&…

基于微信小程序的小区疫情防控ssm+论文源码调试讲解

第2章 程序开发技术 2.1 Mysql数据库 为了更容易理解Mysql数据库&#xff0c;接下来就对其具备的主要特征进行描述。 &#xff08;1&#xff09;首选Mysql数据库也是为了节省开发资金&#xff0c;因为网络上对Mysql的源码都已进行了公开展示&#xff0c;开发者根据程序开发需…

Linux进行概念--进程的基本概念与基本操作

根据上一篇内容&#xff0c;在还没有学习进程之前&#xff0c;就问一下&#xff0c;操作系统是怎么管理进行进程管理的呢&#xff1f;很简单&#xff0c;先把进程描述起来&#xff0c;再把进程组织起来。 那什么是进程呢&#xff1f;这里就先简单了解一些。 基本概念与基本操作…

二叉树总结

涉及到二叉树的构造&#xff0c;无论普通二叉树还是二叉搜索树一定前序&#xff0c;都是先构造中节点。 求普通二叉树的属性&#xff0c;一般是后序&#xff0c;一般要通过递归函数的返回值做计算。 求二叉搜索树的属性&#xff0c;一定是中序了&#xff0c;要不白瞎了有序性…

Web网站开发模式的基本理解

Web开发模式中&#xff0c;服务器端渲染和前后端分离是两种常见的开发模式&#xff0c;它们各自具有独特的概念、优点和缺点。 服务器端渲染 概念&#xff1a; 服务器端渲染是指在服务器端将页面渲染成HTML字符串&#xff0c;然后将其发送到客户端进行展示的过程。在这种模式…