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' }
})
}
这些方法可以实现子组件的最大高度等于父组件的剩余高度。

