Progress触摸热区增大demo

Progress触摸热区增大demo

HarmonyOS
2024-06-04 00:09:06
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
躺平嗑产品懒猫
@Component 
export struct sliderExample { 
  @State text: string = '哈哈哈' 
  @State value: number = 40; 
  flagValue: number = 0 
  build() { 
    Stack() { 
      Text(this.text).fontSize(20) 
      Row() { 
      } 
      .onClick(() => { 
        this.text = '上方横条onclick' 
      }) 
      .backgroundColor(Color.Orange) 
      .width('100%') 
      .height(24) 
      .position({ x: 0, y: '100%' }) 
      .markAnchor({ x: 0, y: 96 }) 
      Row() { } 
      .onClick(() => { this.text = '下方横条onclick' }) 
      .backgroundColor(Color.Pink) 
      .width('100%') 
      .height(24) 
      .position({ x: 0, y: '100%' }) 
      .markAnchor({ x: 0, y: 48 }) 
      Row() { 
        Slider({ style: SliderStyle.OutSet, value: this.value }) 
          .blockSize({ width: 6, height: 6 }) 
          .blockBorderColor(Color.White) 
          .blockBorderWidth(5) 
          .height(24) 
          .trackThickness(3) 
          .backgroundColor(Color.Red) 
          .onChange((value)=>{ 
            this.value = value 
          }) 
      } 
      .position({ x: 0, y: '100%' }) 
      .markAnchor({ x: 0, y: 72 }) 
      .backgroundColor('rgba(255, 255,255,0.5)') 
      .responseRegion([{ x: 0, y: 0, width: '100%', height: '100%' }, 
        { x: 0, y: '100%', width: '100%', height: '100%' }, 
        { x: 0, y: '-100%', width: '100%', height: '100%' }]) 
      .hitTestBehavior(HitTestMode.Transparent) 
      .gesture( 
        PanGesture(new PanGestureOptions({ direction: PanDirection.Left | PanDirection.Right })) 
          .onActionStart(() => { 
            this.flagValue = this.value 
          }) 
          .onActionUpdate((event?: GestureEvent) => { 
            if (event) { 
              this.value = this.flagValue + (event.offsetX / 3) 
            } 
          }) 
      ) 
    } 
    .backgroundColor(Color.Green) 
    .width('100%') 
    .height('100%') 
  } 
}
分享
微博
QQ
微信
回复
2024-06-04 22:53:35
相关问题
如何查看触摸范围
1137浏览 • 1回复 待解决
HarmonyOS TabBar事件处理
1035浏览 • 1回复 待解决
HarmonyOS如何增加控件点击
1646浏览 • 1回复 待解决
HarmonyOS har包体积增大
1032浏览 • 1回复 待解决
HarmonyOS Progress设置渐变无效
752浏览 • 1回复 待解决
HarmonyOS 更新咨询
1168浏览 • 1回复 待解决
如何通过Progress实现loading效果?
1055浏览 • 1回复 待解决
HarmonyOS 修复方案
1229浏览 • 1回复 待解决
请问重载如何启动?
556浏览 • 0回复 待解决
HarmonyOS 修复,图表组件
983浏览 • 1回复 待解决
PolarDB增加存储可用如何操作?
3561浏览 • 1回复 待解决
HarmonyOS Progress UI控件的进度控制
1316浏览 • 1回复 待解决
HarmonyOS RN侧编译问题
1973浏览 • 1回复 待解决
HarmonyOS App是否支持更新?
1205浏览 • 1回复 待解决
Flutter 重载方法有哪些?
1288浏览 • 1回复 待解决
HarmonyOS 修复技术方案咨询
1380浏览 • 1回复 待解决
HarmonyOS so的修复能力
1422浏览 • 1回复 待解决
基于Progress组件的进度条
1843浏览 • 1回复 待解决
js FA支持多点触摸吗?
5475浏览 • 1回复 待解决