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

news2024/12/26 9:30:39

前言：

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 {
   @Styles
   normalStyle() {
      .backgroundColor(Color.White)
   }

   @Styles
   pressedStyle() {
      .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 = '' + param
      if (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%')
   }
}

效果：