HarmonyOS 鸿蒙Next Text显示固定为2行且高度随字体变化

HarmonyOS 鸿蒙Next Text显示固定为2行且高度随字体变化 Text显示固定为2行，且高度随字体变化

5 回复 
maxlines结合容器布局可实现，参考：

```javascript
Row({ space: 10 }) {
  Column({ space: 10 }) {
    Image($r('app.media.img1')).width(100).height(100).objectFit(ImageFit.Fill)
    Text('我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字')
      .fontWeight(FontWeight.Bold)
      .maxLines(2)
  }
  .width(100)

  Column({ space: 10 }) {
    Image($r('app.media.img1')).width(100).height(100).objectFit(ImageFit.Fill)
    Text('我是文字')
      .fontWeight(FontWeight.Bold)
      .maxLines(2)
  }
  .width(100)
}
.alignItems(VerticalAlign.Top)
.width('100%')
.backgroundColor(Color.Pink)

更多关于HarmonyOS 鸿蒙Next Text显示固定为2行且高度随字体变化的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


你好，参见博客文章，设置固定行数为2，maxLine=2后，通过MeasureText.measureText测算行高。

【HarmonyOS】根据文本内容动态测算Text文本控件宽高行高_鸿蒙 计算文本高度-CSDN博客

找HarmonyOS工作还需要会Flutter技术的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：BV1S4411E7LY/?p=17

一般只有最大行数, 然后可以设置文本行高

在一个HarmonyOS环境中，为了使Text组件显示固定为2行且高度随字体变化，可以通过设置maxLines属性限制最大行数，并利用textStyle中的fontSize属性动态调整字体大小。以下是一个示例代码：

@Entry
@Component
struct Index {
  @State fontSize: number = 20

  build() {
    Column() {
      Text('这是一个示例文本，用于演示Text组件显示固定为2行且高度随字体变化。')
        .maxLines(2)
        .textStyle({ fontSize: this.fontSize })
        .onClick(() => {
          this.fontSize += 2
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

在这个示例中，maxLines属性被设置为2，以确保文本最多显示2行。textStyle中的fontSize属性用于动态调整字体大小，当点击文本时，字体大小会增加2个单位。这使得Text组件的高度能够随着字体大小的变化而变化。

回到顶部