HarmonyOS Text组件的文案过长时,会把右侧组件顶出屏幕

代码如下,组件关系:

1、左右图标与文案底部对齐。

2、上面的图标、下面的文案与文案右侧对齐

现在的问题:文案长度过长时,会把右侧图标顶出屏幕,怎样才能实现。

const RIGHT_ICON_WIDTH = 20  
  
@Entry  
@Component  
struct Index {  
  @State showMenu: boolean = false  
  @State messageText: string = '消息文本111111111'  
  @State messageTopText: string = '引用消息文案'  
  
  build() {  
    Column() {  
      Image($r('app.media.app_icon'))  
        .width(20).margin({right: RIGHT_ICON_WIDTH})  
        .id('top_icon')  
  
      Row() {  
        Image($r('app.media.app_icon')).width(20).id('left_icon')  
  
        /**  
         * '该区域的展示规则:'  
         * 1、单行可展示下时,左侧留白  
         * 2、单行展示不下时,自动换行  
         */  
        Column() {  
          // 单行展示  
          Text(this.messageTopText)  
            .fontSize(12).fontColor(Color.Gray)  
            .margin({bottom: 8})  
            .maxLines(1)  
            .textOverflow({overflow: TextOverflow.Ellipsis}).ellipsisMode(EllipsisMode.END)  
  
          Text(this.messageText)  
            .fontSize(15)  
        }.backgroundColor(Color.Orange)  
        .alignItems(HorizontalAlign.Start)  
        .padding(5)  
  
        Image($r('app.media.app_icon')).width(20).id('right_icon')  
      }.alignItems(VerticalAlign.Bottom)  
      .justifyContent(FlexAlign.End)  
      .width('100%')  
  
      Text('底部文案')  
        .fontSize(12)  
        .margin({right: RIGHT_ICON_WIDTH})  
    }.width('100%')  
    .backgroundColor(Color.White)  
    .justifyContent(FlexAlign.End)  
    .alignItems(HorizontalAlign.End)  
    .padding({left: 20})  
  }  
}
HarmonyOS
2024-09-24 12:38:42
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
FengTianYa

目前有两种方案可以防止Text组件过长时,将右边的组件顶出屏幕:

方案一:

核心思想是动态添加layoutWeight属性,获取屏幕宽度,并在Text组件达到一定长度时赋值layoutWeight属性。

import measure from '@ohos.measure'  
import display from '@ohos.display'  
  
let displayClass: display.Display | null = null;  
let componentWidth:number = 0;  
try {  
  //获取屏幕宽度  
  displayClass = display.getDefaultDisplaySync();  
  componentWidth = displayClass.width  
  console.log('---这是componentWidth',componentWidth)  
} catch (exception) {  
  console.error('Failed to obtain the default display object. Code: ' + JSON.stringify(exception));  
}  
let messageText: string = '消息文本1111111111111111111111111111111111111111111111111111111111111111111111'  
let textWidth: number = measure.measureText({  
  textContent: messageText  
})  
let maxWidth = componentWidth * 0.8  
class MyColumnModifier implements AttributeModifier<ColumnAttribute> {  
  isDark: boolean = false  
  applyNormalAttribute(instance: ColumnAttribute): void {  
    if (textWidth > maxWidth) {  
      instance.layoutWeight(1)  
    } else {  
  
    }  
  }  
}  
@Entry  
@Component  
struct IR240428141936040 {  
  @State showMenu: boolean = false  
  // @State messageText: string = '消息文本11111111111111'  
  @State messageTopText: string = '引用消息文案'  
  @State modifier:MyColumnModifier = new MyColumnModifier()  
  build() {  
    Column() {  
      Image($r('app.media.app_icon'))  
        .width(20).margin({right: 20})  
        .id('top_icon')  
  
      Row() {  
        Image($r('app.media.app_icon')).width(20).id('left_icon')  
  
        /**  
         * '该区域的展示规则:'  
         * 1、单行可展示下时,左侧留白  
         * 2、单行展示不下时,自动换行  
         */  
        Column() {  
          // 单行展示  
          Text(this.messageTopText)  
            .fontSize(12).fontColor(Color.Gray)  
            .margin({bottom: 8})  
            .maxLines(1)  
            .textOverflow({overflow: TextOverflow.Ellipsis}).ellipsisMode(EllipsisMode.END)  
  
          Text(messageText)  
            .fontSize(15)  
        }  
        .backgroundColor(Color.Orange)  
        .alignItems(HorizontalAlign.Start)  
        .padding(5)  
        .attributeModifier(this.modifier)  
  
        Image($r('app.media.app_icon')).width(20).id('right_icon')  
      }.alignItems(VerticalAlign.Bottom)  
      .justifyContent(FlexAlign.End)  
      .width('100%')  
  
      Text('底部文案')  
        .fontSize(12)  
        .margin({right: 20})  
    }.width('100%')  
    .backgroundColor(Color.White)  
    .justifyContent(FlexAlign.End)  
    .alignItems(HorizontalAlign.End)  
    .padding({left: 20})  
  }  
}

方案二:

给Text组件设置constraintSize属性maxWidth,具体约束的最大宽度按照场景需要设置。

const RIGHT_ICON_WIDTH = 20  
  
@Entry  
@Component  
struct Index {  
  @State showMenu: boolean = false  
  @State messageText: string = '消息文本11111111111111111111111111111111111111111111111111111111111111111111111111111111'  
  @State messageTopText: string = '引用消息文案'  
  
  build() {  
    Column() {  
      Image($r('app.media.app_icon'))  
        .width(20).margin({right: RIGHT_ICON_WIDTH})  
        .id('top_icon')  
  
      Row() {  
        Image($r('app.media.app_icon')).width(20).id('left_icon')  
  
        /**  
         * '该区域的展示规则:'  
         * 1、单行可展示下时,左侧留白  
         * 2、单行展示不下时,自动换行  
         */  
        Column() {  
          // 单行展示  
          Text(this.messageTopText)  
            .fontSize(12).fontColor(Color.Gray)  
            .margin({bottom: 8})  
            .maxLines(1)  
            .textOverflow({overflow: TextOverflow.Ellipsis}).ellipsisMode(EllipsisMode.END)  
  
          Text(this.messageText)  
            .fontSize(15)  
        }.backgroundColor(Color.Orange)  
        .alignItems(HorizontalAlign.Start)  
        .padding(5)  
        .margin({right: 20})  
        .constraintSize({maxWidth: 300})  
  
        Image($r('app.media.app_icon')).width(20).id('right_icon')  
      }.alignItems(VerticalAlign.Bottom)  
      .justifyContent(FlexAlign.End)  
      // .width('100%')  
  
      Text('底部文案')  
        .fontSize(12)  
        .margin({right: RIGHT_ICON_WIDTH})  
    }.width('100%')  
    .backgroundColor(Color.White)  
    .justifyContent(FlexAlign.End)  
    .alignItems(HorizontalAlign.End)  
  }  
}
分享
微博
QQ
微信
回复
2024-09-24 18:04:58
相关问题
Text文本过长如何实现上下滚动?
473浏览 • 1回复 待解决
HarmonyOS如何测量Text组件宽度呢
353浏览 • 1回复 待解决
获取文本Text组件宽度
391浏览 • 1回复 待解决
text组件字体如何加粗?
167浏览 • 1回复 待解决
Text组件是否支持多行显示
1912浏览 • 1回复 待解决
HarmonyOS Text组件设置行间距吗?
325浏览 • 0回复 待解决
Text 组件如何加载Unicode字符
1707浏览 • 1回复 待解决
Text组件布局过界问题
995浏览 • 1回复 待解决
如何获取Text组件中文字宽度
2049浏览 • 1回复 待解决