HarmonyOS鸿蒙Next中标题宽度自适应，后面跟随标签布局

HarmonyOS鸿蒙Next中标题宽度自适应，后面跟随标签布局 要求：

  1. 标题宽度自适应，标题内容长度不等
  2. 标题后面跟着标签，标签数量不等
  3. 标题盛满一行时，缩略显示，但后缀的标签不能被挤到看不见

示例效果：

cke_6518.png

示例效果使用两种布局实现，要求是一种布局自适应上述三点要求

示例代码：

Column(){
  Row(){
    Text("屏障可以有上下左右四个方向垂直方向的屏障仅能作为组件的水平方向锚点用作垂直方向锚点时值为水平方向的屏障仅能作为组件的垂直方向锚点，用作水平方向锚点时值为0。")
      .maxLines(1)
      .textOverflow({ overflow: TextOverflow.Ellipsis })
      .width('auto')
      .layoutWeight(1)
    Flex(){
      Text("标签1")
        .width('auto')
        .maxLines(1)
        .fontColor(Color.Red)
      Text("标签2")
        .width('auto')
        .maxLines(1)
        .fontColor(Color.Red)
      Text("标签3")
        .width('auto')
        .maxLines(1)
        .fontColor(Color.Red)
    }
    .width('auto')
  }
  .width('100% ')
  Row(){
    Text("屏障可以有上下左右四个方向")
      .maxLines(1)
      .textOverflow({ overflow: TextOverflow.Ellipsis })
      .width('auto')
    Text("标签1")
      .width('auto')
      .maxLines(1)
      .fontColor(Color.Red)
    Text("标签2")
      .width('auto')
      .maxLines(1)
      .fontColor(Color.Red)
  }
  .width('100% ')
  .justifyContent(FlexAlign.Start)
}
.alignItems(HorizontalAlign.Start)
.margin({top:12})

更多关于HarmonyOS鸿蒙Next中标题宽度自适应，后面跟随标签布局的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

使用 flexShrink，这样优先被压缩。

去掉 layoutWeight，不需要撑满。

Column() {
  Row() {
    Text("屏障可以有上下左右四个方向垂直方向的屏障仅能作为组件的水平方向锚点用作垂直方向锚点时值为水平方向的屏障仅能作为组件的垂直方向锚点，用作水平方向锚点时值为0。")
      .maxLines(1)
      .textOverflow({ overflow: TextOverflow.Ellipsis })
      .width('auto')
      .flexShrink(1)
    Flex() {
      Text("标签1")
        .width('auto')
        .maxLines(1)
        .fontColor(Color.Red)
      Text("标签2")
        .width('auto')
        .maxLines(1)
        .fontColor(Color.Red)
      Text("标签3")
        .width('auto')
        .maxLines(1)
        .fontColor(Color.Red)
    }
    .width('auto')
  }
  .width('100%')
}
.alignItems(HorizontalAlign.Start)
.margin({ top: 112 })

更多关于HarmonyOS鸿蒙Next中标题宽度自适应，后面跟随标签布局的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


Column() {
  Row() {
    Text("屏障可以有上下左右四个方向垂直方向的屏障仅能作为组件的水平方向锚点用作垂直方向锚点时值为水平方向的屏障仅能作为组件的垂直方向锚点，用作水平方向锚点时值为0。")
      .maxLines(1)
      .textOverflow({ overflow: TextOverflow.Ellipsis })
      .width('auto')
      .flexShrink(1)
    Flex() {
      Text("标签1")
        .width('auto')
        .maxLines(1)
        .fontColor(Color.Red)
      Text("标签2")
        .width('auto')
        .maxLines(1)
        .fontColor(Color.Red)
      Text("标签3")
        .width('auto')
        .maxLines(1)
        .fontColor(Color.Red)
    }
    .width('auto')
  }
  .width('100% ')
  .justifyContent(FlexAlign.Start)

  Row() {
    Text("屏障可以有上下左右四个方向")
      .maxLines(1)
      .textOverflow({ overflow: TextOverflow.Ellipsis })
      .width('auto')
      .flexShrink(1)
    Text("标签1")
      .width('auto')
      .maxLines(1)
      .fontColor(Color.Red)
  }
  .width('100% ')
  .justifyContent(FlexAlign.Start)
}
.alignItems(HorizontalAlign.Start)

下面贴的运行效果和代码，我是不是哪里没对？

.width('100% ') => .width('100%')

运行效果

cke_136.png

代码：

Column() {
  // 长标题测试
          Row() {
            Text("屏障可以有上下左右四个方向垂直方向的屏障仅能作为组件的水平方向锚点用作垂直方向锚点时值为水平方向的屏障仅能作为组件的垂直方向锚点，用作水平方向锚点时值为0。")
              .maxLines(1)
              .textOverflow({ overflow: TextOverflow.Ellipsis })
              .width('auto')
              .flexShrink(1) // 添加这一行
            Flex() {
              Text("标签1")
                .width('auto')
                .maxLines(1)
                .fontColor(Color.Red)
              Text("标签2")
                .width('auto')
                .maxLines(1)
                .fontColor(Color.Red)
              Text("标签3")
                .width('auto')
                .maxLines(1)
                .fontColor(Color.Red)
            }
            .width('auto')
          }
          .width('100% ')
          .justifyContent(FlexAlign.Start)
          // 短标题测试
          Row() {
            Text("屏障可以有上下左右四个方向")
              .maxLines(1)
              .textOverflow({ overflow: TextOverflow.Ellipsis })
              .width('auto')
              .flexShrink(1)// 添加这一行
            Text("标签1")
              .width('auto')
              .maxLines(1)
              .fontColor(Color.Red)
          }
          .width('100% ')
          .justifyContent(FlexAlign.Start)
        }
        .alignItems(HorizontalAlign.Start)

用grid很好实现啊，

额 具体怎么分配呢？，

在HarmonyOS Next中实现标题宽度自适应且后面跟随标签布局，可使用Flex或自适应尺寸组件。将标题设为自动撑开，标签固定宽度或自适应。示例代码：

Row() {
  Text('标题内容')
    .layoutWeight(1)  // 自适应填充剩余空间
    .textOverflow({ overflow: TextOverflow.Ellipsis })

  Text('标签')
    .fixedSize(true)  // 或设置固定宽度
}

通过Row容器配合layoutWeight使标题自动伸缩，标签保持固定尺寸，确保布局紧凑且标题过长时显示省略号。

在HarmonyOS Next中，可以通过Flex布局结合layoutWeight属性实现标题自适应、标签跟随的布局。以下是优化后的实现方案：

Row() {
  Text(标题内容)
    .maxLines(1)
    .textOverflow({ overflow: TextOverflow.Ellipsis })
    .layoutWeight(1)  // 关键：标题自适应填充剩余空间
    
  Flex({ wrap: FlexWrap.NoWrap }) {
    ForEach(标签数组, (item: string) => {
      Text(item)
        .maxLines(1)
        .fontColor(Color.Red)
        .margin({ left: 4 })
    })
  }
  .width('auto')  // 标签区域自适应宽度
}
.width('100%')
.justifyContent(FlexAlign.Start)

实现要点：

  1. 标题自适应：使用layoutWeight(1)让标题自动占据剩余空间
  2. 标签保护：Flex布局设置wrap: FlexWrap.NoWrap确保标签不被换行
  3. 溢出处理：标题设置textOverflow.Ellipsis，超长时显示省略号
  4. 宽度控制：外层Row设为100%，内层标签区域设为auto

这种方案满足所有要求：标题自适应、标签数量可变、标题过长时自动截断但标签始终可见。相比示例中的两种布局，此方案更简洁统一。

回到顶部