HarmonyOS鸿蒙Next中两个自适应宽度的文本如何展示在一行？

HarmonyOS鸿蒙Next中两个自适应宽度的文本如何展示在一行？

采用弹性布局Flex()，设置其中的wrap属性为NoWrap，即不可换行，子元素尽可能约束在容器内

@Entry
@Component
struct Test {
  build() {
    Row() {
      Image($r('app.media.startIcon')).width(20).aspectRatio(1).margin({ top: 15 })
      Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.Start, wrap: FlexWrap.NoWrap }) {
        // Text(`13.49` + `稀土元素`) // 文字长度不能撑满屏幕时
        Text(`13.49` + `稀土元素稀土元素稀土元素稀土元素稀土元素稀土元素稀土元素稀土元素`) // 文本长度撑满屏幕时
          .maxLines(1)
          .maxFontSize(18)
          .minFontSize(1)
          .fontColor(Color.Red)
        Text(`  再度拉升走强` + `+4.55%  `)
          .maxLines(1)
          .maxFontSize(18)
          .minFontSize(1)
        Image($r('app.media.startIcon')).width(20).aspectRatio(1).id('ig1')
      }.layoutWeight(1).height(50).backgroundColor('#c0c0c0')
    }.width('100%').height('100%').alignItems(VerticalAlign.Top)
  }
}

效果：

（1）内容长度撑满屏幕宽度时：

（2）内容长度未撑满屏幕宽度时：


更多关于HarmonyOS鸿蒙Next中两个自适应宽度的文本如何展示在一行？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS Next中，使用Row容器配合Flex布局可实现两个自适应宽度文本同行展示。关键代码示例：

Row() {
  Text('文本1')
    .flexWeight(1)
    .textOverflow({overflow:TextOverflow.Ellipsis})
  
  Text('文本2') 
    .flexWeight(1)
    .textOverflow({overflow:TextOverflow.Ellipsis})
}
.width('100%')

设置flexWeight使文本项按比例分配行空间，textOverflow控制溢出显示。Row默认水平排列子组件，自动处理同行布局。

更多关于HarmonyOS鸿蒙Next中两个自适应宽度的文本如何展示在一行？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，要实现两个自适应宽度文本在一行显示，可以采用Flex布局结合文本约束的方式。根据您提供的代码，建议做以下优化：

  1. 对于Flex容器中的Text组件，可以设置flexShrink属性控制收缩行为：

    Text(`13.49稀土元素...`)
  .flexShrink(1)  // 允许文本收缩
  .maxLines(1)
  .textOverflow({overflow:TextOverflow.Ellipsis}) // 超出显示省略号

  2. 第二个Text组件可以设置flexGrow属性优先使用剩余空间：

    Text(`再度拉升走强+4.55%`)
  .flexGrow(1)  // 优先占用剩余空间
  .maxLines(1)

  3. 如果希望两个文本保持原始比例，可以使用Flex的justifyContent属性：

    Flex({
  justifyContent: FlexAlign.SpaceBetween, // 两端对齐
  alignItems: ItemAlign.Center
})

关键点在于通过flexShrink/flexGrow控制文本的伸缩行为，配合maxLines和textOverflow确保单行显示。对于动态内容，这种方案能更好地适应不同屏幕宽度。

回到顶部