鴻蒙（HarmonyOS）項目方舟框架（ArkUI）控件的部分公共屬性和事件

一、操作環(huán)境

操作系統(tǒng):? Windows 10 專業(yè)版

IDE:DevEco Studio 3.1

SDK:HarmonyOS 3.1

二、公共屬性

常用的公共屬性有：

寬(with)、高(height)、尺寸(size)、背景色(backgroudColor)、

Text().size({width: 220, height: 125}) // 設置寬高.width(120)                      // 設置寬度，覆蓋前邊的值.height(25)                      // 設置高度，覆蓋前邊的值.backgroundColor("#ccbbaa")      // 設置背景色

設置組件的寬高，缺省時使用組件自身內(nèi)容的寬高，比如充滿父布局可以使用?string?值："100%"，當組件同時設置?size?和?width?/?height?時，以最后設置的值為準。

外邊距(padding)、內(nèi)邊距(margin)、

Stack() {Text().width('100%')               // 設置寬度充滿父布局.height('100%')              // 設置高度充滿父布局.backgroundColor(Color.Pink) // 設置背景色
}
.padding(10)                     // 設置四個邊距值
.backgroundColor("#aabbcc")      // 設置背景色
.size({width: 80, height: 80})   // 設置寬高尺寸Stack() {Text().width('100%')               // 寬度充滿父布局.height('100%')              // 高度充滿父布局.backgroundColor(Color.Pink) // 設置背景色
}
.padding({left: 5, top: 20, right: 5, bottom: 20})// 設置不同的邊距值
.backgroundColor("#aabbcc")                       // 設置背景色
.size({width: 80, height: 80})                    // 設置寬高尺寸

權重(layoutWeight)、對齊方式(align)、布局方向(direction對應的枚舉
Ltr,Rtl,Auto)、相對定位(offset)、絕對定位(position)、

顯示隱藏(visibility對應的枚舉Visible,Hidden,None)

Row() {Text().height(30).width(120).backgroundColor("#aabbcc").layoutWeight(1)Text().height(30).backgroundColor("#aaccbb").visibility(Visibility.Visible) // 設置默認值Visible.layoutWeight(1)Text().height(30).backgroundColor(Color.Pink).layoutWeight(1)
}Row() {Text().height(30).width(120).backgroundColor("#aabbcc").layoutWeight(1)Text().height(30).backgroundColor("#aaccbb").visibility(Visibility.Hidden) // 設置Hidden，不在界面顯示但是還占著位置.layoutWeight(1)Text().height(30).backgroundColor(Color.Pink).layoutWeight(1)
}Row() {Text().height(30).backgroundColor("#aabbcc").layoutWeight(1)Text().height(30).visibility(Visibility.None) // 設置None，不在界面上顯示.backgroundColor("#aaccbb").layoutWeight(1)Text().height(30).backgroundColor(Color.Pink).layoutWeight(1)
}

三、公共事件

常用的公共事件:

點擊事件(onClick)

Text('Click 亞丁號').width(120).height(40).backgroundColor(Color.Pink)      // 設置背景顏色.onClick(() => {                  // 設置點擊事件回調(diào)console.log("text clicked 亞丁號") // 日志輸出})

獲得焦點事件、失去焦點事件

@Entry @Component struct ComponentTest {@State textOne: string = ''@State textTwo: string = ''@State textThree: string = ''@State oneButtonColor: string = '#FF0000'@State twoButtonColor: string = '#87CEFA'@State threeButtonColor: string = '#90EE90'build() {Column({ space: 10 }) {Button(this.textOne).backgroundColor(this.oneButtonColor).width(260).height(70).fontColor(Color.Black).focusable(true).onFocus(() => {this.textOne = 'First Button onFocus'this.oneButtonColor = '#AFEEEE'}).onBlur(() => {this.textOne = 'First Button onBlur'this.oneButtonColor = '#FFC0CB'})Button(this.textTwo).backgroundColor(this.twoButtonColor).width(260).height(70).fontColor(Color.Black).focusable(true)Button(this.textThree).backgroundColor(this.threeButtonColor).width(260).height(70).fontColor(Color.Black).focusable(true).onFocus(() => {this.textThree = 'Third Button onFocus'this.threeButtonColor = '#AFEEEE'}).onBlur(() => {this.textThree = 'Third Button onBlur'this.threeButtonColor = '#FFC0CB'})}.width('100%').height('100%').padding(10)}
}

目前支持焦點事件的組件：Button、?Text、Image、?List、?Grid。

好了就寫到這吧！

你有時間常去我家看看我在這里謝謝你啦...

我家地址:亞丁號

最后送大家一首詩:

山高路遠坑深,
大軍縱橫馳奔,

誰敢橫刀立馬？
惟有點贊加關注大軍。