b22.gif

【引言】

在鴻蒙NEXT開發(fā)中，文字轉(zhuǎn)拼音是一個(gè)常見的需求，本文將介紹如何利用鴻蒙系統(tǒng)和pinyin-pro庫(kù)實(shí)現(xiàn)文字轉(zhuǎn)拼音的功能。

【環(huán)境準(zhǔn)備】

? 操作系統(tǒng)：Windows 10

? 開發(fā)工具：DevEco Studio NEXT Beta1 Build Version: 5.0.3.806

? 目標(biāo)設(shè)備：華為Mate60 Pro

? 開發(fā)語(yǔ)言：ArkTS

? 框架：ArkUI

? API版本：API 12

? 三方庫(kù)：pinyin-pro@3.18.3（核心算法）

【開始步驟】

首先，我們引入pinyin-pro庫(kù)中的pinyin函數(shù)，用于將中文轉(zhuǎn)換為拼音。然后定義一個(gè)PinyinBean類來(lái)存儲(chǔ)字符和其對(duì)應(yīng)的拼音，以便后續(xù)展示轉(zhuǎn)換結(jié)果。

接著，我們使用裝飾器定義一個(gè)PinyinConverter組件，該組件實(shí)現(xiàn)了文字轉(zhuǎn)拼音的功能。通過(guò)用戶輸入文本，調(diào)用convertToPinyin方法將文本轉(zhuǎn)換成拼音數(shù)組，并將拼音和字符對(duì)應(yīng)存儲(chǔ)在conversionResult數(shù)組中。

在UI方面，我們通過(guò)鴻蒙系統(tǒng)提供的布局組件和樣式設(shè)置，構(gòu)建了一個(gè)用戶友好的界面。用戶可以輸入文本，點(diǎn)擊示例按鈕填充默認(rèn)文本，點(diǎn)擊清空按鈕清空輸入內(nèi)容。轉(zhuǎn)換結(jié)果會(huì)以拼音和字符的形式展示在界面上。

整個(gè)開發(fā)案例涵蓋了鴻蒙NEXT開發(fā)中的組件定義、狀態(tài)管理、事件處理、UI構(gòu)建等方面，展示了如何利用鴻蒙系統(tǒng)和第三方庫(kù)實(shí)現(xiàn)文字轉(zhuǎn)拼音的功能。

【完整代碼】

導(dǎo)包

ohpm install pinyin-pro@3.18.3

代碼

// 引入pinyin-pro庫(kù)中的pinyin函數(shù)，用于將中文轉(zhuǎn)換為拼音
import { pinyin } from "pinyin-pro";

// 定義一個(gè)類來(lái)存儲(chǔ)字符和其對(duì)應(yīng)的拼音
class PinyinBean {
  pinyin: string; // 拼音
  character: string; // 對(duì)應(yīng)的漢字

  // 構(gòu)造器，初始化拼音和字符
  constructor(pinyin: string, character: string) {
    this.pinyin = pinyin;
    this.character = character;
  }
}

// 使用裝飾器定義一個(gè)組件，該組件用于實(shí)現(xiàn)文字轉(zhuǎn)拼音功能
@Entry
@Component
struct PinyinConverter {
  // 默認(rèn)的用戶輸入內(nèi)容
  @State private defaultInput: string = "混沌未分天地亂,茫茫渺渺無(wú)人見。自從盤古破鴻蒙,開辟?gòu)钠澢鍧岜妗?;
  // 組件的主題顏色
  @State private themeColor: string | Color = Color.Orange;
  // 組件的文字顏色
  @State private fontColor: string = "#2e2e2e";
  // 組件的邊框顏色
  @State private lineColor: string = "#d5d5d5";
  // 基礎(chǔ)內(nèi)邊距值
  @State private basePadding: number = 30;
  // 用戶輸入的內(nèi)容，當(dāng)這個(gè)狀態(tài)改變時(shí)會(huì)觸發(fā)convertToPinyin方法
  @State @Watch('convertToPinyin') userInput: string = "";
  // 轉(zhuǎn)換結(jié)果顯示，存儲(chǔ)了轉(zhuǎn)換后的拼音和對(duì)應(yīng)字符
  @State conversionResult: PinyinBean[] = [];
  // 輸入框是否獲得了焦點(diǎn)
  @State isInputFocused: boolean = false;

  // 方法：將用戶輸入的文本轉(zhuǎn)換成拼音
  convertToPinyin() {
    // 使用pinyin-pro庫(kù)將輸入的文本轉(zhuǎn)換成拼音數(shù)組
    const pinyinArray: string[] = pinyin(this.userInput, { type: "array" });
    // 將輸入的文本分割成單個(gè)字符的數(shù)組
    const charArray: string[] = this.userInput.split("");
    // 清空轉(zhuǎn)換結(jié)果數(shù)組
    this.conversionResult.length = 0;
    // 遍歷拼音數(shù)組，創(chuàng)建PinyinBean對(duì)象，并將其添加到轉(zhuǎn)換結(jié)果數(shù)組中
    for (let i = 0; i < pinyinArray.length; i++) {
      this.conversionResult.push(new PinyinBean(pinyinArray[i], charArray[i]));
    }
  }

  // 構(gòu)建UI的方法
  build() {
    // 創(chuàng)建一個(gè)垂直布局的容器
    Column() {
      // 添加標(biāo)題欄
      Text('文字轉(zhuǎn)拼音')
        .fontColor(this.fontColor) // 設(shè)置字體顏色
        .fontSize(18) // 設(shè)置字體大小
        .width('100%') // 設(shè)置寬度為100%
        .height(50) // 設(shè)置高度為50
        .textAlign(TextAlign.Center) // 文本居中對(duì)齊
        .backgroundColor(Color.White) // 設(shè)置背景色為白色
        .shadow({ // 添加陰影效果
          radius: 2, // 陰影圓角
          color: this.lineColor, // 陰影顏色
          offsetX: 0, // X軸偏移量
          offsetY: 5 // Y軸偏移量
        });

      // 內(nèi)部垂直布局
      Column() {
        // 示例與清空按鈕行
        Row() {
          // 示例按鈕
          Text('示例')
            .fontColor("#5871ce") // 設(shè)置字體顏色
            .fontSize(18) // 設(shè)置字體大小
            .padding(`${this.basePadding / 2}lpx`) // 設(shè)置內(nèi)邊距
            .backgroundColor("#f2f1fd") // 設(shè)置背景色
            .borderRadius(5) // 設(shè)置圓角
            .clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.8 }) // 設(shè)置點(diǎn)擊效果
            .onClick(() => { // 點(diǎn)擊事件處理
              this.userInput = this.defaultInput; // 將默認(rèn)輸入設(shè)置為用戶輸入
            });

          // 空白間隔
          Blank();

          // 清空按鈕
          Text('清空')
            .fontColor("#e48742") // 設(shè)置字體顏色
            .fontSize(18) // 設(shè)置字體大小
            .padding(`${this.basePadding / 2}lpx`) // 設(shè)置內(nèi)邊距
            .clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.8 }) // 設(shè)置點(diǎn)擊效果
            .backgroundColor("#ffefe6") // 設(shè)置背景色
            .borderRadius(5) // 設(shè)置圓角
            .onClick(() => { // 點(diǎn)擊事件處理
              this.userInput = ""; // 清空用戶輸入
            });
        }.height(45) // 設(shè)置高度
        .justifyContent(FlexAlign.SpaceBetween) // 子元素之間等間距分布
        .width('100%'); // 設(shè)置寬度為100%

        // 用戶輸入框
        Row() {
          TextArea({
            text: $$this.userInput, // 綁定用戶輸入
            placeholder: !this.isInputFocused ? `請(qǐng)輸入內(nèi)容。如：${this.defaultInput}` : '' // 設(shè)置占位符
          })
            .backgroundColor(Color.Transparent) // 設(shè)置背景色為透明
            .padding(0) // 設(shè)置內(nèi)邊距
            .height('100%') // 設(shè)置高度為100%
            .placeholderColor(this.isInputFocused ? this.themeColor : Color.Gray) // 設(shè)置占位符顏色
            .fontColor(this.isInputFocused ? this.themeColor : this.fontColor) // 設(shè)置字體顏色
            .caretColor(this.themeColor) // 設(shè)置光標(biāo)顏色
            .borderRadius(0) // 設(shè)置圓角
            .onBlur(() => this.isInputFocused = false) // 當(dāng)失去焦點(diǎn)時(shí)更新狀態(tài)
            .onFocus(() => this.isInputFocused = true) // 當(dāng)獲得焦點(diǎn)時(shí)更新狀態(tài)
            .width('100%'); // 設(shè)置寬度為100%
        }
        .padding(`${this.basePadding / 2}lpx`) // 設(shè)置內(nèi)邊距
        .backgroundColor("#f2f1fd") // 設(shè)置背景色
        .width('100%') // 設(shè)置寬度為100%
        .height(120) // 設(shè)置高度
        .borderWidth(1) // 設(shè)置邊框?qū)挾?        .borderRadius(10) // 設(shè)置圓角
        .borderColor(this.isInputFocused ? this.themeColor : Color.Gray) // 設(shè)置邊框顏色
        .margin({ top: `${this.basePadding / 2}lpx` }); // 設(shè)置上邊距

      }
      .alignItems(HorizontalAlign.Start) // 設(shè)置子元素水平對(duì)齊方式
      .width('650lpx') // 設(shè)置寬度
      .padding(`${this.basePadding}lpx`) // 設(shè)置內(nèi)邊距
      .margin({ top: `${this.basePadding}lpx` }) // 設(shè)置上邊距
      .borderRadius(10) // 設(shè)置圓角
      .backgroundColor(Color.White) // 設(shè)置背景色
      .shadow({ // 設(shè)置陰影
        radius: 10, // 陰影圓角
        color: this.lineColor, // 陰影顏色
        offsetX: 0, // X軸偏移量
        offsetY: 0 // Y軸偏移量
      });

      // 結(jié)果顯示區(qū)域
      Column() {
        Row() {
          Flex({ wrap: FlexWrap.Wrap }) { // 允許子元素?fù)Q行
            ForEach(this.conversionResult, (item: PinyinBean, index: number) => { // 遍歷轉(zhuǎn)換結(jié)果
              Column() {
                // 顯示計(jì)算結(jié)果（拼音）
                Text(`${item.pinyin}`).fontColor(this.fontColor).fontSize(18);
                // 顯示計(jì)算結(jié)果（字符）
                Text(`${item.character}`).fontColor(this.fontColor).fontSize(18);
              }.padding(3); // 設(shè)置內(nèi)邊距
            })
          }

        }.justifyContent(FlexAlign.SpaceBetween) // 子元素之間等間距分布
        .width('100%'); // 設(shè)置寬度為100%
      }
      .visibility(this.conversionResult.length != 0 ? Visibility.Visible : Visibility.None) // 根據(jù)是否有轉(zhuǎn)換結(jié)果決定是否顯示
      .alignItems(HorizontalAlign.Start) // 設(shè)置子元素水平對(duì)齊方式
      .width('650lpx') // 設(shè)置寬度
      .padding(`${this.basePadding}lpx`) // 設(shè)置內(nèi)邊距
      .margin({ top: `${this.basePadding}lpx` }) // 設(shè)置上邊距
      .borderRadius(10) // 設(shè)置圓角
      .backgroundColor(Color.White) // 設(shè)置背景色
      .shadow({ // 設(shè)置陰影
        radius: 10, // 陰影圓角
        color: this.lineColor, // 陰影顏色
        offsetX: 0, // X軸偏移量
        offsetY: 0 // Y軸偏移量
      });
    }
    .height('100%') // 設(shè)置高度為100%
    .width('100%') // 設(shè)置寬度為100%
    .backgroundColor("#f4f8fb"); // 設(shè)置背景色
  }
}