HarmonyOS 自定义进度条 Stage模型

通过onTouch监听滑动,动态改变圆角

TypeScript 复制代码
let radius = 0

@Entry
@Component
struct TestPage {
  @State flip: boolean = false
  @State progress:number = 20

  build() {
    Row() {
      Column() {
        RelativeContainer(){
          Rect({ width: '100%', height: 40 })
            .radius(10)
            .fill("#505050")
            .stroke(Color.Transparent)
            .alignRules({
              left:{anchor:'__container__',align:HorizontalAlign.Start},
              center:{anchor:'__container__',align:VerticalAlign.Center}
            })
            .id('brightness_back')
          Rect({ width: `${this.progress}%`, height: 40 })
            .radius([
              [10, 10],
              [radius, radius],
              [radius, radius],
              [10, 10]
            ])
            .fill("#FFFFFF")
            .stroke(Color.Transparent)
            .alignRules({
              left:{anchor:'__container__',align:HorizontalAlign.Start},
              center:{anchor:'__container__',align:VerticalAlign.Center}
            })
            .id('brightness_progress')
          Image($r('app.media.brightness'))
            .objectFit(ImageFit.None)
            .width(40)
            .alignRules({
              left:{anchor:'__container__',align:HorizontalAlign.Start},
              center:{anchor:'__container__',align:VerticalAlign.Center}
            })
            .id('brightness_icon')
          Text(`${this.progress}%`)
            .fontColor(0x000000)
            .fontSize(14)
            .alignRules({
              center:{anchor:'__container__',align:VerticalAlign.Center},
              left:{anchor:'brightness_icon',align:HorizontalAlign.End}
            })
            .id('text_brightness')
        }
        .width('90%')
        .margin({top:10})
        .height(40)
        .onTouch((event: TouchEvent) => {
          let x = event.touches[0].x
          // @ts-ignore
          let width:number = event.target.area.width
          this.progress = Math.max(0,Math.min(100,Math.round(x/width * 100)))
          let length = width - x
          if( x <= width && length < 10 ){
            radius = (10 - length)
          } else if (x > width){
            radius = 10
          } else {
            radius = 0
          }
        })
      }
      .width('100%')
    }.backgroundColor(Color.Gray)
    .height('100%')
  }
}
相关推荐
周胡杰31 分钟前
鸿蒙加载预置数据库-关系型数据库-如何读取本地/预制数据库
数据库·华为·harmonyos·鸿蒙
脑子缺根弦2 小时前
融合优势:SIP 广播对讲联动华为会议 全场景沟通响应提速
华为·音视频·广播对讲系统
迷曳11 小时前
27、鸿蒙Harmony Next开发:ArkTS并发(Promise和async/await和多线程并发TaskPool和Worker的使用)
前端·华为·多线程·harmonyos
呆呆的小鳄鱼14 小时前
牛客:HJ24 合唱队[华为机考][最长递增子集][动态规划]
算法·华为·动态规划
迷曳15 小时前
24、鸿蒙Harmony Next开发:不依赖UI组件的全局自定义弹出框 (openCustomDialog)
dialog·前端·ui·harmonyos·鸿蒙
NoirSeeker15 小时前
在windows平台上基于OpenHarmony sdk编译三方库并暴露给ArkTS使用(详细)
c++·windows·arkts·鸿蒙·交叉编译
DC_BLOG16 小时前
OSPFv3中LSA参数
运维·服务器·华为·智能路由器·huawei
平谷一勺1 天前
鸿蒙状态栏操作
华为·harmonyos·沉浸式状态栏
博睿谷IT99_1 天前
入门华为人工智能,HCIA/HCIP/HCIE该怎么选?
人工智能·华为·华为认证
江湖有缘1 天前
基于华为欧拉系统安装FileGator文件管理器
华为