#深入淺出學習eTs#（十）藍藥丸還是紅藥丸

本項目Gitee倉地址：深入淺出eTs學習: 帶大家深入淺出學習eTs (gitee.com)

一、需求分析

我們本章的內容選擇致敬黑客帝國，如果你處于主角的立場，你會選擇藍藥丸還是紅藥丸呢？本章節(jié)來構建一個選擇器，讓大家自己選擇接受現實還是沉入虛擬！

• 通過開關進行狀態(tài)選擇
• 按下同意簽署協議的聲明
• 對不同的選擇有不同的UI效果

二、控件介紹

主要使用到的是開關控件

Toggle官方文檔

組件提供勾選框樣式、狀態(tài)按鈕樣式及開關樣式。

說明： 該組件從API Version 8開始支持。后續(xù)版本如有新增內容，則采用上角標單獨標記該內容的起始版本。

interface ToggleInterface {
  (options: { type: ToggleType; isOn?: boolean }): ToggleAttribute;
}

復制

屬性

事件

通過對“改變”事件內的程序編寫，即可實現其它的互動,簡單樣例如下圖

@Entry @Component struct ToggleTest {
  build() {
    Column() {
      Toggle({type: ToggleType.Switch})
    }
    .width('100%')
    .height('100%')
  }
}

復制

效果如下：

三、UI設計

（1）圖片框放置

本內容我們首先要搭建一個基礎框架，還是使用我們的老樣子布局，在最上面先放一個圖片

相同的操作，還是先將圖片放到我們目錄這個位置，這樣就能調用資源文件了

來放置一個image控件，這里引入一個新概念，可以使用百分比的形式來設置控件（區(qū)別于之前使用像素點）

        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容器

同時預置了選擇觸發(fā)事件，之后備用，此時已經可以進行選擇操作

（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)
        }

復制

當按下不同的開關時（選擇不同的按鈕時，顯示不同的圖片）

四、系統(tǒng)展示

當你選擇紅色藥丸時，會進入黑客帝國，準備戰(zhàn)斗吧??！】

當你選擇藍色藥丸，那我們一起加入寶寶巴士，享受生活吧?。?/p>