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

一、控件基本屬性

在使用第一個控件前，我們需要了解一些控件都有哪些基礎(chǔ)屬性，比如說我們在Super Visual中使用過的長寬和字體大小等等，通用屬性有以下這些：

通過這些可以對組件的大小，組件內(nèi)，組件外以及聯(lián)合邊距的內(nèi)容進(jìn)行調(diào)整。

這里再引入一個強(qiáng)制位移（之后可能會多次用到）

二、標(biāo)簽控件

Text：官方文檔

顯示一段文本的組件。

在之前的拖拽式UI中我們已經(jīng)使用過了該控件，通過修改Content屬性即可達(dá)到修改文本內(nèi)容的效果，他的其它屬性太多了，這里可以看上面的官方文檔。

如上圖，eTs控件的基本調(diào)用方式是

interface TextInterface {
  (content?: string | Resource): TextAttribute;
}

即首先聲明一下我們是使用的什么控件（標(biāo)簽、按鈕、繪畫等等），然后在下面通過點(diǎn)+內(nèi)容的形式，對基本屬性進(jìn)行說明，如上對字體大小和背景顏色實(shí)現(xiàn)了說明。

其中content是顯示的內(nèi)容：

Text("Hello, eTs")

Text('Hello, LalHan')
  .width('100%')
  .textAlign(TextAlign.Center)

Text('大家一起深入淺出學(xué)習(xí)eTs,記得關(guān)注我')
  .maxLines(1)
  .textOverflow({overflow: TextOverflow.Ellipsis})

實(shí)現(xiàn)的效果如下圖：

三、按鈕控件

Button:官方文檔

按鈕組件，可快速創(chuàng)建不同樣式的按鈕。

interface ButtonInterface {
  (): ButtonAttribute;
  (options: ButtonOptions): ButtonAttribute;
  (label: ResourceStr, options?: ButtonOptions): ButtonAttribute;
}

其中顯示內(nèi)容主要由label控制

Button('學(xué)習(xí)ets')
          .height(60)
          .width(200)
          .fontSize(30)
          .backgroundColor('#aabbcc')

四、組合應(yīng)用

本章節(jié)把Text和Button會結(jié)合起來，實(shí)現(xiàn)一個點(diǎn)擊改變數(shù)字的Demo

此時按鈕需要引入一個點(diǎn)擊屬性

事件

ClickEvent對象說明

在上面的程序中加入一個onclik()

        Button('學(xué)習(xí)ets')
          .height(60)
          .width(200)
          .fontSize(30)
          .backgroundColor('#aabbcc')
          .onClick(() => {
          })

此時如果想點(diǎn)下按鈕，更改Text的顯示內(nèi)容，那么需要把Text的顯示內(nèi)容設(shè)置為一個變量

@State message: string = '點(diǎn)擊我后改變內(nèi)容'

這個需要放置在初始化的地方

此時把更改內(nèi)容的程序加入到按鍵中，將Text的屬性給到變量

Text(this.message)

          .maxLines(2)
          .fontSize(30)
        Button('學(xué)習(xí)ets')
          .height(60)
          .width(200)
          .fontSize(30)
          .backgroundColor('#aabbcc')
          .onClick(() => {
            this.message = "已經(jīng)改變了喔"
          })

在點(diǎn)擊后對message的變量進(jìn)行修改，進(jìn)行測試

五、測試效果

如上方測試，已經(jīng)實(shí)現(xiàn)了動態(tài)效果

編輯：黃飛