HarmonyOS 鸿蒙Next 多个text文本如何保持底部对齐

发布于 1周前 作者 vueper 最后一次编辑是 5天前 来自 鸿蒙OS

大家知道多个text文本如何保持底部对齐啊？

比如：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Row() {
      Text('周星驰')
        .fontSize(14)
        .fontColor(Color.Black)

      Row() {
        Text(`喜剧之王`)
          .fontSize(28)
          .fontWeight(FontWeight.Bold)
          .fontColor(Color.Red)

      }
      .alignItems(VerticalAlign.Bottom)
     
    }

  }
}

更多关于HarmonyOS 鸿蒙Next 多个text文本如何保持底部对齐的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
3 回复

兄弟，这个可以使用Text组件的子组件Span来实现，比如：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Row() {
      Text(){
        Span('周星驰')
          .fontSize(14)
          .fontColor(Color.Black)
        Span('喜剧之王')
          .fontSize(28)
          .fontWeight(FontWeight.Bold)
          .fontColor(Color.Red)
      }
    }

  }
}

更多关于HarmonyOS 鸿蒙Next 多个text文本如何保持底部对齐的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


谢啦~

在HarmonyOS鸿蒙Next系统中，若要实现多个text文本保持底部对齐，可以通过以下方式实现：

  1. 使用布局容器：首先，确保你使用的是支持对齐属性的布局容器，如DirectionalLayout或FlexLayout。这些布局容器提供了对齐子组件的灵活选项。

  2. 设置对齐属性：在布局文件中，为包含text文本的容器设置vertical_alignment属性为bottom。这会将容器内的所有子组件（包括text文本）在垂直方向上对齐到底部。

    <DirectionalLayout
    ohos:width="match_parent"
    ohos:height="wrap_content"
    ohos:orientation="vertical"
    ohos:vertical_alignment="bottom">
    <Text
        ohos:id="$+id:text1"
        ohos:width="wrap_content"
        ohos:height="wrap_content"
        ohos:text="Text 1" />
    <Text
        ohos:id="$+id:text2"
        ohos:width="wrap_content"
        ohos:height="wrap_content"
        ohos:text="Text 2 with more lines\nadditional line" />
</DirectionalLayout>

  3. 调整文本高度：确保文本组件的height属性设置为wrap_content，以根据其内容自动调整高度。

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部