HarmonyOS Span在一行后面会自动换行,希望自动切换成两行,span不要分开

HarmonyOS
3天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
put_get

参考示例:

import measure from '@ohos.measure';
import display from '@ohos.display';

@Entry
@Component
export struct Index5 {
  @State msg: string =
    '阿萨德考虑好家伙阿萨德了就好了静安寺打回到了家阿萨德了了三大流口水';
  @State msg2: string = `了解详情`;
  @State textWidth: number = display.getDefaultDisplaySync().width - vp2px(60);

  build() {
    NavDestination() {
      Column() {
        TextInput().width('100%')
          .onChange((text)=>{
            this.msg = text
          })
        Row() {
          Text() {

            Span(this.msg).fontColor(Color.Blue).fontSize(14) //fontSize 21px 满一行为630px 126为第二个标签所占的宽度
            if (this.changeLine(this.msg, this.msg2)) {
              Span('\n')
            }
            Span(this.msg2).fontColor(Color.Pink).fontSize(14)
            ImageSpan($r('app.media.app_icon')).width(12)
          }.textAlign(TextAlign.Start).width('100%').padding({ left: 12, right: 12 }).backgroundColor('#ff76a225')
        }.width('100%').padding({ left: 18, right: 18 }).height(200)
      }.width('100%').height('100%').justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)
    }
  }

  changeLine(msg1: string, msg2: string): boolean {
    let i: number = 0;
    let j: number = 0;
    while (j < msg1.length) {
      j++;
      if (this.getTextWidth(msg1.substring(i, j), 14) > this.textWidth) {
        i = j - 1;
      }
    }
    return this.getTextWidth(msg1.substring(i), 14) + this.getTextWidth(msg2, 14) + vp2px(12) > this.textWidth
  }

  getTextWidth(content: string, fontSize: number): number {
    const width = measure.measureText({ textContent: content, fontSize: fontSize })
    console.error(`getTextWidth: content: ${content}, width: ${width}`)
    return width;
  }
}
分享
微博
QQ
微信
回复
3天前
相关问题
HarmonyOS 一行文案不同字体大小
107浏览 • 1回复 待解决
HarmonyOS 如何实现一行四列的列表
54浏览 • 1回复 待解决
HarmonyOS Span不支持n换行
47浏览 • 1回复 待解决
HarmonyOS 自动换行效果
24浏览 • 1回复 待解决
HarmonyOS 关于自动换行的流式布局
48浏览 • 1回复 待解决