鴻蒙NEXT開發(fā)案例：親戚關(guān)系計算器

b21.gif

【引言】

在快節(jié)奏的現(xiàn)代生活中，人們往往因為忙碌而忽略了與親戚間的互動，特別是在春節(jié)期間，面對眾多的長輩和晚輩時，很多人會感到困惑，不知道該如何正確地稱呼每一位親戚。針對這一問題，我們開發(fā)了一款基于鴻蒙NEXT平臺的“親戚關(guān)系計算器”應(yīng)用，旨在幫助用戶快速、準(zhǔ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ā)語言：ArkTS

? 框架：ArkUI

? API版本：API 12

? 三方庫：@nutpi/relationship（核心算法）

【應(yīng)用背景】

中國社會有著深厚的家庭觀念，親屬關(guān)系復(fù)雜多樣。從血緣到姻親，從直系到旁系，每一種關(guān)系都有其獨特的稱呼方式。然而，隨著社會的發(fā)展，家庭成員之間的聯(lián)系逐漸變得疏遠(yuǎn)，尤其是對于年輕人來說，準(zhǔn)確地稱呼每一位親戚成了一項挑戰(zhàn)。為了應(yīng)對這一挑戰(zhàn)，“親戚關(guān)系計算器”應(yīng)運而生。

【核心功能】

  1. 關(guān)系輸入：用戶可以通過界面輸入或選擇具體的親戚關(guān)系描述，例如“爸爸的哥哥的兒子”。

  2. 性別及稱呼選擇：考慮到不同地區(qū)的習(xí)俗差異，應(yīng)用允許用戶選擇自己的性別和希望使用的稱呼方式，比如“哥哥”、“姐夫”等。

  3. 關(guān)系計算：利用@nutpi/relationship庫，根據(jù)用戶提供的信息，精確計算出正確的親戚稱呼。

  4. 示例與清空：提供示例按鈕供用戶測試應(yīng)用功能，同時也設(shè)有清空按鈕方便用戶重新開始。

  5. 個性化設(shè)置：支持多種方言和地方習(xí)慣的稱呼方式，讓應(yīng)用更加貼近用戶的實際需求。

【用戶界面】

應(yīng)用的用戶界面簡潔明了，主要由以下幾個部分組成：

? 選擇性別：通過分段按鈕讓用戶選擇自己的性別。

? 選擇稱呼方式：另一個分段按鈕讓用戶選擇希望的稱呼方式。

? 輸入關(guān)系描述：提供一個文本輸入框，用戶可以在此處輸入具體的關(guān)系描述。

? 結(jié)果顯示區(qū)：在用戶提交信息后，這里會顯示出正確的親戚稱呼。

? 操作按鈕：包括示例按鈕、清空按鈕等，方便用戶操作。

【完整代碼】

導(dǎo)包

ohpm install @nutpi/relationship

代碼

// 導(dǎo)入關(guān)系計算模塊
import relationship from "@nutpi/relationship"
// 導(dǎo)入分段按鈕組件及配置類型
import { SegmentButton, SegmentButtonItemTuple, SegmentButtonOptions } from '@kit.ArkUI';

// 使用 @Entry 和 @Component 裝飾器標(biāo)記這是一個應(yīng)用入口組件
@Entry
@Component
  // 定義一個名為 RelationshipCalculator 的結(jié)構(gòu)體，作為組件主體
struct RelationshipCalculator {
  // 用戶輸入的關(guān)系描述，默認(rèn)值為“爸爸的堂弟”
  @State private userInputRelation: string = "爸爸的堂弟";
  // 應(yīng)用的主題顏色，設(shè)置為橙色
  @State private themeColor: string | Color = Color.Orange;
  // 文字顏色
  @State private textColor: string = "#2e2e2e";
  // 邊框顏色
  @State private lineColor: string = "#d5d5d5";
  // 基礎(chǔ)內(nèi)邊距大小
  @State private paddingBase: number = 30;
  // 性別選項數(shù)組
  @State private genderOptions: object[] = [Object({ text: '男' }), Object({ text: '女' })];
  // 稱呼方式選項數(shù)組
  @State private callMethodOptions: object[] = [Object({ text: '我叫ta' }), Object({ text: 'ta叫我' })];
  // 性別選擇按鈕的配置
  @State private genderButtonOptions: SegmentButtonOptions | undefined = undefined;
  // 稱呼方式選擇按鈕的配置
  @State private callMethodButtonOptions: SegmentButtonOptions | undefined = undefined;
  // 當(dāng)前選中的性別索引
  @State @Watch('updateSelections') selectedGenderIndex: number[] = [0];
  // 當(dāng)前選中的稱呼方式索引
  @State @Watch('updateSelections') selectedCallMethodIndex: number[] = [0];
  // 用戶輸入的關(guān)系描述
  @State @Watch('updateSelections') userInput: string = "";
  // 計算結(jié)果顯示
  @State calculationResult: string = "";
  // 輸入框是否獲得焦點
  @State isInputFocused: boolean = false;

  // 當(dāng)選擇發(fā)生改變時，更新關(guān)系計算
  updateSelections() {
    // 根據(jù)索引獲取選中的性別（0為男，1為女）
    const gender = this.selectedGenderIndex[0] === 0 ? 1 : 0;
    // 判斷是否需要反轉(zhuǎn)稱呼方向
    const reverse = this.selectedCallMethodIndex[0] === 0 ? false : true;
    // 調(diào)用關(guān)系計算模塊進行計算
    const result: string[] = relationship({ text: this.userInput, reverse: reverse, sex: gender }) as string[];
    // 如果有計算結(jié)果，則更新顯示；否則顯示默認(rèn)提示
    if (result && result.length > 0) {
      this.calculationResult = `${reverse ? '對方稱呼我' : '我稱呼對方'}：${result[0]}`;
    } else {
      this.calculationResult = this.userInput ? '當(dāng)前信息未查到關(guān)系' : '';
    }
  }

  // 組件即將顯示時，初始化性別和稱呼方式選擇按鈕的配置
  aboutToAppear(): void {
    this.genderButtonOptions = SegmentButtonOptions.capsule({
      buttons: this.genderOptions as SegmentButtonItemTuple,
      multiply: false,
      fontColor: Color.White,
      selectedFontColor: Color.White,
      selectedBackgroundColor: this.themeColor,
      backgroundColor: this.lineColor,
      backgroundBlurStyle: BlurStyle.BACKGROUND_THICK
    });
    this.callMethodButtonOptions = SegmentButtonOptions.capsule({
      buttons: this.callMethodOptions as SegmentButtonItemTuple,
      multiply: false,
      fontColor: Color.White,
      selectedFontColor: Color.White,
      selectedBackgroundColor: this.themeColor,
      backgroundColor: this.lineColor,
      backgroundBlurStyle: BlurStyle.BACKGROUND_THICK
    });
  }

  // 構(gòu)建組件界面
  build() {
    // 創(chuàng)建主列布局
    Column() {
      // 標(biāo)題欄
      Text('親戚關(guān)系計算器')
        .fontColor(this.textColor)
        .fontSize(18)
        .width('100%')
        .height(50)
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.White)
        .shadow({
          radius: 2,
          color: this.lineColor,
          offsetX: 0,
          offsetY: 5
        });
      // 內(nèi)部列布局
      Column() {
        // 性別選擇行
        Row() {
          Text('我的性別').fontColor(this.textColor).fontSize(18);
          // 性別選擇按鈕
          SegmentButton({
            options: this.genderButtonOptions,
            selectedIndexes: this.selectedGenderIndex
          }).width('400lpx');
        }.height(45).justifyContent(FlexAlign.SpaceBetween).width('100%');

        // 稱呼方式選擇行
        Row() {
          Text('稱呼方式').fontColor(this.textColor).fontSize(18);
          // 稱呼方式選擇按鈕
          SegmentButton({
            options: this.callMethodButtonOptions,
            selectedIndexes: this.selectedCallMethodIndex
          }).width('400lpx');
        }.height(45).justifyContent(FlexAlign.SpaceBetween).width('100%');

        // 示例與清空按鈕行
        Row() {
          // 示例按鈕
          Text('示例')
            .fontColor("#5871ce")
            .fontSize(18)
            .padding(`${this.paddingBase / 2}lpx`)
            .backgroundColor("#f2f1fd")
            .borderRadius(5)
            .clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.8 })
            .onClick(() => {
              this.userInput = this.userInputRelation;
            });
          // 空白間隔
          Blank();
          // 清空按鈕
          Text('清空')
            .fontColor("#e48742")
            .fontSize(18)
            .padding(`${this.paddingBase / 2}lpx`)
            .clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.8 })
            .backgroundColor("#ffefe6")
            .borderRadius(5)
            .onClick(() => {
              this.userInput = "";
            });
        }.height(45)
        .justifyContent(FlexAlign.SpaceBetween)
        .width('100%');

        // 用戶輸入框
        TextInput({
          text: $$this.userInput,
          placeholder: !this.isInputFocused ? `請輸入稱呼。如：${this.userInputRelation}` : ''
        })
          .placeholderColor(this.isInputFocused ? this.themeColor : Color.Gray)
          .fontColor(this.isInputFocused ? this.themeColor : this.textColor)
          .borderColor(this.isInputFocused ? this.themeColor : Color.Gray)
          .caretColor(this.themeColor)
          .borderWidth(1)
          .borderRadius(10)
          .onBlur(() => this.isInputFocused = false)
          .onFocus(() => this.isInputFocused = true)
          .height(45)
          .width('100%')
          .margin({ top: `${this.paddingBase / 2}lpx` });
      }
      .alignItems(HorizontalAlign.Start)
      .width('650lpx')
      .padding(`${this.paddingBase}lpx`)
      .margin({ top: `${this.paddingBase}lpx` })
      .borderRadius(10)
      .backgroundColor(Color.White)
      .shadow({
        radius: 10,
        color: this.lineColor,
        offsetX: 0,
        offsetY: 0
      });

      // 結(jié)果顯示區(qū)
      Column() {
        Row() {
          // 顯示計算結(jié)果
          Text(this.calculationResult).fontColor(this.textColor).fontSize(18);
        }.justifyContent(FlexAlign.SpaceBetween).width('100%');
      }
      .visibility(this.calculationResult ? Visibility.Visible : Visibility.None)
      .alignItems(HorizontalAlign.Start)
      .width('650lpx')
      .padding(`${this.paddingBase}lpx`)
      .margin({ top: `${this.paddingBase}lpx` })
      .borderRadius(10)
      .backgroundColor(Color.White)
      .shadow({
        radius: 10,
        color: this.lineColor,
        offsetX: 0,
        offsetY: 0
      });
    }
    .height('100%')
    .width('100%')
    .backgroundColor("#f4f8fb");
  }
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容