深入淺出學(xué)習(xí)eTs之吃藥鬧鐘定時(shí)功能實(shí)現(xiàn)

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

一、需求分析

我們本章節(jié)要實(shí)現(xiàn)一個(gè)鬧鐘功能，實(shí)現(xiàn)鬧鐘定時(shí)，提醒大家吃藥（最好不需要吃藥喔），功能分析：

時(shí)間選擇控件

類(lèi)似手機(jī)的鬧鐘UI

滾動(dòng)條播放消息

設(shè)定后進(jìn)行提示

二、控件介紹

這里我們要用到的是時(shí)間選擇控件：

TimePicker：官方文檔

滾動(dòng)選擇時(shí)間的組件。

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

TimePicker 是選擇時(shí)間的滑動(dòng)選擇器組件，默認(rèn)以 00:00 至 23:59 的時(shí)間區(qū)創(chuàng)建滑動(dòng)選擇器
  interface TimePickerInterface {
  (options?: TimePickerOptions): TimePickerAttribute;
}

declare interface TimePickerOptions {
  selected?: Date;
}

簡(jiǎn)單使用樣例：

TimePicker({selected: new Date()}) // 設(shè)置默認(rèn)當(dāng)前時(shí)間
  .width(200)
  .height(120)
  .backgroundColor('#aabbcc')

Marquee:官方文檔

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

跑馬燈組件，用于滾動(dòng)展示一段單行文本，僅當(dāng)文本內(nèi)容寬度超過(guò)跑馬燈組件寬度時(shí)滾動(dòng)。

接口

Marquee(value: { start: boolean, step?: number, loop?: number, fromStart?: boolean, src: string })

參數(shù)

三、UI設(shè)計(jì)

（1）背景顏色

我想實(shí)現(xiàn)一個(gè)純白好看的界面，這次選擇使用灰色打底

    Row(){}
	}.width('100%')
    .height('100%')
    .backgroundColor('rgba(241, 243, 245, 0.95)')

并且我們本次要做一個(gè)橫屏下的開(kāi)發(fā)，如何在預(yù)覽器中切換橫豎屏（看下圖）

（2）滾動(dòng)條

        Marquee({
          start: true,
          step: 36,
          loop: -1,
          fromStart: true,
          src: '請(qǐng)大家填寫(xiě)鬧鐘信息'
        })
          .width(600)
          .height(50)
          .fontSize(35)
          .allowScale(false)
          .fontWeight(FontWeight.Bold)
          .backgroundColor(Color.White)
          .margin({bottom:40,left:100})
          .borderRadius(30)

在這里引入了圓角的屬性borderRadius：可以把矩形變?yōu)閳A角矩形，更貼近圓形的UI更符合當(dāng)前的科技發(fā)展與生活

（3）時(shí)間選擇條

        Row() {
          Text('設(shè)置鬧鐘時(shí)間（24小時(shí)）：').fontSize(20)
          Blank()
          TimePicker({
          })
            .width('100vp')
            .height('100vp')
            .useMilitaryTime(true)
            .onChange((date: TimePickerResult) => {

            })
          Text('分').fontSize(18)
          Toggle({ type: ToggleType.Switch })

        }.width('500vp').backgroundColor(0xFFFFFF).padding({ left: 15 }).borderRadius(30)
        .margin({top:30})

這里放置了提示按鈕，中間間距放置了空的內(nèi)容，后面為時(shí)間選擇器，之后是之前學(xué)過(guò)的開(kāi)關(guān)器件

（4）消息提示

我們這里選擇使用Toast來(lái)實(shí)現(xiàn)交互提示

declare namespace prompt {
  // 顯示一個(gè)Toast
  function showToast(options: ShowToastOptions):void;
}

interface ShowToastOptions { // Toast配置參數(shù)
  message: string;           // Toast顯示文本
  duration?: number;         // Toast顯示時(shí)長(zhǎng)
  bottom?: string | number;  // Toast距離屏幕底部距離
}

在本系統(tǒng)中，當(dāng)選擇好時(shí)間以后，點(diǎn)擊開(kāi)關(guān)，此時(shí)提示鬧鐘已經(jīng)設(shè)置好

四、系統(tǒng)演示

如上圖，已經(jīng)實(shí)現(xiàn)了全部?jī)?nèi)容

編輯：黃飛