#深入浅出学习eTs#（十）蓝药丸还是红药丸
本项目gitee仓地址：深入浅出ets学习: 带大家深入浅出学习ets (gitee.com) 一、需求分析
我们本章的内容选择致敬黑客帝国，如果你处于主角的立场，你会选择蓝药丸还是红药丸呢？本章节来构建一个选择器，让大家自己选择接受现实还是沉入虚拟！
通过开关进行状态选择 按下同意签署协议的声明 对不同的选择有不同的ui效果 二、控件介绍 主要使用到的是开关控件
toggle官方文档 组件提供勾选框样式、状态按钮样式及开关样式。
说明： 该组件从api version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
interface toggleinterface { (options: { type: toggletype; ison?: boolean }): toggleattribute;} 复制
参数名 参数类型 必填 默认值 参数描述
type toggletype 是 - 开关类型。
ison boolean 否 false 开关是否打开，true：打开，false：关闭。
属性 名称 参数 默认值 参数描述
selectedcolor color - 设置组件打开状态的背景颜色。
switchpointcolor color - 设置switch类型的圆形滑块颜色。 > 说明： > 仅对type为toggletype.switch生效。
事件 名称 功能描述
onchange(callback: (ison: boolean) => void) 开关状态切换时触发该事件。
通过对“改变”事件内的程序编写，即可实现其它的互动,简单样例如下图
@entry @component struct toggletest { build() { column() { toggle({type: toggletype.switch}) } .width('100%') .height('100%') }} 复制
效果如下：
三、ui设计 （1）图片框放置 本内容我们首先要搭建一个基础框架，还是使用我们的老样子布局，在最上面先放一个图片
相同的操作，还是先将图片放到我们目录这个位置，这样就能调用资源文件了
来放置一个image控件，这里引入一个新概念，可以使用百分比的形式来设置控件（区别于之前使用像素点）
image($r(app.media.1)) .width('100%') //使用百分比进行大小调整 .height(240) 复制
（2）标签放置 ui界面上肯定是要放置一些提示用语的，比如说这个内容是想要干什么用，这里放置一个ui提示内容
text('请选择你的药丸') .fontsize(30) .margin({top:10}) .backgroundcolor(color.gray) .fontcolor(color.white) 复制
这里使用了字体大小、边缘间距、背景颜色、字体颜色四个属性
（3）开关放置 我们需要放置两个开关，即可以选择两种药丸，实现选择
row() { toggle({type: toggletype.switch}) .selectedcolor(color.red) .switchpointcolor(color.red) .onchange((ison: boolean) => { console.info('component status:' + ison) }) text(红色) .fontsize(30) .fontcolor(color.red) toggle({type: toggletype.switch}) .selectedcolor(color.blue) .switchpointcolor(color.blue) .onchange((ison: boolean) => { console.info('component status:' + ison) }) text(蓝色) .fontsize(30) .fontcolor(color.blue) } 复制
因为药丸想横向摆放，需要放置一个row容器
同时预置了选择触发事件，之后备用，此时已经可以进行选择操作
（4）同意协议 同意协议是使用的开关的另一个类型版本
row() { toggle({type: toggletype.checkbox}) .size({ width: 28, height: 28 }) text('我同意选择，绝不后悔！') .fontsize(20) } 复制
因为上下间距太短，这里扯入了一个新的控件：blank()
blank() .height(150) row() { toggle({type: toggletype.checkbox}) .size({ width: 28, height: 28 }) text('我同意选择，绝不后悔！') .fontsize(20) } 复制
这样更贴近我们点击那些不得不同意的协议类型
（5）切换动效 这里选择的动效是切换图片
@state img_src: resource = $r(app.media.1) 复制
此时也将图片放入指定目录
然后调整程序
row() { toggle({type: toggletype.switch}) .selectedcolor(color.red) .switchpointcolor(color.red) .onchange((ison: boolean) => { this.img_src = $r(app.media.9) }) text(红色) .fontsize(30) .fontcolor(color.red) toggle({type: toggletype.switch}) .selectedcolor(color.blue) .switchpointcolor(color.blue) .onchange((ison: boolean) => { this.img_src = $r(app.media.10) }) text(蓝色) .fontsize(30) .fontcolor(color.blue) } 复制
当按下不同的开关时（选择不同的按钮时，显示不同的图片）
四、系统展示
当你选择红色药丸时，会进入黑客帝国，准备战斗吧！！】
当你选择蓝色药丸，那我们一起加入宝宝巴士，享受生活吧！！
红魔3 | 2899起,6.65英寸AMOLED面板,DC调光,屏刷新率90Hz,还支持HDR
光线传感器有哪些分类
凌云光携多款高端产品解决方案和明星产品亮相ACP 2023
13.56MHz非接触式读卡器芯片DP5321+
dfrobot2.7英寸12864 OLED液晶显示模块介绍
#深入浅出学习eTs#（十）蓝药丸还是红药丸
宝克力®模塑料助保点推出“隐形”防损门：优雅光效无缝融入店内陈设
RFX2401C 2.4GHz功放PA前端模块
“雷军号”亮相:上次是特斯拉 这次是蔚来汽车
华为HMS开启众测 将加速孵化鸿蒙OS
物联网项目必需的团队合作方案解析
细碎机与液力耦合器连接处轴径键槽磨损的修复方法
精彩回顾 |国民技术多元化产品亮相2023慕尼黑上海电子展
现代汽车虚拟研发程序开启，助力汽车研发流程的创新
展讯发布业界首款双卡双待TD-SCDMA手机方案
耦合场-T型管-稳态热流固分析
pcb行业现状及未来发展趋势
智能音箱小雅Nano首发 能免费听喜马拉雅会员精品
创维彩电改进建议
张汝京辞职，中芯该何去何从？
我们本章的内容选择致敬黑客帝国，如果你处于主角的立场，你会选择蓝药丸还是红药丸呢？本章节来构建一个选择器，让大家自己选择接受现实还是沉入虚拟！
通过开关进行状态选择 按下同意签署协议的声明 对不同的选择有不同的ui效果 二、控件介绍 主要使用到的是开关控件
toggle官方文档 组件提供勾选框样式、状态按钮样式及开关样式。
说明： 该组件从api version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
interface toggleinterface { (options: { type: toggletype; ison?: boolean }): toggleattribute;} 复制
参数名 参数类型 必填 默认值 参数描述
type toggletype 是 - 开关类型。
ison boolean 否 false 开关是否打开，true：打开，false：关闭。
属性 名称 参数 默认值 参数描述
selectedcolor color - 设置组件打开状态的背景颜色。
switchpointcolor color - 设置switch类型的圆形滑块颜色。 > 说明： > 仅对type为toggletype.switch生效。
事件 名称 功能描述
onchange(callback: (ison: boolean) => void) 开关状态切换时触发该事件。
通过对“改变”事件内的程序编写，即可实现其它的互动,简单样例如下图
@entry @component struct toggletest { build() { column() { toggle({type: toggletype.switch}) } .width('100%') .height('100%') }} 复制
效果如下：
三、ui设计 （1）图片框放置 本内容我们首先要搭建一个基础框架，还是使用我们的老样子布局，在最上面先放一个图片
相同的操作，还是先将图片放到我们目录这个位置，这样就能调用资源文件了
来放置一个image控件，这里引入一个新概念，可以使用百分比的形式来设置控件（区别于之前使用像素点）
image($r(app.media.1)) .width('100%') //使用百分比进行大小调整 .height(240) 复制
（2）标签放置 ui界面上肯定是要放置一些提示用语的，比如说这个内容是想要干什么用，这里放置一个ui提示内容
text('请选择你的药丸') .fontsize(30) .margin({top:10}) .backgroundcolor(color.gray) .fontcolor(color.white) 复制
这里使用了字体大小、边缘间距、背景颜色、字体颜色四个属性
（3）开关放置 我们需要放置两个开关，即可以选择两种药丸，实现选择
row() { toggle({type: toggletype.switch}) .selectedcolor(color.red) .switchpointcolor(color.red) .onchange((ison: boolean) => { console.info('component status:' + ison) }) text(红色) .fontsize(30) .fontcolor(color.red) toggle({type: toggletype.switch}) .selectedcolor(color.blue) .switchpointcolor(color.blue) .onchange((ison: boolean) => { console.info('component status:' + ison) }) text(蓝色) .fontsize(30) .fontcolor(color.blue) } 复制
因为药丸想横向摆放，需要放置一个row容器
同时预置了选择触发事件，之后备用，此时已经可以进行选择操作
（4）同意协议 同意协议是使用的开关的另一个类型版本
row() { toggle({type: toggletype.checkbox}) .size({ width: 28, height: 28 }) text('我同意选择，绝不后悔！') .fontsize(20) } 复制
因为上下间距太短，这里扯入了一个新的控件：blank()
blank() .height(150) row() { toggle({type: toggletype.checkbox}) .size({ width: 28, height: 28 }) text('我同意选择，绝不后悔！') .fontsize(20) } 复制
这样更贴近我们点击那些不得不同意的协议类型
（5）切换动效 这里选择的动效是切换图片
@state img_src: resource = $r(app.media.1) 复制
此时也将图片放入指定目录
然后调整程序
row() { toggle({type: toggletype.switch}) .selectedcolor(color.red) .switchpointcolor(color.red) .onchange((ison: boolean) => { this.img_src = $r(app.media.9) }) text(红色) .fontsize(30) .fontcolor(color.red) toggle({type: toggletype.switch}) .selectedcolor(color.blue) .switchpointcolor(color.blue) .onchange((ison: boolean) => { this.img_src = $r(app.media.10) }) text(蓝色) .fontsize(30) .fontcolor(color.blue) } 复制
当按下不同的开关时（选择不同的按钮时，显示不同的图片）
四、系统展示
当你选择红色药丸时，会进入黑客帝国，准备战斗吧！！】
当你选择蓝色药丸，那我们一起加入宝宝巴士，享受生活吧！！
红魔3 | 2899起,6.65英寸AMOLED面板,DC调光,屏刷新率90Hz,还支持HDR
光线传感器有哪些分类
凌云光携多款高端产品解决方案和明星产品亮相ACP 2023
13.56MHz非接触式读卡器芯片DP5321+
dfrobot2.7英寸12864 OLED液晶显示模块介绍
#深入浅出学习eTs#（十）蓝药丸还是红药丸
宝克力®模塑料助保点推出“隐形”防损门：优雅光效无缝融入店内陈设
RFX2401C 2.4GHz功放PA前端模块
“雷军号”亮相:上次是特斯拉 这次是蔚来汽车
华为HMS开启众测 将加速孵化鸿蒙OS
物联网项目必需的团队合作方案解析
细碎机与液力耦合器连接处轴径键槽磨损的修复方法
精彩回顾 |国民技术多元化产品亮相2023慕尼黑上海电子展
现代汽车虚拟研发程序开启，助力汽车研发流程的创新
展讯发布业界首款双卡双待TD-SCDMA手机方案
耦合场-T型管-稳态热流固分析
pcb行业现状及未来发展趋势
智能音箱小雅Nano首发 能免费听喜马拉雅会员精品
创维彩电改进建议
张汝京辞职，中芯该何去何从？