#深入淺出學(xué)習(xí)eTs#（十）藍(lán)藥丸還是紅藥丸

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

一、需求分析

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

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

二、控件介紹

主要使用到的是開關(guān)控件

Toggle官方文檔

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

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

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

復(fù)制

屬性

事件

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

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

復(fù)制

效果如下：

三、UI設(shè)計

（1）圖片框放置

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

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

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

        Image($r("app.media.1"))
          .width('100%')				//使用百分比進行大小調(diào)整
          .height(240)

復(fù)制

（2）標(biāo)簽放置

UI界面上肯定是要放置一些提示用語的，比如說這個內(nèi)容是想要干什么用，這里放置一個UI提示內(nèi)容

        Text('請選擇你的藥丸')
          .fontSize(30)
          .margin({top:10})
          .backgroundColor(Color.Gray)
          .fontColor(Color.White)

復(fù)制

這里使用了字體大小、邊緣間距、背景顏色、字體顏色四個屬性

（3）開關(guān)放置

我們需要放置兩個開關(guān)，即可以選擇兩種藥丸，實現(xiàn)選擇

        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("藍(lán)色")
            .fontSize(30)
            .fontColor(Color.Blue)
        }

復(fù)制

因為藥丸想橫向擺放，需要放置一個Row容器

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

（4）同意協(xié)議

同意協(xié)議是使用的開關(guān)的另一個類型版本

        Row()
        {
          Toggle({type: ToggleType.Checkbox})
            .size({ width: 28, height: 28 })
          Text('我同意選擇，絕不后悔！')
            .fontSize(20)
        }

復(fù)制

因為上下間距太短，這里扯入了一個新的控件：Blank()

        Blank()
          .height(150)
        Row()
        {
          Toggle({type: ToggleType.Checkbox})
            .size({ width: 28, height: 28 })
          Text('我同意選擇，絕不后悔！')
            .fontSize(20)
        }

復(fù)制

這樣更貼近我們點擊那些不得不同意的協(xié)議類型

（5）切換動效

這里選擇的動效是切換圖片

  @State Img_Src: Resource = $r("app.media.1")

復(fù)制

此時也將圖片放入指定目錄

然后調(diào)整程序

        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("藍(lán)色")
            .fontSize(30)
            .fontColor(Color.Blue)
        }

復(fù)制

當(dāng)按下不同的開關(guān)時（選擇不同的按鈕時，顯示不同的圖片）

四、系統(tǒng)展示

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

當(dāng)你選擇藍(lán)色藥丸，那我們一起加入寶寶巴士，享受生活吧?。?/p>