HarmonyOS如何将自定义弹窗显示在某个控件的位置附近

HarmonyOS如何将自定义弹窗显示在某个控件的位置附近

HarmonyOS
2024-08-10 11:26:45
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
zxjiu

你可以修改offset和alignment这俩属性的值实现。

@Entry 
@Component 
struct CustomDialogUser { 
  dialogController: CustomDialogController = new CustomDialogController({ 
    builder: CustomDialogExample({ 
      cancel: ()=> { this.onCancel() }, 
      confirm: ()=> { this.onAccept() }, 
    }), 
    alignment: DialogAlignment.TopEnd, 
    offset: { dx: 0, dy: 10 }, 
    gridCount: 4, 
    customStyle: false, 
    backgroundColor: 0xd9ffffff, 
    cornerRadius: 10, 
  }) 
  onCancel() { 
    console.info('Callback when the first button is clicked') 
  } 
  onAccept() { 
    console.info('Callback when the second button is clicked') 
  } 
  build() { 
    Column() { 
      Button('click me') 
        .onClick(() => { 
          this.dialogController.open() 
        }) 
    }.width('100%').margin({ top: 5 }) 
  } 
} 
@CustomDialog 
struct CustomDialogExample { 
  cancel?: () => void 
  confirm?: () => void 
  controller: CustomDialogController 
 
  build() { 
    Column() { 
      Text('我是内容').fontSize(20).margin({ top: 10, bottom: 10 }) 
      Flex({ justifyContent: FlexAlign.SpaceAround }) { 
        Button('cancel') 
          .onClick(() => { 
            this.controller.close() 
            if (this.cancel) { 
              this.cancel() 
            } 
          }).backgroundColor(0xffffff).fontColor(Color.Black) 
        Button('confirm') 
          .onClick(() => { 
            this.controller.close() 
            if (this.confirm) { 
              this.confirm() 
            } 
          }).backgroundColor(0xffffff).fontColor(Color.Red) 
      }.margin({ bottom: 10 }) 
    }.backgroundColor(Color.Red) 
  } 
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.

给目标组件调用onAreaChange这个方法,可以获取坐标。这是API文档的示例代码。参考一下。

// xxx.ets 
@Entry 
@Component 
struct AreaExample { 
  @State value: string = 'Text' 
  @State sizeValue: string = '' 
  build() { 
    Column() { 
      Text(this.value) 
        .backgroundColor(Color.Green).margin(30).fontSize(20) 
        .onClick(() => { 
          this.value = this.value + 'Text' 
        }) 
        .onAreaChange((oldValue: Area, newValue: Area) => { 
          console.info(`Ace: on area change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`) 
          this.sizeValue = JSON.stringify(newValue) 
        }) 
      Text('new area is: \n' + this.sizeValue).margin({ right: 30, left: 30 }) 
    } 
    .width('100%').height('100%').margin({ top: 30 }) 
  } 
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
分享
微博
QQ
微信
回复
2024-08-10 17:58:47
相关问题
如何设置自定义弹窗位置
2845浏览 • 1回复 待解决
HarmonyOS 自定义弹窗不能显示问题
910浏览 • 1回复 待解决
HarmonyOS 自定义弹窗封装后不显示
1237浏览 • 1回复 待解决
HarmonyOS 自定义弹窗如何更新弹窗UI
906浏览 • 1回复 待解决
HarmonyOS 自定义控件实现
1011浏览 • 1回复 待解决
自定义弹窗自定义转场动画
1988浏览 • 1回复 待解决
HarmonyOS 如何封装自定义弹窗
941浏览 • 1回复 待解决
HarmonyOS 自定义时间控件和日期控件
1262浏览 • 1回复 待解决
HarmonyOS 自定义弹窗问题
1649浏览 • 1回复 待解决