HarmonyOS鸿蒙Next中请问有办法让子组件的最大高度等于父组件的剩余高度吗?
HarmonyOS鸿蒙Next中请问有办法让子组件的最大高度等于父组件的剩余高度吗? 半模态布局上面有一栏标题、菜单,下方放了一个Scroll,现在希望半模态的高度随Scroll显示的内容的变化而变化,内容的最大高度大于整个页面的高度,这就会导致组件显示超出了屏幕之外并且无法滚动,请问有什么办法约束Scroll的高度不会超过半模态的显示区域来保证内部是可滑动的?
demo:
// xxx.ets
@Entry
@Component
struct SheetTransitionExample {
  @State isShow:boolean = false
  @State isShow2:boolean = false
  @State sheetHeight:number = 300;
  @Builder myBuilder() {
    Column() {
      Text('Head')
        .fontSize(24)
        .width('100%')
        .backgroundColor(Color.Gray)
      Scroll() {
        Column() {
          Button("change height")
            .margin(10)
            .fontSize(20)
          Button("Set Illegal height")
            .margin(10)
            .fontSize(20)
          Button("close modal 1")
            .margin(10)
            .fontSize(20)
          Text(`asda
        asdad
        asd
        ada
        sd
        a
        d
        ad
        a
        d
        ad
        a
        d
        ad
        a
        d
        a
        da
        d
        ad
        a
        d
        as
        da
        d
        as
        da
        d
        as
        da
        d
        a
        sd
        ad
        a
        sda
        d
        a
        da
        da
        da
        d
        a
        da`)
        }
      }
    }
    .width('100%')
  }
  build() {
    Column() {
      Button("transition modal 1")
        .onClick(() => {
          this.isShow = true
        })
        .fontSize(20)
        .margin(10)
        .bindSheet($this.isShow, this.myBuilder(), {
          height: SheetSize.FIT_CONTENT,
          showClose: true,
          dragBar: false,
          maskColor: $r('sys.color.ohos_id_color_mask_thin'),
          // onWillDismiss: () => {},
          // blurStyle: BlurStyle.COMPONENT_ULTRA_THICK,
          // backgroundColor: Color.Green
        })
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')
  }
}
更多关于HarmonyOS鸿蒙Next中请问有办法让子组件的最大高度等于父组件的剩余高度吗?的实战教程也可以访问 https://www.itying.com/category-93-b0.html
使用nestedScroll来解决
@Component
struct SheetTransitionExample {
  @State isShow:boolean = false
  @State isShow2:boolean = false
  @State sheetHeight:number = 300;
  @Builder myBuilder() {
    Scroll() {
      Column() {
        Button("change height")
          .margin(10)
          .fontSize(20)
        Button("Set Illegal height")
          .margin(10)
          .fontSize(20)
        Button("close modal 1")
          .margin(10)
          .fontSize(20)
        Text(`asda
        asdad
        asd
        ada
        sd
        a
        asdad
        asd
        ad
        a
        d
        ad
        a
        d
        ad
        a
        d
        a
        da
        d
        ad
        a
        d
        as
        da
        d
        as
        da
        d
        as
        da
        d
        a
        sd
        ad
        a
        sda
        d
        a
        da
        a
        da`)
      }
    }
    .nestedScroll({
      scrollForward: NestedScrollMode.PARENT_FIRST,
      scrollBackward: NestedScrollMode.PARENT_FIRST
    })
  }
  build() {
    Column() {
      Button("transition modal 1")
        .onClick(() => {
          this.isShow = true
        })
        .fontSize(20)
        .margin(10)
        .bindSheet(this.isShow, this.myBuilder(), {
          height: SheetSize.FIT_CONTENT,
          showClose: true,
          dragBar: false,
          maskColor: $r('sys.color.ohos_id_color_mask_thin'),
          backgroundColor: Color.Green
        })
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')
  }
}
更多关于HarmonyOS鸿蒙Next中请问有办法让子组件的最大高度等于父组件的剩余高度吗?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
也不是这个 nestedScroll会导致Scroll外的组件(比如标题)也跟随滚动,期望是只有Scroll内部滚动,
子组件 layoutWeight(1)
layoutWeight(1)跟期望不一致,始终是最高档,期望是能随着子组件实际需要的大小变化,
这个有解决吗,蹲蹲,
没有最终用总高度一点点减来计算。
在HarmonyOS鸿蒙Next中,可以通过布局约束来实现子组件的最大高度等于父组件的剩余高度。使用Flex布局或Stack布局时,可以通过设置flexGrow和flexShrink属性来控制子组件的尺寸。例如,在Flex布局中,父组件设置justifyContent为FlexAlign.Start,子组件设置flexGrow为1,这样子组件会占据父组件的剩余高度。另外,也可以使用ConstraintLayout布局,通过设置子组件的top_toTopOf和bottom_toBottomOf约束来实现子组件高度等于父组件剩余高度。具体代码示例如下:
Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Start }) {
  Text('Header')
    .height(50)
  Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Start }) {
    Text('Content')
      .flexGrow(1)
  }
  .flexGrow(1)
}
或者使用ConstraintLayout:
ConstraintLayout() {
  Text('Header')
    .height(50)
    .constraint({ top: { to: 'parent', align: 'top' } })
  Text('Content')
    .constraint({
      top: { to: 'Header', align: 'bottom' },
      bottom: { to: 'parent', align: 'bottom' }
    })
}
这些方法可以实现子组件的最大高度等于父组件的剩余高度。
        
      
                  
                  
                  
