HarmonyOS CustomDialog加上constraintSize约束高度.,配合List出现滑动不能到底的问题

使用CustomDialog,弹窗主体是一个Column,给这个Column设置了最大高度60%,Column内部含有一个标题和一个List,似乎在这个弹窗高度超过60%,触发约束条件时,内部的List会无法滑到底,List的最后一块内容会被隐藏一部分。

Demo如下index.ets. 直接运行,点击添加数据控制弹窗大小,当添加数据>=3条时,弹窗内部的List无法滑到底:

@Entry
@Component
export struct DialogDemo {
  @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('点击弹窗 最大高度40%')
        .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
@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)
    } //Column
    .backgroundColor(Color.White)
    .borderWidth(2)
    .borderColor(Color.Red)
    .constraintSize({ maxHeight: '60%' })
  }
}
HarmonyOS
2024-12-24 16:01:17
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Excelsior_abit

高度没有设置对,list没设置高度就继承父组件高度,然后塞了个text,把list顶下去了

通过设置List的约束高度.constraintSize({maxHeight:‘calc(60% - Text组件高度)’}),显示正常

分享
微博
QQ
微信
回复
2024-12-24 17:41:25
相关问题
HarmonyOS scroll嵌套List不能整体滑动
751浏览 • 1回复 待解决
HarmonyOS list滑动问题
1018浏览 • 1回复 待解决
ConstraintSize尺寸设置问题
770浏览 • 1回复 待解决
HarmonyOS Scroll嵌套List滑动问题
165浏览 • 1回复 待解决
HarmonyOS list 嵌套web滑动切换问题
727浏览 • 1回复 待解决
HarmonyOS Refresh跟list组件惯性滑动问题
423浏览 • 1回复 待解决