HarmonyOS flex会占满父节点高度?

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)
  }
阅读 893
1 个回答

Flex组件主轴默认不设置时撑满父容器,Column、Row组件主轴不设置时默认是跟随子节点大小。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进