import { LengthMetrics, LengthUnit } from '@kit.ArkUI'
import Constants from '../../constants/Constants'

@Entry
@Component
@Preview
  // 文本介紹
struct MyTextPage {
  build() {
        Column() {
          // 普通文本加載
          Text("這是一段文本")

          // 通過引用Resource 資源方式進行文本加載
          Text($r('app.string.Home_title'))

          // 進行文本的修飾
          Text($r('app.string.Home_title'))
            .fontSize(16)
            .fontColor(Color.Red)//設置文本顏色
            .textAlign(TextAlign.Center) //居中對齊

          // 一段多個文本樣式的拼接
          Text() {
            Span("這是一段文本")
              .fontSize(16)
              .fontColor(Color.Yellow)
            Span("彩色的文本")
              .fontSize(18)
              .fontColor(Color.Red)
            Span("文本")
              .fontSize(16)
              .fontColor(Color.Black)
          }

          // 創(chuàng)建一個Text組件并設置多種字體相關樣式
          Text('Hello HarmonyOS !!!')
            .fontColor(Color.Red)// 設置字體顏色
            .fontSize(24)// 設置字體的大小
            .fontStyle(FontStyle.Italic)// 設置字體為斜體
            .fontWeight(FontWeight.Bold)// 設置字體加粗
            .font({
              size: 24,
              weight: FontWeight.Bold,
              family: 'Arial',
              style: FontStyle.Italic,
            })// 可以直接設置font的,
            .fontFamily('Arial')// 設置文本的字體為Arial
            .maxFontSize(28)//設置最大的字體
            .minFontSize(12)// 設置最小的字體
            .padding(10)// 設置內邊距
            .backgroundColor(Color.Blue)// 設置背景顏色
            .border({ width: 2, color: Color.Black })// 設置邊框大小&顏色
            .margin(10) // 設置外邊距

          // 這里我們實戰(zhàn)一個頁面, 隱私政策,用戶協(xié)議多使用到的
          Text() {
            Span("歡迎來到德萊聯(lián)盟")
              .fontColor(Color.Black)
              .fontSize(16)
            Span("<用戶協(xié)議>")
              .fontColor(Color.Red)
              .fontSize(16)
              .onClick(() => {
                console.log("點擊了用戶協(xié)議")
              })
            Span("與")
              .fontColor(Color.Black)
              .fontSize(16)
            Span("<隱私政策>")
              .fontColor(Color.Red)
              .fontSize(16)
              .onClick(() => {
                console.log("點擊了隱私政策")
              })
            Span("知了愛學.The Benefits of Reading Books Regularly Reading escape from reality, allowing us to recharge and reunification skills and enhances ")
              .fontColor(Color.Black)
              .fontSize(16)
          }
          .padding(10)
          .margin(10)
          .lineHeight(30)// 設置行高
          .textIndent(20) // 首行縮進
          .wordBreak(WordBreak.BREAK_ALL) //單詞展示的方式, 可以截取換行,也可以末尾換行展示, 單詞的完整性
          .lineSpacing(new LengthMetrics(10, LengthUnit.VP)) // 行間距
          .letterSpacing(2)// 字母之間的間隔

          // 設置文本的裝飾效果
          Text("知了愛學.The Benefits of Reading Books Regularly Reading escape from reality ")
            .textCase(TextCase.UpperCase) // 設置文本大寫
            .decoration({
              type: TextDecorationType.Underline,  // 裝飾線
              color: Color.Green, //顏色
              style: TextDecorationStyle.DASHED, //線的虛線
            })
            .textShadow({
              color: Color.Gray, // 陰影的顏色
              radius: 5, // 陰影的模糊半徑
              offsetX: 5, // 陰影偏移
              offsetY: 5,
            })
            .baselineOffset(10) // 基線的偏移量
            .fontSize(24)

          // 文本的截取展示
          Text("知了愛學.The Benefits of Reading Books Regularly Reading escape from reality")
            .maxLines(1)
            .textOverflow({
              overflow: TextOverflow.Ellipsis  // 省略號的方式進行展示, 或者直接截斷
            })
            .ellipsisMode(EllipsisMode.CENTER) //
            .lineBreakStrategy(LineBreakStrategy.BALANCED) // GREEDY 保證單詞的完整性 BALANCED 保證每行一樣
        }
      .width(Constants.FULL_PERCENT)
      .height(Constants.FULL_PERCENT)

  }
}

自動識別文本內的手機號,url.地址,時間,郵箱.需要真機來測試

@State phoneNumber:string = "18472636677"

  @State email: string = "12321312@qq.com"

  @State url: string = 'https://www.yjbys.com/lizhi/wenzhang/1108519.html'

  @State address: string = '北京市天安門廣場'

  @State dateTime: string = "2024-10-28 19:00:00"

  build() {
    Column(){
      Text(this.phoneNumber)
        .fontSize(20)
        .copyOption(CopyOptions.LocalDevice)
        .enableDataDetector(true) // 啟動數(shù)據(jù)檢測功能, 需要真機展示該效果
        .dataDetectorConfig({
          types: [TextDataDetectorType.PHONE_NUMBER, TextDataDetectorType.EMAIL, TextDataDetectorType.EMAIL,TextDataDetectorType.ADDRESS,TextDataDetectorType.DATE_TIME],
          onDetectResultUpdate:(result: string) => {
            console.log(result)
          }
        })
    }