HarmonyOS flex会占满父节点高度

HarmonyOS
1天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
fox280

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组件主轴不设置时默认是跟随子节点大小。

分享
微博
QQ
微信
回复
1天前
相关问题
HarmonyOS 自适应组件高度问题
1146浏览 • 1回复 待解决
innodb中,空的列会占用存储吗?
2822浏览 • 1回复 待解决
组件高度为0时,如何设置溢出隐藏
1009浏览 • 1回复 待解决
HarmonyOS flex居中
74浏览 • 1回复 待解决
HarmonyOS flex容器布局
982浏览 • 2回复 待解决
HarmonyOS Flex组件宽度问题
380浏览 • 1回复 待解决
HarmonyOS Flex 布局设置问题
500浏览 • 1回复 待解决
HarmonyOS Flex组件存在问题,UI不对
69浏览 • 1回复 待解决
HarmonyOS Flex组件是否有间隔属性
39浏览 • 1回复 待解决
HarmonyOS 如何限制Flex的行数
25浏览 • 1回复 待解决
Flex布局与w3c中的flex是否有差异
975浏览 • 1回复 待解决
HarmonyOS Flex布局如何设置最大行数
61浏览 • 1回复 待解决