Column作为父容器宽高100%,Flex作为子容器时,会默认把高度占满。能否让其根据子元素的高度自适应?
代码:
@Preview
@Component
@Entry
export struct NativeSearch {
build() {
Column() {
Row() {
Column() {
Row() {
Column() {
Image($r('app.media.weChat_Pc'))
.width(23)
.height(23)
}
.margin({ right: 4 })
Column() {
this.titleText('您当前正在本机搜索聊天记录:')
}
}
.alignItems(VerticalAlign.Top)
.padding({
top: 20,
left: 12,
right: 12,
bottom: 16
})
.width(341)
.border({
width: { bottom: 1 },
color: { bottom: '#999999' }
})
Flex({
direction: FlexDirection.Column
}) {
this.smallText('如果您无法搜索到想要的消息,可以尝试以下几种解决办法:')
Blank().height(11)
this.titleText('1.在发送或接收那条消息的设备上搜索')
Blank().height(12)
this.smallText('传信支持漫游同步所有移动端未收到消息,当您在多个移动设备登录使用传信时,可能不会同步所有消息')
Blank().height(16)
this.titleText('2.在本机上通过下拉加载更多历史消息')
Blank().height(11)
this.smallText('传信在云端保存15天的历史消息,当您更换全新设备登录传信时也可以浏览部分历史消息')
Blank().height(20)
this.smallText('后续我们会提供更方便的搜索功能,敬请期待')
}
.padding({
top: 23,
left: 15,
right: 15,
bottom: 29
})
}
}
.borderRadius(5)
.backgroundColor('#ffffff')
}
.padding({
top: 12,
left: 10,
right: 10
})
.width('100%')
.height('100%')
.backgroundColor('#f4f4f6')
}
@Builder
smallText(txt: string) {
Text(txt)
.lineHeight($r('app.integer.line_height_21'))
.fontSize($r('app.integer.font_size_13'))
.fontColor($r('app.color.theme_font_color'))
.fontWeight(400)
}
@Builder
titleText(txt: string) {
Text(txt)
.lineHeight($r('app.integer.line_height_21'))
.fontSize($r('app.integer.font_size_13'))
.fontColor($r('app.color.theme_font_color'))
.fontWeight(600)
}
Flex组件主轴默认不设置时撑满父容器,Column、Row组件主轴不设置时默认是跟随子节点大小。