本項目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)
}
當按下不同的開關時（選擇不同的按鈕時，顯示不同的圖檔）
四、系統展示
當你選擇紅色藥丸時，會進入黑客帝國，準備戰鬥吧！！】
當你選擇藍色藥丸，那我們一起加入寶寶巴士，享受生活吧！！
本文作者：程皖Orz