本項目Gitee倉位址：深入淺出eTs學習: 帶大家深入淺出學習eTs (gitee.com)
一、控件基本屬性
在使用第一個控件前，我們需要了解一些控件都有哪些基礎屬性，比如說我們在Super Visual中使用過的長寬和字型大小等等，通用屬性有以下這些：
| 名稱 | 參數說明 | 預設值 | 描述 |
|---|---|---|---|
| width | Length | - | 設定元件自身的寬度，預設時使用元素自身内容需要的寬度。 |
| height | Length | - | 設定元件自身的高度，預設時使用元素自身内容需要的高度。 |
| size | { width?: Length, height?: Length } | - | 設定高寬尺寸。 |
| padding | { top?: Length, right?: Length, bottom?: Length, left?: Length } | Length | 設定内邊距屬性。 參數為Length類型時，四個方向内邊距同時生效。 | |
| margin | { top?: Length, right?: Length, bottom?: Length, left?: Length } | Length | 設定外邊距屬性。 參數為Length類型時，四個方向外邊距同時生效。 | |
| constraintSize | { minWidth?: Length, maxWidth?: Length, minHeight?: Length, maxHeight?: Length } | { minWidth: 0, maxWidth: Infinity, minHeight: 0, maxHeight: Infinity } | 設定限制尺寸，元件布局時，進行尺寸範圍限制。 |
| layoutWeight | number | 容器尺寸确定時，元素與兄弟節點主軸布局尺寸按照權重進行配置設定，忽略本身尺寸設定。 > 說明： > 僅在Row/Column/Flex布局中生效。 |
通過這些可以對元件的大小，元件内，元件外以及聯合邊距的内容進行調整。
這裡再引入一個強制位移（之後可能會多次用到）
| 名稱 | 參數類型 | 預設值 | 描述 |
|---|---|---|---|
| align | Alignment | Center | 設定元素内容的對齊方式，隻有當設定的width和height大小超過元素本身内容大小時生效。 |
| direction | Direction | Auto | 設定元素水準方向的布局，可選值參照Direction枚舉說明。 |
| position | { x: Length, y: Length } | - | 使用絕對定位，設定元素錨點相對于父容器頂部起點偏移位置。在布局容器中，設定該屬性不影響父容器布局，僅在繪制時進行位置調整。 |
| markAnchor | { x: Length, y: Length } | { x: 0, y: 0 } | 設定元素在位置定位時的錨點，以元素頂部起點作為基準點進行偏移。 |
| offset | { x: Length, y: Length } | { x: 0, y: 0 } | 相對布局完成位置坐标偏移量，設定該屬性，不影響父容器布局，僅在繪制時進行位置調整。 |
二、标簽控件
Text：官方文檔
顯示一段文本的元件。
在之前的拖拽式UI中我們已經使用過了該控件，通過修改Content屬性即可達到修改文本内容的效果，他的其它屬性太多了，這裡可以看上面的官方文檔。
如上圖，eTs控件的基本調用方式是
interface TextInterface {
(content?: string | Resource): TextAttribute;
}
即首先聲明一下我們是使用的什麼控件（标簽、按鈕、繪畫等等），然後在下面通過點+内容的形式，對基本屬性進行說明，如上對字型大小和背景顔色實作了說明。
其中content是顯示的内容：
Text("Hello, eTs")
Text('Hello, LalHan')
.width('100%')
.textAlign(TextAlign.Center)
Text('大家一起深入淺出學習eTs,記得關注我')
.maxLines(1)
.textOverflow({overflow: TextOverflow.Ellipsis})
實作的效果如下圖：
三、按鈕控件
Button:官方文檔
按鈕元件，可快速建立不同樣式的按鈕。
interface ButtonInterface {
(): ButtonAttribute;
(options: ButtonOptions): ButtonAttribute;
(label: ResourceStr, options?: ButtonOptions): ButtonAttribute;
}
其中顯示内容主要由label控制
Button('學習ets')
.height(60)
.width(200)
.fontSize(30)
.backgroundColor('#aabbcc')
四、組合應用
本章節把Text和Button會結合起來，實作一個點選改變數字的Demo
此時按鈕需要引入一個點選屬性
事件
| 名稱 | 支援冒泡 | 功能描述 |
|---|---|---|
| onClick(callback: (event?: ClickEvent) => void) | 否 | 點選動作觸發該方法調用，event參數見ClickEvent介紹。 |
ClickEvent對象說明
| 屬性名稱 | 類型 | 描述 |
|---|---|---|
| screenX | number | 點選點相對于裝置螢幕左邊沿的X坐标。 |
| screenY | number | 點選點相對于裝置螢幕上邊沿的Y坐标。 |
| x | number | 點選點相對于被點選元素左邊沿的X坐标。 |
| y | number | 點選點相對于被點選元素上邊沿的Y坐标。 |
| target8+ | EventTarget | 被點選元素對象。 |
| timestamp | number | 事件時間戳。 |
在上面的程式中加入一個onclik()
Button('學習ets')
.height(60)
.width(200)
.fontSize(30)
.backgroundColor('#aabbcc')
.onClick(() => {
})
此時如果想點下按鈕，更改Text的顯示内容，那麼需要把Text的顯示内容設定為一個變量
@State message: string = '點選我後改變内容'
這個需要放置在初始化的地方
此時把更改内容的程式加入到按鍵中，将Text的屬性給到變量
Text(this.message)
.maxLines(2)
.fontSize(30)
Button('學習ets')
.height(60)
.width(200)
.fontSize(30)
.backgroundColor('#aabbcc')
.onClick(() => {
this.message = "已經改變了喔"
})
在點選後對message的變量進行修改，進行測試
五、測試效果
如上方測試，已經實作了動态效果
本文作者：程皖Orz