HarmonyOS 鸿蒙Next怎么自定义ActionSheet的弹框样式

发布于 1周前 作者 htzhanglong 来自 鸿蒙OS

HarmonyOS 鸿蒙Next怎么自定义ActionSheet的弹框样式

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-methods-action-sheet-V5#sheetinfo对象说明

有什么方法可以去调整ActionSheet的自定义样式?官方目前提供的不太美观。如果选择用自定义弹框去处理可能比较麻烦。

2 回复

可以使用自定义弹框进行设置,给你个demo参考:

// xxx.ets
[@CustomDialog](/user/CustomDialog)
struct CustomDialogExampleTwo {
 private arr: string[] = ['apples','bananas','pears']
 controllerTwo?: CustomDialogController
 build() {
   Column() {
     Text('ActionSheet title').fontSize(20).margin({ top: 10, bottom: 10 })
     Text('message').fontSize(16).margin({ bottom: 10 })
     List({  space:10,initialIndex:0 }) {
       ForEach(this.arr, (item: number) => {
         ListItem() {
           Text('' + item)
             .width('100%').fontSize(16)
             .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
         }
       }, (item: string) => item)
     }
     .listDirection(Axis.Vertical)
     .divider({ strokeWidth: 1, color: Color.Gray, startMargin: 100, endMargin: 100 })
     Button('Confirm button')
       .onClick(() => {
         if (this.controllerTwo != undefined) {
           this.controllerTwo.close()
         }
       })
       .width('80%')
       .margin(20)
}
   }
 }
[@Entry](/user/Entry)
[@CustomDialog](/user/CustomDialog)
struct CustomDialogExample {
 dialogControllerTwo: CustomDialogController | null = new CustomDialogController({
   builder: CustomDialogExampleTwo(),
   alignment: DialogAlignment.Bottom,
   offset: { dx: 0, dy: -25 }
 })
 controller?: CustomDialogController
 build() {
   Column() {
     Flex({ justifyContent: FlexAlign.Center,alignItems:ItemAlign.Center }) {
       Button('click')
         .onClick(() => {
           if (this.dialogControllerTwo != null) {
             this.dialogControllerTwo.open()
           }
         })
         .margin(20)
     }.borderRadius(10)
   }
 }
}

在HarmonyOS 鸿蒙Next中自定义ActionSheet弹框样式,可以通过以下步骤实现:

  1. 创建自定义布局:首先,使用XML文件定义ActionSheet的自定义布局,包括所需的文本、图标和按钮等元素。
  2. 设置样式:通过代码设置自定义布局的背景颜色、文字样式、边距等参数,以满足特定的样式需求。
  3. 实现逻辑:在自定义布局中,为每个按钮或可交互元素设置点击事件监听器,以实现用户交互后的逻辑处理。
  4. 使用自定义ActionSheet:在需要显示ActionSheet的地方,通过代码创建Dialog对象,并将自定义布局设置为Dialog的内容。然后,调用Dialog的show方法将其显示出来。

请注意,虽然HarmonyOS提供了丰富的UI组件和API来支持自定义弹窗,但具体的实现细节可能因版本和具体需求而有所不同。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部