HarmonyOS 鸿蒙Next 自定义弹窗 (CustomDialog)能否设置最大高度?

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

HarmonyOS 鸿蒙Next 自定义弹窗 (CustomDialog)能否设置最大高度?

自定义弹窗 (CustomDialog)能否设置最大高度?不是定死的高度,根据内容自适应,但是最大高度是屏幕的60%,目前可以实现吗?

2 回复

可以设置 CustomDialogController 的参数 customStyle 为 true,弹窗的大小由子组件决定,再通过设置 List 的约束高度 constraintSize来实现。参考代码如下:

[@Entry](/user/Entry)
[@Component](/user/Component)
export struct DialogDemo {
 [@State](/user/State) data: number[] = [];
 n: number = 0;

 build() {
   Column({ space: 12 }) {
     Text('数据:' + this.data.toString())
     Button('增加数据')
       .onClick(() => {
         this.data.push(this.n++)
       })
     Button('删除数据')
       .onClick(() => {
         this.data.pop()
       })
     Button('点击弹窗 最大高度60%')
       .onClick(() => {
         const carListDialogController: CustomDialogController = new CustomDialogController({
           builder: MyDialog({ data: this.data }),
           alignment: DialogAlignment.Bottom,
           customStyle: true,
         })
         carListDialogController.open()
       })
   }
   .justifyContent(FlexAlign.Center)
   .alignItems(HorizontalAlign.Center)
   .height('100%')
   .width('100%')
 }
}

[@Component](/user/Component)
[@CustomDialog](/user/CustomDialog)
export struct MyDialog {
 data: number[] = []
 controller: CustomDialogController;

 build() {
   Column() {
     //标题
     Text('MyDialog')
       .width('100%')
       .fontSize(16)
       .fontWeight(700)
       .padding(12)
       .borderWidth(2)
       .borderColor(Color.Yellow)
     //List - 每个number一个块
     List({ space: 12 }) {
       ForEach(this.data, (num: number, _: number) => {
         ListItem() {
           Text(num.toString())
         }.height(200)
         .width('100%')
         .borderWidth(5)
         .borderColor(Color.Blue)
       })
     } //List
     .edgeEffect(EdgeEffect.None)
     .scrollBar(BarState.Off)
     .constraintSize({
       maxHeight: '60%'
     })
   } //Column
   .backgroundColor(Color.White)
   .borderWidth(2)
   .borderColor(Color.Red)

 }
}

更多关于HarmonyOS 鸿蒙Next 自定义弹窗 (CustomDialog)能否设置最大高度?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


HarmonyOS 鸿蒙Next 自定义弹窗(CustomDialog)可以设置最大高度。在鸿蒙系统中,自定义弹窗的布局和样式主要通过XML布局文件或JavaScript代码(如果使用ArkUI框架)进行定义。你可以通过设置布局文件中的高度属性,或者使用样式(style)来限制弹窗的最大高度。

具体而言,如果你使用的是ArkUI框架的JavaScript版本,可以通过CSS样式来设置弹窗容器的高度上限,例如使用maxHeight属性。若是在XML布局文件中定义,则可以直接在高度属性中设置最大值,或者通过嵌套布局和约束条件来间接实现高度限制。

示例(ArkUI JavaScript):

@Entry
@Component
struct CustomDialog {
  build() {
    Column() {
      // 弹窗内容
    }.style({
      maxHeight: '300vp', // 设置最大高度为300虚拟像素
      // 其他样式属性
    })
  }
}

请确保在实际应用中,弹窗内容的布局和样式与你的设计需求相匹配,并且不会因高度限制而影响用户体验。

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

回到顶部