第一百七十七回 如何创建垂直方向的Switch

最新推荐文章于 2025-04-06 16:08:17 发布
最新推荐文章于 2025-04-06 16:08:17 发布
阅读量167 收藏
点赞数
分类专栏： talk8的私房菜 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/talk_8/article/details/134564589
版权
本文档介绍了如何在前端实现垂直方向的Switch组件。在官方组件无此功能的情况下，探讨了通过第三方组件、旋转现有组件及代码实现等方法，并提供了示例代码，帮助开发者实现垂直切换效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录


我们在上一章回中介绍了"如何创建渐变色边角"相关的内容，本章回中将介绍" 如何创建垂直方向的Switch".闲话休提，让我们一起Talk Flutter吧。

1. 概念介绍

我们在前面章回中介绍了Switch组件相关的内容，不过该组件只能在水平方向上使用,通俗点讲就是只能沿着水平方向滑动Switch。如果想沿着垂直文峰滑动Switch怎么办呢？看官莫急，本章回中将介绍如何在垂直方向上使用该组件。

2. 思路与方法

2.1 实现思路

我们想要在垂直方向上使用该组件首先想到是组件的属性，不过查看文档和源代码后没有发现可以控制滑动方向的属性。

既然此路走不通那么就看看pub.dev上有没有三方提供的组件，功夫不负有心人，我们还真找到了一个三方包提供的组件SlideSwitcher，该组件提供了direction属性来控制组件的方向.属性值有水平和垂直两个数值，默认是水平方向。大家可以自己动手去使用该组件，详细的用法参考组件给的示例代码就可以，下面的图形是我们使用该组件创建水平和垂直方

了解本专栏 订阅专栏 解锁全文 超级会员免费看
Qt开发经验总结
草上爬的博客
12-02 1万+
增加了很多轮子，同时原有模块拆分的也更细致，估计为了方便拓展个管理。把一些过度封装的东西移除了（比如同样的功能有多个函数），保证了只有一个函数执行该功能。把一些Qt5中兼容Qt4的方法废弃了，必须用Qt5中对应的新的函数。跟随时代脚步，增加了不少新特性以满足日益增长的客户需求。对某些模块和类型及处理进行了革命性的重写，运行效率提高不少。有参数类型的变化，比如 long * 到 qintptr * 等，更加适应后续的拓展以及同时对32 64位不同系统的兼容。
element ui中el-switch使用的坑
热门推荐
杨振洲的博客
08-07 1万+
需求说明 1、根据后台传值动态显示开关（0为关，1为开） 2、对开关进行操作时请求后台，需要传两个参数：id，type 需求描述 我先说我的需求，我想在列表的每一条添加多个 个开关，可以改当前一条数据的状态，并发送到服务端，并根据服务端返回的结果局部刷新当前页数据 期望结果 状态是后端返回给我的状态，分别是1和2，我先点击switch发送给后端这条数据的id，然后修改这一条数据的状态，而不是重新拿这个列表，如果后端返回失败的情况这个switch不做改变 解决方法 Swich默认是boolean类型，而后台
第一百七十九回 自定义SlideImageSwitch
talk_8的专栏
11-25 289
本章回主要介绍了SlideIamgeSwitch的概念以及如何去实现该组件，并且分享了实现该组件的相关经验和方法。
第十七章_模型压缩、加速及移动端部署
weixin_43897733的博客
06-13 2485
文章目录第十七章 模型压缩及移动端部署17.1 模型压缩理解17.2 为什么需要模型压缩和加速？17.3 模型压缩的必要性及可行性17.4 目前有哪些深度学习模型压缩方法？17.4.1 前端压缩和后端压缩对比17.4.2 网络剪枝17.4.3 典型剪枝方法对比17.4.4 网络蒸馏17.4.5 前端压缩17.4.6 后端压缩17.4.6 低秩分解17.4.7 总体压缩效果评价指标有哪些？17.4.8 几种轻量化网络结构对比17.4.9 网络压缩未来研究方向有哪些？17.5 目前有哪些深度学习模型优化加速方法
【后端】Java第一阶段学习总结
lcukyNwa的博客
07-18 1803
JAVA基础篇
第05章 图形基础
心情第一
08-22 683
图形设备接口（GDI：Graphics Device Interface）是Windows的子系统，它负责在视讯显示器和打印机上显示图形。正如您所认为的那样，GDI是Windows非常重要的部分。不只您为Windows编写的应用系统在显示视觉信息时使用GDI，就连Windows本身也使用GDI来显示使用者接口对象，诸如菜单、滚动条、图标和鼠标光标。 不幸的是，如果要对GDI进行全面的讲述，将需要...
第17章 文字和字体
心情第一
08-24 1858
显示文字是本书所要解决的首要问题，现在我们来研究Microsoft Windows中各种有效字体和字体大小的使用方法以及调整文字的方式。 Windows 3.1发表的TrueType使程序写作者和使用者以灵活的方式处理文字的能力大幅增强。TrueType是轮廓字体技术，由Apple Computer公司和Microsoft公司开发，并被许多字体制造商支持。由于TrueType字体能够连续缩放，并...
实现LinearLayout（垂直布局，Gravity内容排布）
kross
05-31 3688
首先上Gravity的代码，Android原版的Gravity搞得挺复杂的，太高端了。但基本思路是使用位运算来做常量，我就自己消化了一些，按自己的思路来实现。 先上代码，在做分析。 1 package kross.android.widget; 2 3 /** 4 * 重力属性，控制容器内子控件的排布方式 5 * @author kross(krossford@fo
微服务架构实战第十节 微服务的模拟组件测试和契约服务测试
fegus的博客
05-24 972
32 测试方案：如何正确理解针对微服务的测试解决方案？ 作为整个课程最后一部分内容，我们将讨论微服务架构中的测试解决方案。对于微服务而言，测试是一个难点，也是经常被忽略的一套技术体系。当系统中存在多个微服务时，除了常见的针对单个服务的单元测试和集成测试之外，面对不同服务之间进行交互和集成的场景，我们还需要引入端到端测试来确保服务定义和协议级别的正确性和稳定性。今天，我们就将基于这些测试需求给出针对微服务的测试方案。 微服务测试的系统方法 测试工作包含很多类型，例如常见的单元测试、集成测试等，本课程无意对这
第一章 计算机网络概述[知识点+课后习题+练习题]
teletubbies的博客
04-05 1万+
概念和功能 21世纪一些重要特征:数字化、网络化、信息化，它是一个以网络为核心的信息时代。 三网融合：电信网络、有线电视网络、计算机网络 四网融合：电网、电信网络、有线电视网络、计算机网络 计算机网络（简称为网络）由若干结点和连接这些结点的链路组成 计算机网络∶是一个将分散的、具有独立功能的计算机系统，通过通信设备与线路连接起来，由功能完善的软件实现资源共享和信息传递的系统。 计算机网络是互连的、自治的计算机集合 互连–通过通信链路互联互通 自治–无主从关系 计算机网络功能： （1）数据通信 （2）资源共享
《第一行代码Android》笔记
陀思妥耶夫斯基和海德格尔伴我勇敢存在
09-20 4074
第1章 开始启程，你的第一行Android代码1.1 了解全貌，Android王国简介 Android系统是基于Linux 2.6内核的，这一层为Android设备的各种硬件提供了底层的驱动，如显示驱动、音频驱动、照相机驱动、蓝牙驱动、Wi-Fi驱动、电源管理等。 另外Android运行时库还包含了Dalvik虚拟机，它使得每一个Android应用都能运行在独立的进程当中，并且拥有一个自己的Dalv
如何使用threejs实现第一人称视角的移动
weixin_38166686的博客
09-22 4826
在数据可视化领域利用webgl来创建三维场景或VR已经越来越普遍，各种开发框架也应运而生。今天我们就通过最基本的threejs来完成第一人称视角的场景巡检功能。如果你是一位threejs的初学者或正打算入门，我强烈推荐你仔细阅读本文并在我的代码基础之上继续深入学习。因为它将是你能够在网上找到的最好的免费中文教程，通过本文你可以学习到一些基本的三维理论，threejs的api接口以及你应该...
C语言Windows程序设计 -> 第十四天 -> 文本输入框
weixin_34185364的博客
12-31 2799
C语言Windows程序设计 -> 第十四天 -> 文本输入框 一、文本输入框的介绍    从用户那里获取文字信息是与用户进行交互的一个重要组成部分, 输入框的作用则是搭建起用户与软件交互的一个直接桥梁之一。        通常, 当我们点击输入框的编辑区域时, 输入框中会出现插入光标，我们可以直接在输入框中输入文字或文本信息。 我们还可以使用一些快捷键例如Ctrl + C(复制)、...
第26节 计算机网络知识
mingming20547的博客
08-27 5041
第26节 计算机网络知识 计算机网络知识 1[单项选择题]Internet上的域名解析服务(DNS)完成域名与IP地址之间的翻译。执行域名服务的服务器被称为DNS 服务器。小张在Internet的某主机上用nslookup命令查询“中国计算机技术职业资格网”的网站域名，所用的查询命令和得到的结果如下： nslookup www．rkb．gov．cn Server: xd-cache-1．bjt...
解答严格模式
最新发布
qq_53922901的博客
04-06 227
在严格模式下代码必须严格符合规范。
【万字总结】前端全方位性能优化指南（完结篇）——自适应优化系统、遗传算法调参、Service Worker智能降级方案
yong_su的博客
04-03 965
fill:#333;color:#333;color:#333;fill:none;网络中断缓存缺失完全离线正常模式基础功能模式核心内容模式静态兜底页。
基于Jsp+Bean+Servlet 实现（Web）简单的网上购书系统
神仙别闹的自留地
04-02 565
使用 Jsp+Bean+Servlet，设计一个简单的网上购书系 统,其中实现了用户注册功能、用户登录功能、信息查询功能、信息 浏览功能。由于数据库设置外键出错，最终未实现购物车功能，项目 开发过程中使用了 JSP、JavaBean、Servlet、JDBC、MySQL、动态表 格技术、分页技术，由于时间原因暂时未加入 Filter、Cookies、正 则表达式和验证码等功能。开发工具：myeclipse、MySQL、NaviCat、Git。
【Tauri2】014——简单使用listen和emit
qq_63401240的博客
04-04 842
实际上，除了emit和listen，还有emitTo(emit_to)、once之类的还有取消监听unlisten之类的方法。以后慢慢使用。当然，也不一定要在通信函数中，也可以在setup或者其他地方。t=P1C7t=P1C7t=P1C7t=P1C7t=P1C7t=P1C7t=P1C7【Tauri2】013——前端Window Event与创建Window-优快云博客https://blog.youkuaiyun.com/qq_63401240/article/details/146981362?
OWASP Top 10 防护：Web 应用安全的关键策略
TechEnthusiast的博客
04-02 251
本文提供的信息仅用于教育目的和合法的安全实践。请务必在法律和道德的框架内使用这些知识。未经授权对系统进行测试或利用漏洞是违法的，可能导致严重的法律后果。作为开发者和安全专业人员，我们有责任以负责任的方式应用这些知识，以提高系统的安全性，而不是用于恶意目的。请始终获得适当的授权，并遵守所有相关法律和道德准则。OWASP（Open Web Application Security Project）Top 10 是一份广受认可的 Web 应用安全风险列表。
lvgl Switch 设置垂直方向
07-22
要将LVGL开关（Switch）设置为垂直方向，你可以使用以下代码： ```c lv_obj_t *sw = lv_switch_create(lv_scr_act(), NULL); // 创建开关对象 lv_obj_set_size(sw, 100, 30); // 设置开关的尺寸，宽度较大以适应垂直布局 lv_obj_align(sw, NULL, LV_ALIGN_CENTER, 0, 0); // 将开关居中对齐 lv_obj_set_style_local_transform_angle(sw, LV_SWITCH_PART_BG, LV_STATE_DEFAULT, 90); // 将背景旋转90度，实现垂直方向 lv_obj_set_style_local_transform_angle(sw, LV_SWITCH_PART_INDIC, LV_STATE_DEFAULT, 90); // 将指示器旋转90度，实现垂直方向 ``` 通过上述代码，你可以将LVGL开关设置为垂直方向。首先，创建开关对象并设置其尺寸和对齐方式。然后，使用`lv_obj_set_style_local_transform_angle()`函数来将背景和指示器部分旋转90度，以实现垂直方向的显示。 希望对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

talk_8

真诚赞赏，手有余香

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值