鸿蒙 NEXT 开发案例：血型遗传计算

@Entry@Componentstruct BloodTypeCalculator {  // 组件的状态和方法定义}

@State private themeColor: string | Color = Color.Orange;@State private textColor: string = "#2e2e2e";@State private lineColor: string = "#d5d5d5";@State private possibleBloodTypesText: string = "";@State private impossibleBloodTypesText: string = "";

getGenes(bloodType: string): string[];combineGenes(fatherGenes: string[], motherGenes: string[]): string[];getBloodTypesFromGenes(genes: string[]): string[];

@State @Watch('capsuleSelectedIndexesChanged') fatherBloodTypeIndex: number[] = [0];@State @Watch('capsuleSelectedIndexesChanged') motherBloodTypeIndex: number[] = [0];
capsuleSelectedIndexesChanged() {  // 更新血型信息}

build() {  Column() {    // 页面标题    Text('血型遗传计算');    // 其他UI元素...  }  .height('100%')  .width('100%')  .backgroundColor("#f4f8fb");}

// 导入SegmentButton及其相关类型定义import { SegmentButton, SegmentButtonItemTuple, SegmentButtonOptions } from '@kit.ArkUI';
// 使用@Entry装饰器标记此组件为入口点@Entry  // 使用@Component装饰器标记此结构体为一个组件@Component  // 定义一个名为BloodTypeCalculator的结构体，用于实现血型遗传计算功能struct BloodTypeCalculator {  // 定义主题颜色，默认为橙色  @State private themeColor: string | Color = Color.Orange;  // 定义文本颜色，默认为深灰色  @State private textColor: string = "#2e2e2e";  // 定义边框颜色，默认为浅灰色  @State private lineColor: string = "#d5d5d5";  // 定义基础内边距大小，默认为30  @State private basePadding: number = 30;  // 存储可能的血型结果  @State private possibleBloodTypesText: string = "";  // 存储不可能的血型结果  @State private impossibleBloodTypesText: string = "";  // 定义血型列表，包含A、B、AB、O四种血型  @State private bloodTypeList: object[] = [Object({ text: 'A' }), Object({ text: 'B' }), Object({ text: 'AB' }), Object({ text: 'O' })];  // 初始化单选胶囊按钮的配置项  @State singleSelectCapsuleOptions: SegmentButtonOptions | undefined = undefined;  // 监听父亲血型选择变化  @State @Watch('capsuleSelectedIndexesChanged') fatherBloodTypeIndex: number[] = [0];  // 监听母亲血型选择变化  @State @Watch('capsuleSelectedIndexesChanged') motherBloodTypeIndex: number[] = [0];
  // 根据血型获取其可能的基因组合  getGenes(bloodType: string): string[] {    console.info(`bloodType:${bloodType}`);    switch (bloodType) {      case 'A': return ['A', 'O']; // A型血可能的基因组合      case 'B': return ['B', 'O']; // B型血可能的基因组合      case 'AB': return ['A', 'B']; // AB型血可能的基因组合      case 'O': return ['O']; // O型血可能的基因组合      default: throw new Error('Invalid blood type'); // 非法血型抛出错误    }  }
  // 组合父母的基因以获得子代可能的基因组合  combineGenes(fatherGenes: string[], motherGenes: string[]): string[] {    const possibleGenes: string[] = []; // 用于存储可能的基因组合    for (const fatherGene of fatherGenes) {      for (const motherGene of motherGenes) {        const combinedGene = [fatherGene, motherGene].sort().join(''); // 将父母的基因组合并排序后加入数组        if (!possibleGenes.includes(combinedGene)) {          possibleGenes.push(combinedGene); // 如果组合尚未存在，则加入数组        }      }    }    return possibleGenes; // 返回所有可能的基因组合  }
  // 根据基因组合确定血型  getBloodTypesFromGenes(genes: string[]): string[] {    const bloodTypes: string[] = []; // 用于存储可能的血型    for (const gene of genes) {      if (gene === 'AA' || gene === 'AO' || gene === 'OA') {        bloodTypes.push('A'); // 基因组合为AA、AO或OA时，血型为A      } else if (gene === 'BB' || gene === 'BO' || gene === 'OB') {        bloodTypes.push('B'); // 基因组合为BB、BO或OB时，血型为B      } else if (gene === 'AB' || gene === 'BA') {        bloodTypes.push('AB'); // 基因组合为AB或BA时，血型为AB      } else if (gene === 'OO') {        bloodTypes.push('O'); // 基因组合为OO时，血型为O      }    }    // 去除重复的血型    return bloodTypes.filter((value, index, self) => self.indexOf(value) === index);  }
  // 计算孩子可能的血型及不可能的血型  calculatePossibleBloodTypes(father: string, mother: string) {    const fatherGenes = this.getGenes(father); // 获取父亲的基因组合    const motherGenes = this.getGenes(mother); // 获取母亲的基因组合    const possibleGenes = this.combineGenes(fatherGenes, motherGenes); // 组合父母的基因    const possibleBloodTypes = this.getBloodTypesFromGenes(possibleGenes); // 从基因组合中获取可能的血型    const allBloodTypes: string[] = ['A', 'B', 'AB', 'O']; // 所有可能的血型列表    const impossibleBloodTypes = allBloodTypes.filter(bt => !possibleBloodTypes.includes(bt)); // 计算不可能的血型    console.log(this.possibleBloodTypesText = `孩子可能血型：${possibleBloodTypes.join('、')}`); // 显示可能的血型    console.log(this.impossibleBloodTypesText = `孩子不可能血型：${impossibleBloodTypes.join('、')}`); // 显示不可能的血型  }
  // 当胶囊按钮的选择发生变化时调用此函数  capsuleSelectedIndexesChanged() {    let father: string = this.bloodTypeList[this.fatherBloodTypeIndex[0]]['text']; // 获取父亲选择的血型    let mother: string = this.bloodTypeList[this.motherBloodTypeIndex[0]]['text']; // 获取母亲选择的血型    this.calculatePossibleBloodTypes(father, mother); // 计算并更新血型信息  }
  // 在组件即将出现时调用此函数  aboutToAppear(): void {    this.singleSelectCapsuleOptions = SegmentButtonOptions.capsule({      buttons: this.bloodTypeList as SegmentButtonItemTuple, // 设置胶囊按钮的选项      multiply: false, // 单选模式      fontColor: Color.White, // 字体颜色为白色      selectedFontColor: Color.White, // 选中时字体颜色为白色      selectedBackgroundColor: this.themeColor, // 选中背景色为主题色      backgroundColor: this.lineColor, // 背景色为边框颜色      backgroundBlurStyle: BlurStyle.BACKGROUND_THICK // 背景模糊效果    });    this.capsuleSelectedIndexesChanged(); // 初始化时调用选择变化处理函数  }
  // 构建用户界面  build() {    Column() {      // 页面标题      Text('血型遗传计算')        .fontColor(this.textColor) // 文本颜色        .fontSize(18) // 字体大小        .width('100%') // 宽度为100%        .height(50) // 高度为50        .textAlign(TextAlign.Center) // 文本居中对齐        .backgroundColor(Color.White) // 背景色为白色        .shadow({ // 添加阴影效果          radius: 2, // 阴影半径          color: this.lineColor, // 阴影颜色          offsetX: 0, // 水平偏移量          offsetY: 5 // 垂直偏移量        });
      // 工具介绍部分      Column() {        Text('工具介绍').fontSize(20).fontWeight(600).fontColor(this.textColor);        Text('血型是以A、B、O三种遗传因子的组合而决定的，根据父母的血型，就可以判断出以后出生的孩子的血型。')          .fontSize(18).fontColor(this.textColor).margin({ top: `${this.basePadding / 2}lpx` });      }      .alignItems(HorizontalAlign.Start)      .width('650lpx')      .padding(`${this.basePadding}lpx`)      .margin({ top: `${this.basePadding}lpx` })      .borderRadius(10)      .backgroundColor(Color.White)      .shadow({        radius: 10,        color: this.lineColor,        offsetX: 0,        offsetY: 0      });
      // 父亲血型选择部分      Column() {        Row() {          Text('父亲血型').fontColor(this.textColor).fontSize(18);          SegmentButton({            options: this.singleSelectCapsuleOptions, // 胶囊按钮的配置项            selectedIndexes: this.fatherBloodTypeIndex // 当前选中的索引          }).width('400lpx');        }.height(45).justifyContent(FlexAlign.SpaceBetween).width('100%');
        // 母亲血型选择部分        Row() {          Text('母亲血型').fontColor(this.textColor).fontSize(18);          SegmentButton({            options: this.singleSelectCapsuleOptions, // 胶囊按钮的配置项            selectedIndexes: this.motherBloodTypeIndex // 当前选中的索引          }).width('400lpx');        }.height(45).justifyContent(FlexAlign.SpaceBetween).width('100%');      }      .alignItems(HorizontalAlign.Start)      .width('650lpx')      .padding(`${this.basePadding}lpx`)      .margin({ top: `${this.basePadding}lpx` })      .borderRadius(10)      .backgroundColor(Color.White)      .shadow({        radius: 10,        color: this.lineColor,        offsetX: 0,        offsetY: 0      });
      // 显示计算结果      Column() {        Row() {          Text(this.possibleBloodTypesText).fontColor(this.textColor).fontSize(18);        }.height(45).justifyContent(FlexAlign.SpaceBetween).width('100%');        Row() {          Text(this.impossibleBloodTypesText).fontColor(this.textColor).fontSize(18);        }.height(45).justifyContent(FlexAlign.SpaceBetween).width('100%');      }      .alignItems(HorizontalAlign.Start)      .width('650lpx')      .padding(`${this.basePadding}lpx`)      .margin({ top: `${this.basePadding}lpx` })      .borderRadius(10)      .backgroundColor(Color.White)      .shadow({        radius: 10,        color: this.lineColor,        offsetX: 0,        offsetY: 0      });    }    .height('100%')    .width('100%')    .backgroundColor("#f4f8fb"); // 页面背景色  }}