鸿蒙开发中，Text组件的textOverflow设置为textOverflow.Marquee后，textAlign设置为Alignment.Center就失效了？

Question

鸿蒙开发中，Text组件的textOverflow设置为textOverflow.Marquee后，textAlign设置为Alignment.Center就失效了，文字始终是居左显示，这个有什么处理办法么
咨询场景描述： 通用标题栏支持标题过长是滚动显示，但标题比较短时，始终居左显示。想标题较短居中显示，标题较长就滚动显示？

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

在api11中已经支持：当overflow设置为TextOverflow.MARQUEE时，文本在一行内滚动显示，设置maxLines及copyOption属性均不生效，此时不支持ImageSpan组件，并且在文本不可滚动时，设置textAlign属性生效；在文本可滚动时，设置textAlign属性不生效。
参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-refere...属性
验证demo如下：

//Text('test marquee') 
Text('test marquee test marquee test marquee test marquee test marquee test marquee test marquee test marquee test marquee test marquee') 
  .width('100%') 
  .backgroundColor(Color.Grey) 
  .textAlign(TextAlign.Center) 
  .textOverflow({overflow: TextOverflow.MARQUEE})

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 2

在鸿蒙（HarmonyOS）开发中，确实存在这样的问题：当 Text 组件的 textOverflow 属性设置为 TextOverflow.Marquee 时，textAlign 属性可能不会按预期工作。这是因为跑马灯效果（Marquee）通常需要文本从一边开始滚动到另一边，所以它默认是从左到右的。
要实现标题较短时居中显示，标题较长时滚动显示的需求，你可以采取以下策略：

1. 使用两个 Text 组件，一个用于显示短标题并居中，另一个用于显示长标题并实现跑马灯效果。
2. 动态设置 Text 组件的属性，根据标题的长度来决定使用哪种显示方式。

以下是一个简单的示例代码，说明如何根据标题长度动态设置 Text 组件的属性：

// 引入必要的模块
import { Text, TextOverflow, Alignment } from '@ohos.arkui';

@Entry
@Component
struct MarqueeExample {
  // 标题文本
  private title: string = "这是一个较长的标题，需要滚动显示";

  build() {
    Column() {
      // 根据标题长度判断是否需要滚动显示
      if (this.title.length > 20) { // 假设超过20个字符就需要滚动
        Text(this.title)
          .textOverflow(TextOverflow.Marquee)
          .width("100%")
          .height("100%")
          .fontSize(20)
          .lineHeight(30)
          .fontColor("#000000")
          .marqueeSpeed(50) // 跑马灯速度
          .marqueeReversed(false) // 跑马灯方向
          .textAlign(Alignment.Start); // 跑马灯效果始终从左开始
      } else {
        Text(this.title)
          .width("100%")
          .height("100%")
          .fontSize(20)
          .lineHeight(30)
          .fontColor("#000000")
          .textAlign(Alignment.Center); // 短标题居中显示
      }
    }
    .width("100%")
    .height("100%");
  }
}

在上面的代码中，我们首先判断标题的长度。如果标题长度超过某个阈值（这里假设为20个字符），我们就使用跑马灯效果；如果标题较短，我们就让文本居中显示。

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。