前言：

DevEco Studio版本：4.0.0.600

詳細使用介紹

1、Text的一些常用設(shè)置

Text(this.message).fontSize(50)//字體大小.fontColor(Color.White)//字體顏色.fontWeight(FontWeight.Bold)//字體加粗.backgroundColor(Color.Black)//背景顏色.fontStyle(FontStyle.Italic) //字體傾斜.textOverflow({overflow: TextOverflow.Ellipsis})//文本超長顯示方式，TextOverflow.Ellipsis：以省略號結(jié)尾.maxLines(1)//設(shè)置文本的最大行數(shù)

TextOverflow屬性

效果：

參考文檔：OpenHarmony Text顯示文本

2、Text文字富文本

Text() {Span("《用戶協(xié)議》").fontColor(Color.Blue).decoration({ type: TextDecorationType.Underline, color: Color.Blue })//設(shè)置文本裝飾線樣式及其顏色。.onClick(() => {//實現(xiàn)點擊，跳轉(zhuǎn)到用戶協(xié)議界面})
}

效果：

參考文檔：OpenHarmony span富文本設(shè)置

3、線性邊框按鈕

Text('確定').fontColor(Color.Black).fontSize('28px').width('146px').height('48px').textAlign(TextAlign.Center).borderColor(Color.Blue)//邊框顏色.borderWidth('1px')//邊框?qū)挾?borderRadius('10px')//邊框圓角.onClick(() => {//實現(xiàn)點擊邏輯})

// 如果單獨設(shè)置某一個圓角可以通過下面方式設(shè)置，topLeft：左上角，topRight：右上角，bottomLeft：左下角，bottomRight：右下角

.borderRadius({ topLeft: '10px', topRight: '10px', bottomLeft: '10px', bottomRight: '10px' })

效果：

4、Image的一些常用設(shè)置

參考鏈接：OpenHarmony Image圖片

圓形圖片：

Image($r("app.media.startIcon")).width(100).height(100).clip(new Circle({ width: 100, height: 100 }))

圖片占位：

Image($r("app.media.startIcon")).width(100).height(100).alt($r("app.media.icon"))

圖片加載完成監(jiān)聽：

Image($r("app.media.startIcon")).width(100).height(100).onComplete((event: {width: number,height: number}) => {console.info("圖片寬度：" + event.width + "圖片高度：" + event.height)})

參數(shù)名	類型	說明
width	number	圖片的寬。 單位：像素
height	number	圖片的高。 單位：像素
componentWidth	number	組件的寬。 單位：像素
componentHeight	number	組件的高。 單位：像素
loadingStatus	number	圖片加載成功的狀態(tài)值。 說明： 返回的狀態(tài)值為0時，表示圖片數(shù)據(jù)加載成功。返回的狀態(tài)值為1時，表示圖片解碼成功。
contentWidth(10+)	number	圖片實際繪制的寬度。 單位：像素 說明： 僅在loadingStatus返回1時有效。
contentHeight(10+)	number	圖片實際繪制的高度。 單位：像素 說明： 僅在loadingStatus返回1時有效。
contentOffsetX(10+)	number	實際繪制內(nèi)容相對于組件自身的x軸偏移。 單位：像素 說明： 僅在loadingStatus返回1時有效。
contentOffsetY(10+)	number	實際繪制內(nèi)容相對于組件自身的y軸偏移。 單位：像素 說明： 僅在loadingStatus返回1時有效。

5、接口回調(diào)

自定義一個View：ImageTest

@Component
export struct ImageTest {//用于點擊“確定”按鈕的回調(diào) （API10的寫法）private onButtonClick: () => void = () => {}build() {Text('確定').fontColor(Color.Black).fontSize('28px').width('146px').height('48px').textAlign(TextAlign.Center).borderColor(Color.Blue).borderWidth('1px').borderRadius('10px').onClick(() => {this.onButtonClick()})}
}

對ImageTest的引用

ImageTest({ onButtonClick: () => {promptAction.showToast({message: '我是回調(diào)的數(shù)據(jù)',duration: 2000,})
} })

6、自定義Dialog彈窗

參考文檔：OpenHarmony 自定義彈窗

使用@CustomDialog裝飾器裝飾自定義彈窗

@CustomDialog
export struct MessageDialog {build() {}
}

7、多態(tài)樣式

參考鏈接：OpenHarmony 多態(tài)樣式

stateStyles樣式狀態(tài)：

• focused：獲焦態(tài)。

• normal：正常態(tài)。

• pressed：按壓態(tài)。

• disabled：不可用態(tài)。

• selected：選中態(tài)。(API 10中新增)

@Entry
@Component
struct Index {@StylesnormalStyle() {.backgroundColor(Color.White)}@StylespressedStyle() {.backgroundColor(Color.Gray)}build() {Column() {Text('確定').fontSize('28px').width('146px').height('48px').textAlign(TextAlign.Center).borderColor(Color.Blue).borderWidth('1px').borderRadius('10px').stateStyles({normal: this.normalStyle,pressed: this.pressedStyle})}.justifyContent(FlexAlign.Center).width('100%').height('100%')}
}

8、日期格式化

@Entry
@Component
struct Index {@State message: string = '';aboutToAppear() {setInterval(() => {this.initDate()}, 1000)}initDate() {let date = new Date()let year = this.format(date.getFullYear()) //獲取年份let month = this.format(date.getMonth() + 1) //獲取月份let day = this.format(date.getDate()) //獲取天數(shù)let hours = this.format(date.getHours()) //獲取小時let minutes = this.format(date.getMinutes()) //獲取分鐘let seconds = this.format(date.getSeconds()) //獲取秒數(shù)this.message = year + '年' + month + '月' + day + '日  ' + hours + ':' + minutes + ':' + seconds}/*** 不足十位前面補零*/format(param: number) {let value = '' + paramif (param < 10) {value = '0' + param}return value}build() {Column() {Text(this.message).fontSize(30)//字體大小.fontColor(Color.Black)//字體顏色.fontWeight(FontWeight.Bold) //字體加粗}.justifyContent(FlexAlign.Center).width('100%').height('100%')}
}

效果：

或者通過@ohos.intl (國際化-Intl)來實現(xiàn)，參考文檔：

OpenHarmony DateTimeFormat日期格式化