b21.gif
【引言】
在快節(jié)奏的現(xiàn)代生活中枚冗，人們往往因?yàn)槊β刀雎粤伺c親戚間的互動(dòng)缓溅，特別是在春節(jié)期間，面對(duì)眾多的長(zhǎng)輩和晚輩時(shí)赁温，很多人會(huì)感到困惑肛宋，不知道該如何正確地稱呼每一位親戚。針對(duì)這一問(wèn)題束世，我們開(kāi)發(fā)了一款基于鴻蒙NEXT平臺(tái)的“親戚關(guān)系計(jì)算器”應(yīng)用酝陈，旨在幫助用戶快速、準(zhǔn)確地識(shí)別和稱呼他們的親戚毁涉。
【環(huán)境準(zhǔn)備】
? 操作系統(tǒng)：Windows 10
? 開(kāi)發(fā)工具：DevEco Studio NEXT Beta1 Build Version: 5.0.3.806
? 目標(biāo)設(shè)備：華為Mate60 Pro
? 開(kāi)發(fā)語(yǔ)言：ArkTS
? 框架：ArkUI
? API版本：API 12
? 三方庫(kù)：@nutpi/relationship（核心算法）
【應(yīng)用背景】
中國(guó)社會(huì)有著深厚的家庭觀念沉帮，親屬關(guān)系復(fù)雜多樣。從血緣到姻親，從直系到旁系穆壕，每一種關(guān)系都有其獨(dú)特的稱呼方式待牵。然而，隨著社會(huì)的發(fā)展喇勋，家庭成員之間的聯(lián)系逐漸變得疏遠(yuǎn)缨该，尤其是對(duì)于年輕人來(lái)說(shuō)，準(zhǔn)確地稱呼每一位親戚成了一項(xiàng)挑戰(zhàn)川背。為了應(yīng)對(duì)這一挑戰(zhàn)贰拿，“親戚關(guān)系計(jì)算器”應(yīng)運(yùn)而生。
【核心功能】
關(guān)系輸入：用戶可以通過(guò)界面輸入或選擇具體的親戚關(guān)系描述熄云，例如“爸爸的哥哥的兒子”膨更。
性別及稱呼選擇：考慮到不同地區(qū)的習(xí)俗差異，應(yīng)用允許用戶選擇自己的性別和希望使用的稱呼方式缴允，比如“哥哥”荚守、“姐夫”等。
關(guān)系計(jì)算：利用@nutpi/relationship庫(kù)练般，根據(jù)用戶提供的信息矗漾，精確計(jì)算出正確的親戚稱呼。
示例與清空：提供示例按鈕供用戶測(cè)試應(yīng)用功能薄料，同時(shí)也設(shè)有清空按鈕方便用戶重新開(kāi)始缩功。
個(gè)性化設(shè)置：支持多種方言和地方習(xí)慣的稱呼方式，讓?xiě)?yīng)用更加貼近用戶的實(shí)際需求都办。
【用戶界面】
應(yīng)用的用戶界面簡(jiǎn)潔明了嫡锌，主要由以下幾個(gè)部分組成：
? 選擇性別：通過(guò)分段按鈕讓用戶選擇自己的性別。
? 選擇稱呼方式：另一個(gè)分段按鈕讓用戶選擇希望的稱呼方式琳钉。
? 輸入關(guān)系描述：提供一個(gè)文本輸入框势木，用戶可以在此處輸入具體的關(guān)系描述。
? 結(jié)果顯示區(qū)：在用戶提交信息后歌懒，這里會(huì)顯示出正確的親戚稱呼啦桌。
? 操作按鈕：包括示例按鈕、清空按鈕等及皂，方便用戶操作甫男。
【完整代碼】
導(dǎo)包
ohpm install @nutpi/relationship
代碼
// 導(dǎo)入關(guān)系計(jì)算模塊
import relationship from "@nutpi/relationship"
// 導(dǎo)入分段按鈕組件及配置類型
import { SegmentButton, SegmentButtonItemTuple, SegmentButtonOptions } from '@kit.ArkUI';
// 使用 @Entry 和 @Component 裝飾器標(biāo)記這是一個(gè)應(yīng)用入口組件
@Entry
@Component
// 定義一個(gè)名為 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;
// 性別選項(xiàng)數(shù)組
@State private genderOptions: object[] = [Object({ text: '男' }), Object({ text: '女' })];
// 稱呼方式選項(xiàng)數(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 = "";
// 計(jì)算結(jié)果顯示
@State calculationResult: string = "";
// 輸入框是否獲得焦點(diǎn)
@State isInputFocused: boolean = false;
// 當(dāng)選擇發(fā)生改變時(shí)，更新關(guān)系計(jì)算
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)系計(jì)算模塊進(jìn)行計(jì)算
const result: string[] = relationship({ text: this.userInput, reverse: reverse, sex: gender }) as string[];
// 如果有計(jì)算結(jié)果若治，則更新顯示慨蓝；否則顯示默認(rèn)提示
if (result && result.length > 0) {
this.calculationResult = `${reverse ? '對(duì)方稱呼我' : '我稱呼對(duì)方'}：${result[0]}`;
} else {
this.calculationResult = this.userInput ? '當(dāng)前信息未查到關(guān)系' : '';
}
}
// 組件即將顯示時(shí)，初始化性別和稱呼方式選擇按鈕的配置
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)系計(jì)算器')
.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 ? `請(qǐng)輸入稱呼端幼。如：${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() {
// 顯示計(jì)算結(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");
}
}
