美文网首页
【HarmonyOS】鸿蒙Text组件两端对齐

【HarmonyOS】鸿蒙Text组件两端对齐

作者: zhongcx | 来源:发表于2024-09-26 07:26 被阅读0次

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


    image.png
    @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%')
      }
    }
    

    相关文章

      网友评论

          本文标题:【HarmonyOS】鸿蒙Text组件两端对齐

          本文链接:https://www.haomeiwen.com/subject/gshcrjtx.html