【HarmonyOS】Text组件两端对齐

最新推荐文章于 2024-11-22 10:59:32 发布

zhongcx01

最新推荐文章于 2024-11-22 10:59:32 发布

阅读量159

点赞数 3

文章标签： harmonyos

本文链接：https://blog.csdn.net/zhongcongxu01/article/details/142548862

版权

【HarmonyOS】实现Text组件中文本两端对齐方案

@Entry
@Component
struct Page29 {
  @State str_1 :string  = '文本内容'
  @State str_2 :string  = '文本内容文本内容abcd1234也对也不对，八荣八耻。'
  build() {
    Column() {
      Text('单行效果')
      Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap, justifyContent: FlexAlign.SpaceBetween }) {
        ForEach(this.str_1.split(''), (item: string, index: number) => {
          Text(item)
            .fontSize(14)
        })
      }.width(100)
      .backgroundColor(Color.Pink)

      Text('多行效果')
      Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap, justifyContent: FlexAlign.SpaceBetween }) {
        ForEach(this.str_2.split(''), (item: string, index: number) => {
          Text(item)
            .fontSize(14)
        })
      }.width(100)
      .backgroundColor(Color.Pink)
    }
    .height('100%')
    .width('100%')
  }
}