HarmonyOS 怎么设置ActionSheet弹窗内的列表的样式?

如题:HarmonyOS 怎么设置ActionSheet弹窗内的列表的样式?

阅读 479
1 个回答

ActionSheet没有自定义样式接口,暂不支持,如果想要自定义样式 ,可以使用customdialog自定义弹窗的方式实现,

文档:可参见 https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-methods-custom-dialog-box-V5

以下demo供参考

@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
@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)
    }
  }
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进