HarmonyOS鸿蒙Next中Row里套一个Image，然后Column里嵌套Row，Row里再使用Blank会把右侧的内容挤出去

HarmonyOS鸿蒙Next中Row里套一个Image，然后Column里嵌套Row，Row里再使用Blank会把右侧的内容挤出去

Row() { Column() { Row(){ Text(this.chat.name ?? “测试”) .fontSize(15) .fontColor(Color.Black) .height(24) .width(‘auto’) //设置width以及flexBasis值auto，使用width的值 .maxLines(1) .height(24) .backgroundColor(Color.Red) Blank() .backgroundColor(Color.Orange)

Text('ddddddddd')
  .fontSize(15)
  .fontColor(Color.Black)
  .maxLines(1)
  .width('auto') //设置width以及flexBasis值auto，使用width的值
  .height(24)
  .backgroundColor(Color.Red)

} .width(‘100%’) .backgroundColor(Color.Green) }


更多关于HarmonyOS鸿蒙Next中Row里套一个Image，然后Column里嵌套Row，Row里再使用Blank会把右侧的内容挤出去的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

看代码应该是Column()没给固定宽度，建议使用.layoutWeight(1)

Row() {
  Image($r('app.media.app_icon'))
    .alt($r('app.media.app_icon'))
    .width(48)
    .height(48)
  Column() {
    Row() {
      Text("测试")
        .fontSize(15)
        .fontColor(Color.Black)
        .height(24)
        .width('auto')//设置width以及flexBasis值auto，使用width的值
        .maxLines(1)
        .height(24)
        .backgroundColor(Color.Red)
      Blank().backgroundColor(Color.Orange)

      Text('ddddddddd')
        .fontSize(15)
        .fontColor(Color.Black)
        .maxLines(1)
        .width('auto')//设置width以及flexBasis值auto，使用width的值
        .height(24)// .position({right:48})
        .backgroundColor(Color.Red)

    }
    .width('100%')
    .backgroundColor(Color.Green)
  }.layoutWeight(1)
}

更多关于HarmonyOS鸿蒙Next中Row里套一个Image，然后Column里嵌套Row，Row里再使用Blank会把右侧的内容挤出去的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next的UI布局中，Row、Column、Image和Blank是常用的布局组件。Row用于水平排列子组件，Column用于垂直排列子组件，Image用于显示图片，Blank用于填充剩余空间。

当在Row中嵌套Image，并在Column中嵌套Row，再在Row中使用Blank时，可能会导致布局问题，具体表现为Blank会将右侧的内容挤出去。这是因为Blank默认会占据所有剩余空间，导致其他组件无法正常显示。

要解决这个问题，可以考虑使用Flex布局的权重属性，或者通过设置Blank的flexGrow属性来调整布局。此外，可以尝试使用Align或JustifyContent属性来调整子组件的对齐方式，以确保布局的合理性。

总之，合理使用布局组件及其属性，可以有效避免布局错乱的问题。

在HarmonyOS鸿蒙Next中，Row内嵌套Image，再在Column内嵌套Row，并在Row中使用Blank时，可能会导致右侧内容被挤出布局。这是因为Blank会占据剩余空间，导致右侧内容无法显示。解决方法可以使用Weight属性，为Row中的其他组件分配权重，确保布局合理分配空间，避免内容被挤出。例如，给Blank设置weight(1)，同时为右侧内容设置适当的权重，确保它们能够正确显示。

回到顶部