鸿蒙常用UI效果及一些处理方式总结

前言：

DevEco Studio版本：4.0.0.600

详细使用介绍

1、Text的一些常用设置

Text(this.message).fontSize(50)//字体大小.fontColor(Color.White)//字体颜色.fontWeight(FontWeight.Bold)//字体加粗.backgroundColor(Color.Black)//背景颜色.fontStyle(FontStyle.Italic) //字体倾斜.textOverflow({overflow: TextOverflow.Ellipsis})//文本超长显示方式，TextOverflow.Ellipsis：以省略号结尾.maxLines(1)//设置文本的最大行数

TextOverflow属性

效果：

参考文档：OpenHarmony Text显示文本

2、Text文字富文本

Text() {Span("《用户协议》").fontColor(Color.Blue).decoration({ type: TextDecorationType.Underline, color: Color.Blue })//设置文本装饰线样式及其颜色。.onClick(() => {//实现点击，跳转到用户协议界面})
}

效果：

参考文档：OpenHarmony span富文本设置

3、线性边框按钮

Text('确定').fontColor(Color.Black).fontSize('28px').width('146px').height('48px').textAlign(TextAlign.Center).borderColor(Color.Blue)//边框颜色.borderWidth('1px')//边框宽度.borderRadius('10px')//边框圆角.onClick(() => {//实现点击逻辑})

// 如果单独设置某一个圆角可以通过下面方式设置，topLeft：左上角，topRight：右上角，bottomLeft：左下角，bottomRight：右下角

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

效果：

4、Image的一些常用设置

参考链接：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"))

图片加载完成监听：

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

参数名	类型	说明
width	number	图片的宽。单位：像素
height	number	图片的高。单位：像素
componentWidth	number	组件的宽。单位：像素
componentHeight	number	组件的高。单位：像素
loadingStatus	number	图片加载成功的状态值。说明：返回的状态值为0时，表示图片数据加载成功。返回的状态值为1时，表示图片解码成功。
contentWidth(10+)	number	图片实际绘制的宽度。单位：像素说明：仅在loadingStatus返回1时有效。
contentHeight(10+)	number	图片实际绘制的高度。单位：像素说明：仅在loadingStatus返回1时有效。
contentOffsetX(10+)	number	实际绘制内容相对于组件自身的x轴偏移。单位：像素说明：仅在loadingStatus返回1时有效。
contentOffsetY(10+)	number	实际绘制内容相对于组件自身的y轴偏移。单位：像素说明：仅在loadingStatus返回1时有效。

5、接口回调

自定义一个View：ImageTest

@Component
export struct ImageTest {//用于点击“确定”按钮的回调 （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: '我是回调的数据',duration: 2000,})
} })

6、自定义Dialog弹窗

参考文档：OpenHarmony 自定义弹窗

使用@CustomDialog装饰器装饰自定义弹窗

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

7、多态样式

参考链接：OpenHarmony 多态样式

stateStyles样式状态：

focused：获焦态。
normal：正常态。
pressed：按压态。
disabled：不可用态。
selected：选中态。(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()) //获取天数let hours = this.format(date.getHours()) //获取小时let minutes = this.format(date.getMinutes()) //获取分钟let seconds = this.format(date.getSeconds()) //获取秒数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%')}
}

效果：