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

HarmonyOS

shlp

2024-12-24 16:59:48

浏览

回答 1

待解决

回答 1

按赞同

按时间

aquaa

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)
    }
  }
}