HarmonyOS鸿蒙Next中SegmentButtonV2胶囊按钮英文字符串超长变成...省略，这如何全部显示文字

【背景知识】

• SegmentButtonV2：分段按钮组件用于创建页签型、单选或多选的胶囊型分段按钮。
• Text：显示一段文本的组件。
• animation：设置组件的属性动画。

【解决方案】

SegmentButton组件无法控制内部文件是否被截断。可以通过下面方案来实现。

1. 字数不是很多且可以自由调整文字大小场景下，可以提前计算好文字大小来实现全部显示。示例代码如下：

   import display from '@ohos.display';
   
   @Entry
   @Component
   struct CustomSegmentButtonPage {
     @State messageA: string = 'truetruetruetruetruetrue'
     @State messageB: string = 'false'
     @State @Watch('change') flag: boolean = true;
     @State translateX: number = 0
     @State customFontSize: number = 0
     private minFontSize: number = 12
     private maxFontSize: number = 20
     private halfWidth: number = display.getDefaultDisplaySync().width / 2
   
     change() {
       if (this.flag) {
         this.translateX = 0
       } else {
         this.translateX = px2vp(this.halfWidth)
       }
     }
   
     aboutToAppear(): void {
       let length = this.messageA.length > this.messageB.length ? this.messageA.length : this.messageB.length
   
       this.customFontSize = Math.floor(px2fp(this.halfWidth / length))
       if (this.customFontSize > this.maxFontSize) {
         this.customFontSize = this.maxFontSize
       } else if (this.customFontSize < this.minFontSize) {
         this.customFontSize = this.minFontSize
       }
     }
   
     build() {
       Stack() {
         Row()
           .width('50%')
           .height(40)
           .backgroundColor(Color.Pink)
           .borderRadius(20)
           .translate({
             x: this.translateX,
             y: 0
           })
           .animation({
             duration: 500,
             curve: Curve.Ease,
             playMode: PlayMode.Normal
           })
   
         Row() {
           Button() {
             Text(this.messageA)
               .fontWeight(this.flag ? FontWeight.Bold : FontWeight.Normal)
               .fontSize(this.customFontSize)
           }
           .height('100%')
           .layoutWeight(0.5)
           .borderRadius(20)
           .backgroundColor(Color.Transparent)
           .onClick(() => {
             this.flag = true
           })
   
           Button() {
             Text(this.messageB)
               .fontWeight(this.flag ? FontWeight.Normal : FontWeight.Bold)
               .fontSize(this.customFontSize)
           }
           .height('100%')
           .layoutWeight(0.5)
           .borderRadius(20)
           .backgroundColor(Color.Transparent)
           .onClick(() => {
             this.flag = false
           })
   
         }
         .width('100%')
         .height(40)
         .justifyContent(FlexAlign.SpaceBetween)
         .alignItems(VerticalAlign.Center)
         .backgroundColor(Color.Transparent)
         .borderRadius(20)
       }
       .backgroundColor('#50e0dcdc')
       .alignContent(Alignment.Start)
       .width('100%')
       .height(40)
       .borderRadius(20)
     }
   }
   

2. 无法调整字体大小或文字超长场景下，可以使用跑马灯效果展示。示例代码如下：

   import display from '@ohos.display';
   
   @Entry
   @Component
   struct CustomSegmentButtonDemo {
     @State @Watch('change') flag: boolean = true;
     @State translateX: number = 0
     private halfWidth: number = px2vp(display.getDefaultDisplaySync().width) / 2
   
     change() {
       if (this.flag) {
         this.translateX = 0
       } else {
         this.translateX = this.halfWidth
       }
     }
   
     build() {
       Stack() {
         Row()
           .width('50%')
           .height(40)
           .backgroundColor(Color.Pink)
           .borderRadius(20)
           .translate({
             x: this.translateX,
             y: 0
           })
           .animation({
             duration: 500,
             curve: Curve.Ease,
             playMode: PlayMode.Normal
           })
   
         Row() {
           Button() {
             Text("truetruetruetruetruetruetruetruetruetruetruetruetruetruetruetruetrue")
               .textOverflow({ overflow: TextOverflow.MARQUEE })
               .fontWeight(this.flag ? FontWeight.Bold : FontWeight.Normal)
           }
           .height('100%')
           .layoutWeight(0.5)
           .borderRadius(20)
           .backgroundColor(Color.Transparent)
           .onClick(() => {
             this.flag = true
           })
   
           Button() {
             Text("false").fontWeight(this.flag ? FontWeight.Normal : FontWeight.Bold)
           }
           .height('100%')
           .layoutWeight(0.5)
           .borderRadius(20)
           .backgroundColor(Color.Transparent)
           .onClick(() => {
             this.flag = false
           })
   
         }
         .width('100%')
         .height(40)
         .justifyContent(FlexAlign.SpaceBetween)
         .alignItems(VerticalAlign.Center)
         .backgroundColor(Color.Transparent)
         .borderRadius(20)
       }
       .backgroundColor('#50e0dcdc')
       .alignContent(Alignment.Start)
       .width('100%')
       .height(40)
       .borderRadius(20)
     }
   }
   

在HarmonyOS Next中，SegmentButtonV2胶囊按钮文字超长显示省略号，可通过设置textOverflow属性为TextOverflow.Clip或TextOverflow.None来禁止截断。同时调整按钮宽度或使用layoutWeight分配空间确保有足够区域显示完整文本。若仍不满足，可考虑自定义组件布局或使用Text组件替代默认文本显示。