本案例应用前面学习的基础知识，重点应用ArkTS来实现5个算法题。

一、案例运用到的知识点

  • ArkTS语言：HarmonyOS应用开发的优选开发语言
  • 自定义组件：由开发者定义的组件
  • 基础自定义弹出框：CustomDialog
  • 文本输入组件：TextInput
  • 其他内置组件：Column/Text/Button
  • 常量与资源分类的访问
  • DevEco Studio的基本使用

二、代码结构

├──entry/src/main/ets/
│  ├──common
│  │  ├──constants
│  │  │  └──Constants.ets                       // 常量类
│  │  └──utils
│  │     ├──CommonUtils.ets                     // 弹窗工具类
│  │     ├──Logger.ets                          // 日志工具类
│  │     └──Method.ets                          // 算法工具类
│  ├──entryability
│  │  └──EntryAbility.ets  
│  ├──entrybackupability
│  │  └──EntryBackupAbility.ets
│  ├──pages
│  │  └──Index.ets                              // 界面实现
│  └──view
│     ├──DaffodilsNumberCustomDialog.ets        // 水仙花数弹窗实现
│     ├──IsLeapYearCustomDialog.ets             // 闰年判断数弹窗实现 
│     ├──IsPalindromicStringCustomDialog.ets    // 回文字符串判断数弹窗实现
│     ├──MultiplicationTableCustomDialog.ets    // 九九乘法表弹窗实现
│     └──StringReversalCustomDialog.ets         // 字符串反转弹窗实现 
└───entry/src/main/resources                    // 应用资源目录

三、公共文件与资源

本案例涉及到的常量类和工具类代码如下：

1. 通用日志类

// entry/src/main/ets/common/utils/Logger.ets
import { hilog } from '@kit.PerformanceAnalysisKit'

const LOGGER_PREFIX: string = 'ArkTSAlgorithm'

class Logger {
  private domain: number
  private prefix: string
  private format: string = '%{public}s, %{public}s'

  constructor(prefix: string = '', domain: number = 0xFF00) {
    this.prefix = prefix
    this.domain = domain
  }

  debug(...args: string[]): void {
    hilog.debug(this.domain, this.prefix, this.format, args)
  }

  info(...args: string[]): void {
    hilog.info(this.domain, this.prefix, this.format, args)
  }

  warn(...args: string[]): void {
    hilog.warn(this.domain, this.prefix, this.format, args)
  }

  error(...args: string[]): void {
    hilog.error(this.domain, this.prefix, this.format, args)
  }
}

export default new Logger(LOGGER_PREFIX, 0xFF02)

2. 常量类

// entry/src/main/ets/common/constants/Constants.ets
export class CommonConstants {
  static readonly OFFSET_X: number = 0
  static readonly OFFSET_Y: number = -25
  static readonly PERCENT_NINETY: string = '90%'
  static readonly PERCENT_FULL: string = '100%'
  static readonly FONT_WEIGHT_SEVEN_HUNDRED: number = 700
  static readonly LEAP_YEAR_INPUT: string = '请输入一个年份'
  static readonly LEAP_YEAR_YES: string = '该年份是闰年'
  static readonly LEAP_YEAR_NO: string = '该年份不是闰年'
  static readonly STRING_INPUT: string = '请输入一个字符串'
  static readonly PALINDROMIC_STRING_YES: string = '该字符串是回文字符串'
  static readonly PALINDROMIC_STRING_NO: string = '该字符串不是回文字符串'
  static readonly STRING_PRE: string = '反转结果为：'
  static readonly TOAST_TIME: number = 2000
}

本案例涉及到的资源文件如下：

3. string.json

修改 entry/src/main/resources/base/element/string.json：

{
  "string": [
    {
      "name": "module_desc",
      "value": "模块描述"
    },
    {
      "name": "EntryAbility_desc",
      "value": "description"
    },
    {
      "name": "EntryAbility_label",
      "value": "ArkTS开发案例"
    },
    {
      "name": "ArkTS_Development_Case",
      "value": "基于ArkTS的5个算法题"
    },
    {
      "name": "DaffodilsNumber",
      "value": "打印水仙花数"
    },
    {
      "name": "MultiplicationTable",
      "value": "打印九九乘法表"
    },
    {
      "name": "IsPalindromicString",
      "value": "判断字符串是否为回文字符串"
    },
    {
      "name": "StringReversal",
      "value": "字符串反转"
    },
    {
      "name": "IsLeapYear",
      "value": "判断是否为闰年"
    },
    {
      "name": "DaffodilsNumberTitle",
      "value": "水仙花数"
    },
    {
      "name": "Judgment_of_leap_year",
      "value": "闰年判断"
    },
    {
      "name": "Judgment_of_palindromic_string",
      "value": "回文字符串判断"
    },
    {
      "name": "Multiplication_Table_Title",
      "value": "九九乘法表"
    },
    {
      "name": "check_info_in_log",
      "value": "请在日志打印中查看"
    }
  ]
}

4. float.json

修改 entry/src/main/resources/base/element/float.json：

{
  "float": [
    {
      "name": "text_margin_top",
      "value": "64vp"
    },
    {
      "name": "text_margin_bottom",
      "value": "8vp"
    },
    {
      "name": "text_margin_left",
      "value": "12vp"
    },
    {
      "name": "text_margin_right",
      "value": "20vp"
    },
    {
      "name": "text_font_size",
      "value": "30fp"
    },
    {
      "name": "button_width",
      "value": "288vp"
    },
    {
      "name": "button_height",
      "value": "40vp"
    },
    {
      "name": "button_margin_top",
      "value": "12vp"
    },
    {
      "name": "button_margin_bottom",
      "value": "16vp"
    },
    {
      "name": "dialog_text_margin_left",
      "value": "10vp"
    },
    {
      "name": "dialog_text_height",
      "value": "72vp"
    },
    {
      "name": "dialog_text_margin_top",
      "value": "8vp"
    },
    {
      "name": "dialog_padding",
      "value": "24vp"
    },
    {
      "name": "dialog_button_width",
      "value": "296vp"
    },
    {
      "name": "dialog_textInput_height",
      "value": "48vp"
    }
  ]
}

四、首页布局

首先进行首页的UI搭建：

// entry/src/main/ets/pages/Index.ets
import { CommonConstants } from '../common/constants/Constants'

@Entry
  @Component
  struct Index {
    build() {
      Column() {
        Text($r('app.string.ArkTS_Development_Case'))
          .width(CommonConstants.PERCENT_NINETY)
          .margin({
            top: $r('app.float.text_margin_top'),
            bottom: $r('app.float.text_margin_bottom'),
            left: $r('app.float.text_margin_left'),
            right: $r('app.float.text_margin_right')
          })
          .font({
            size: $r('app.float.text_font_size'),
            weight: CommonConstants.FONT_WEIGHT_SEVEN_HUNDRED
          })

        Column() {
          Button($r('app.string.DaffodilsNumber'))
            .width($r('app.float.button_width'))
            .height($r('app.float.button_height'))

          Button($r('app.string.MultiplicationTable'))
            .width($r('app.float.button_width'))
            .height($r('app.float.button_height'))
            .margin({ top: $r('app.float.button_margin_top') })

          Button($r('app.string.IsPalindromicString'))
            .width($r('app.float.button_width'))
            .height($r('app.float.button_height'))
            .margin({ top: $r('app.float.button_margin_top') })

          Button($r('app.string.StringReversal'))
            .width($r('app.float.button_width'))
            .height($r('app.float.button_height'))
            .margin({ top: $r('app.float.button_margin_top') })

          Button($r('app.string.IsLeapYear'))
            .width($r('app.float.button_width'))
            .height($r('app.float.button_height'))
            .margin({
              top: $r('app.float.button_margin_top'),
              bottom: $r('app.float.button_margin_bottom')
            })
        }
      }
      .justifyContent(FlexAlign.SpaceBetween)
        .width(CommonConstants.PERCENT_FULL)
        .height(CommonConstants.PERCENT_FULL)
    }
  }

五、水仙花数

1. 水仙花数算法实现

// entry/src/main/ets/common/utils/Method.ets
export function daffodilsNumber(): number[] {
  let result: number[] = []
  for (let i = 100; i < 1000; i++) {
    let unitsDigit: number = i % 10
    let tenthsDigit: number = Math.floor(i / 10) - Math.floor(i / 100) * 10
    let hundredthsDigit: number = Math.floor(i / 100)
    if (i == unitsDigit * unitsDigit * unitsDigit + tenthsDigit * tenthsDigit * tenthsDigit +
      hundredthsDigit * hundredthsDigit * hundredthsDigit) {
      result.push(i)
    }
  }
  return result
}

2. 水仙花数自定义弹窗

// entry/src/main/ets/views/DaffodilsNumberCustomDialog.ets
import { CommonConstants } from "../common/constants/Constants"
import { daffodilsNumber } from '../common/utils/Method'

@CustomDialog
export struct DaffodilsNumberCustomDialog {
  controller?: CustomDialogController

  build() {
    Column() {
      Column() {
        Text($r('app.string.ArkTS_Development_Case'))
          .height($r('app.float.button_height'))
          .font({size: $r('sys.float.ohos_id_text_size_headline8')})
          .fontColor($r('sys.color.ohos_id_color_text_primary'))
          .margin({top: $r('app.float.dialog_text_margin_top')})
        Text($r('app.string.DaffodilsNumberTitle'))
          .font({size: $r('sys.float.ohos_id_text_size_body2')})
          .fontColor($r('sys.color.ohos_id_color_text_secondary'))
          .margin({left: $r('app.float.dialog_text_margin_left')})
      }
      .alignItems(HorizontalAlign.Center)
      .width(CommonConstants.PERCENT_FULL)
      .height($r('app.float.dialog_text_height'))

      Text(daffodilsNumber().toString())
        .font({size: $r('sys.float.ohos_id_text_size_body1')})
        .fontColor($r('sys.color.ohos_id_color_text_primary'))
        .margin({top: $r('app.float.dialog_padding')})
    }
    .alignItems(HorizontalAlign.Center)
    .padding({
      left: $r('app.float.dialog_padding'),
      right: $r('app.float.dialog_padding'),
      bottom: $r('app.float.dialog_padding')
    })
  }
}

3. 水仙花数弹窗首页引入

// entry/src/main/ets/pages/Index.ets
import { CommonConstants } from '../common/constants/Constants'

/* 引入水仙花弹窗 --start-- */
import { 
  DaffodilsNumberCustomDialog
} from '../views/DaffodilsNumberCustomDialog'
/* 引入水仙花弹窗 --end-- */

@Entry
@Component
struct Index {
  /* 定义水仙花弹窗控制器 --start-- */
  daffodilsNumberCustomDialogController: CustomDialogController 
    = new CustomDialogController({
      builder: DaffodilsNumberCustomDialog(),
      alignment: DialogAlignment.Center,
      offset: {
        dx: CommonConstants.OFFSET_X,
        dy: CommonConstants.OFFSET_Y
      }
    })
  /* 定义水仙花弹窗控制器 --end-- */

  build() {
    Column() {
      Text($r('app.string.ArkTS_Development_Case'))
        .width(CommonConstants.PERCENT_NINETY)
        .margin({
          top: $r('app.float.text_margin_top'),
          bottom: $r('app.float.text_margin_bottom'),
          left: $r('app.float.text_margin_left'),
          right: $r('app.float.text_margin_right')
        })
        .font({
          size: $r('app.float.text_font_size'),
          weight: CommonConstants.FONT_WEIGHT_SEVEN_HUNDRED
        })

      Column() {
        Button($r('app.string.DaffodilsNumber'))
          .width($r('app.float.button_width'))
          .height($r('app.float.button_height'))
          
          /* 打开水仙花弹窗 --start-- */
          .onClick(() => {
            this.daffodilsNumberCustomDialogController.open()
          })
          /* 打开水仙花弹窗 --end-- */

        Button($r('app.string.MultiplicationTable'))
          .width($r('app.float.button_width'))
          .height($r('app.float.button_height'))
          .margin({ top: $r('app.float.button_margin_top') })

        Button($r('app.string.IsPalindromicString'))
          .width($r('app.float.button_width'))
          .height($r('app.float.button_height'))
          .margin({ top: $r('app.float.button_margin_top') })

        Button($r('app.string.StringReversal'))
          .width($r('app.float.button_width'))
          .height($r('app.float.button_height'))
          .margin({ top: $r('app.float.button_margin_top') })

        Button($r('app.string.IsLeapYear'))
          .width($r('app.float.button_width'))
          .height($r('app.float.button_height'))
          .margin({
            top: $r('app.float.button_margin_top'),
            bottom: $r('app.float.button_margin_bottom')
          })
      }
    }
    .justifyContent(FlexAlign.SpaceBetween)
    .width(CommonConstants.PERCENT_FULL)
    .height(CommonConstants.PERCENT_FULL)
  }
}

六、九九乘法表

1. 打印效果

2. 九九乘法表算法实现

// entry/src/main/ets/common/utils/Method.ets
export function multiplicationTable(): string[][] {
  let result: string[][] = []
  for (let i = 1; i <= 9; i++) {
    let index: string[] = []
    for (let j = 1; j <= i; j++) {
      let temp: string = `${j} ✖ ${i} = ${i * j}`
      index.push(temp)
    }
    result.push(index)
  }
  return result
}

3. 九九乘法表自定义弹窗

// entry/src/main/ets/views/MultiplicationTableCustomDialog.ets
import { CommonConstants } from '../common/constants/Constants'

@CustomDialog
export struct MultiplicationTableCustomDialog {
  controller?: CustomDialogController

  build() {
    Column() {
      Column() {
        Text($r('app.string.ArkTS_Development_Case'))
          .height($r('app.float.button_height'))
          .font({ size: $r('sys.float.ohos_id_text_size_headline8') })
          .fontColor($r('sys.color.ohos_id_color_text_primary'))
          .margin({ top: $r('app.float.dialog_text_margin_top') })
        Text($r('app.string.Multiplication_Table_Title'))
          .font({ size: $r('sys.float.ohos_id_text_size_body2') })
          .fontColor($r('sys.color.ohos_id_color_text_secondary'))
          .margin({ left: $r('app.float.dialog_text_margin_left') })
      }
      .alignItems(HorizontalAlign.Center)
      .width(CommonConstants.PERCENT_FULL)
      .height($r('app.float.dialog_text_height'))

      Text($r('app.string.check_info_in_log'))
        .font({ size: $r('sys.float.ohos_id_text_size_body1') })
        .fontColor($r('sys.color.ohos_id_color_text_primary'))
        .margin({ top: $r('app.float.dialog_padding') })
    }
    .alignItems(HorizontalAlign.Center)
    .padding({
      left: $r('app.float.dialog_padding'),
      right: $r('app.float.dialog_padding'),
      bottom: $r('app.float.dialog_padding')
    })
  }
}

4. 九九乘法表弹窗首页引入

// entry/src/main/ets/pages/Index.ets
import { CommonConstants } from '../common/constants/Constants'
import { 
  DaffodilsNumberCustomDialog
} from '../views/DaffodilsNumberCustomDialog'

/* 引入九九乘法表弹窗、算法函数及日志类 --start-- */
import { 
  MultiplicationTableCustomDialog
} from '../views/MultiplicationTableCustomDialog'
import { multiplicationTable } from '../common/utils/Method'
import Logger from '../common/utils/Logger'
/* 引入九九乘法表弹窗、算法函数及日志类 --end-- */

@Entry
@Component
struct Index {
  daffodilsNumberCustomDialogController: CustomDialogController 
    = new CustomDialogController({
      builder: DaffodilsNumberCustomDialog(),
      alignment: DialogAlignment.Center,
      offset: {
        dx: CommonConstants.OFFSET_X,
        dy: CommonConstants.OFFSET_Y
      }
    })
  
  /* 定义九九乘法表弹窗控制器 --start-- */
  multiplicationTableCustomDialogController: CustomDialogController 
    = new CustomDialogController({
      builder: MultiplicationTableCustomDialog(),
      alignment: DialogAlignment.Center,
      offset: {
        dx: CommonConstants.OFFSET_X,
        dy: CommonConstants.OFFSET_Y
      }
    })
  /* 定义九九乘法表弹窗控制器 --end-- */

  build() {
    Column() {
      Text($r('app.string.ArkTS_Development_Case'))
        .width(CommonConstants.PERCENT_NINETY)
        .margin({
          top: $r('app.float.text_margin_top'),
          bottom: $r('app.float.text_margin_bottom'),
          left: $r('app.float.text_margin_left'),
          right: $r('app.float.text_margin_right')
        })
        .font({
          size: $r('app.float.text_font_size'),
          weight: CommonConstants.FONT_WEIGHT_SEVEN_HUNDRED
        })

      Column() {
        Button($r('app.string.DaffodilsNumber'))
          .width($r('app.float.button_width'))
          .height($r('app.float.button_height'))
          .onClick(() => {
            this.daffodilsNumberCustomDialogController.open()
          })

        Button($r('app.string.MultiplicationTable'))
          .width($r('app.float.button_width'))
          .height($r('app.float.button_height'))
          .margin({ top: $r('app.float.button_margin_top') })
          
          /* 打开九九乘法表弹窗，并在日志控制台打印乘法表 --start-- */
          .onClick(() => {
            this.multiplicationTableCustomDialogController.open()
            let result = multiplicationTable()
            for(let index = 0; index < result.length; index++) {
              Logger.info(result[index].toString(), '')
            }
          })
          /* 打开九九乘法表弹窗，并在日志控制台打印乘法表 --end-- */

        Button($r('app.string.IsPalindromicString'))
          .width($r('app.float.button_width'))
          .height($r('app.float.button_height'))
          .margin({ top: $r('app.float.button_margin_top') })

        Button($r('app.string.StringReversal'))
          .width($r('app.float.button_width'))
          .height($r('app.float.button_height'))
          .margin({ top: $r('app.float.button_margin_top') })

        Button($r('app.string.IsLeapYear'))
          .width($r('app.float.button_width'))
          .height($r('app.float.button_height'))
          .margin({
            top: $r('app.float.button_margin_top'),
            bottom: $r('app.float.button_margin_bottom')
          })
      }
    }
    .justifyContent(FlexAlign.SpaceBetween)
    .width(CommonConstants.PERCENT_FULL)
    .height(CommonConstants.PERCENT_FULL)
  }
}

七、回文字符串判断

1. 交互效果

2. 判断回文算法实现

// entry/src/main/ets/common/utils/Method.ets
export function isPalindromicString(content: string): boolean {
  let result: boolean = true
  let i: number = 0
  let j: number = content.length - 1
  while (i <= j) {
    if (content.charAt(i) != content.charAt(j)) {
      result = false
      break
    }
    i++
    j--
  }
  return result
}

3. 判断回文自定义弹窗

  • 弹窗组件
// entry/src/main/ets/views/IsPalindromicStringCustomDialog.ets
import { CommonConstants } from "../common/constants/Constants"
import { isPalindromicString } from '../common/utils/Method'
import CommonUtils from '../common/utils/CommonUtils'

@CustomDialog
export struct IsPalindromicStringCustomDialog {
  @State content: string = ''
  @State result: boolean = false
  controller?: CustomDialogController

  build() {
    Column() {
      Column() {
        Text($r('app.string.ArkTS_Development_Case'))
          .height($r('app.float.button_height'))
          .font({ size: $r('sys.float.ohos_id_text_size_headline8') })
          .fontColor($r('sys.color.ohos_id_color_text_primary'))
          .margin({ top: $r('app.float.dialog_text_margin_top') })
        Text($r('app.string.IsPalindromicString'))
          .font({ size: $r('sys.float.ohos_id_text_size_body2') })
          .fontColor($r('sys.color.ohos_id_color_text_secondary'))
          .margin({ left: $r('app.float.dialog_text_margin_left') })
      }
      .alignItems(HorizontalAlign.Center)
      .width(CommonConstants.PERCENT_FULL)
      .height($r('app.float.dialog_text_height'))

      TextInput({ placeholder: CommonConstants.STRING_INPUT })
        .margin({ top: $r('app.float.dialog_padding')})
        .height($r('app.float.dialog_textInput_height'))
        .showUnderline(true)
        .onChange((value: string) => {
          this.content = value
        })

      Button($r('app.string.IsPalindromicString'))
        .width($r('app.float.dialog_button_width'))
        .margin({
          top: $r('app.float.button_margin_bottom'),
          bottom: $r('app.float.dialog_padding')
        })
        .onClick(() => {
          this.result = isPalindromicString(this.content)
          if (this.result) {
            CommonUtils.showToast(CommonConstants.PALINDROMIC_STRING_YES)
          } else {
            CommonUtils.showToast(CommonConstants.PALINDROMIC_STRING_NO)
          }
        })
    }
    .alignItems(HorizontalAlign.Center)
    .padding({
      left: $r('app.float.dialog_padding'),
      right: $r('app.float.dialog_padding')
    })
  }
}
  • 轻提示弹框类封装
// entry/src/main/ets/common/utils/CommonUtils.ets
import { promptAction } from '@kit.ArkUI'
import { CommonConstants } from '../constants/Constants'

export class CommonUtils {
  showToast(message: string) {
    promptAction.showToast({
      message: message,
      duration: CommonConstants.TOAST_TIME
    })
  }
}

let commonUtils = new CommonUtils()

export default commonUtils

4. 判断回文弹窗首页引入

// pages/Index.ets

import { CommonConstants } from '../common/constants/Constants'
import Logger from '../common/utils/Logger'
import { 
  DaffodilsNumberCustomDialog
} from '../views/DaffodilsNumberCustomDialog'
import {
  MultiplicationTableCustomDialog
} from '../views/MultiplicationTableCustomDialog'
import { multiplicationTable } from '../common/utils/Method'

/* 引入判断回文弹窗 --start-- */
import { 
  IsPalindromicStringCustomDialog
} from '../views/IsPalindromicStringCustomDialog'
/* 引入判断回文弹窗 --end-- */

@Entry
@Component
struct Index {
  daffodilsNumberCustomDialogController: CustomDialogController 
    = new CustomDialogController({
      builder: DaffodilsNumberCustomDialog(),
      alignment: DialogAlignment.Center,
      offset: {
        dx: CommonConstants.OFFSET_X,
        dy: CommonConstants.OFFSET_Y
      }
    })

  multiplicationTableCustomDialogController: CustomDialogController 
    = new CustomDialogController({
      builder: MultiplicationTableCustomDialog(),
      alignment: DialogAlignment.Center,
      offset: {
        dx: CommonConstants.OFFSET_X,
        dy: CommonConstants.OFFSET_Y
      }
    })

  /* 定义判断回文弹窗控制器 --start-- */
  isPalindromicStringCustomDialogController: CustomDialogController 
    = new CustomDialogController({
      builder: IsPalindromicStringCustomDialog(),
      alignment: DialogAlignment.Center,
      offset: {
        dx: CommonConstants.OFFSET_X,
        dy: CommonConstants.OFFSET_Y
      }
    })
  /* 定义判断回文弹窗控制器 --end-- */

  build() {
    Column() {
      Text($r('app.string.ArkTS_Development_Case'))
        .width(CommonConstants.PERCENT_NINETY)
        .margin({
          top: $r('app.float.text_margin_top'),
          bottom: $r('app.float.text_margin_bottom'),
          left: $r('app.float.text_margin_left'),
          right: $r('app.float.text_margin_right')
        })
        .font({
          size: $r('app.float.text_font_size'),
          weight: CommonConstants.FONT_WEIGHT_SEVEN_HUNDRED
        })

      Column() {
        Button($r('app.string.DaffodilsNumber'))
          .width($r('app.float.button_width'))
          .height($r('app.float.button_height'))
          .onClick(() => {
            this.daffodilsNumberCustomDialogController.open()
          })

        Button($r('app.string.MultiplicationTable'))
          .width($r('app.float.button_width'))
          .height($r('app.float.button_height'))
          .margin({ top: $r('app.float.button_margin_top') })
          .onClick(() => {
            this.multiplicationTableCustomDialogController.open()
            let result = multiplicationTable()
            for(let index = 0; index < result.length; index++) {
              Logger.info(result[index].toString(), '')
            }
          })

        Button($r('app.string.IsPalindromicString'))
          .width($r('app.float.button_width'))
          .height($r('app.float.button_height'))
          .margin({ top: $r('app.float.button_margin_top') })

          /* 打开判断回文弹窗 --start-- */
          .onClick(() => {
            this.isPalindromicStringCustomDialogController.open()
          })
          /* 打开判断回文弹窗 --end-- */

        Button($r('app.string.StringReversal'))
          .width($r('app.float.button_width'))
          .height($r('app.float.button_height'))
          .margin({ top: $r('app.float.button_margin_top') })

        Button($r('app.string.IsLeapYear'))
          .width($r('app.float.button_width'))
          .height($r('app.float.button_height'))
          .margin({
            top: $r('app.float.button_margin_top'),
            bottom: $r('app.float.button_margin_bottom')
          })
      }
    }
    .justifyContent(FlexAlign.SpaceBetween)
    .width(CommonConstants.PERCENT_FULL)
    .height(CommonConstants.PERCENT_FULL)
  }
}

八、字符串反转

1. 交互效果

2. 字符串反转算法实现

// entry/src/main/ets/common/utils/Method.ets
export function stringReversal(content: string): string {
  let result: string = ''
  for (let index = content.length - 1; index >= 0; index--) {
    result += content.charAt(index)
  }
  return result
}

3. 字符串反转自定义窗口

// entry/src/main/ets/views/StringReversalCustomDialog.ets
import { CommonConstants } from '../common/constants/Constants'
import CommonUtils from '../common/utils/CommonUtils'
import { stringReversal } from '../common/utils/Method'

@CustomDialog
export struct StringReversalCustomDialog {
  @State content: string = '';
  @State result: string = '';
  controller?: CustomDialogController;

  build() {
    Column() {
      Column() {
        Text($r('app.string.ArkTS_Development_Case'))
          .height($r('app.float.button_height'))
          .font({ size: $r('sys.float.ohos_id_text_size_headline8') })
          .fontColor($r('sys.color.ohos_id_color_text_primary'))
          .margin({ top: $r('app.float.dialog_text_margin_top') })
        Text($r('app.string.StringReversal'))
          .font({ size: $r('sys.float.ohos_id_text_size_body2') })
          .fontColor($r('sys.color.ohos_id_color_text_secondary'))
          .margin({ left: $r('app.float.dialog_text_margin_left') })
      }
      .alignItems(HorizontalAlign.Center)
      .width(CommonConstants.PERCENT_FULL)
      .height($r('app.float.dialog_text_height'))

      TextInput({ placeholder: CommonConstants.STRING_INPUT })
        .margin({ top: $r('app.float.dialog_padding') })
        .height($r('app.float.dialog_textInput_height'))
        .showUnderline(true)
        .onChange((value: string) => {
          this.content = value;
        })
      Button($r('app.string.StringReversal'))
        .width($r('app.float.dialog_button_width'))
        .margin({
          top: $r('app.float.button_margin_bottom'),
          bottom: $r('app.float.dialog_padding')
        })
        .onClick(() => {
          this.result = stringReversal(this.content)
          CommonUtils.showToast(CommonConstants.STRING_PRE + this.result)
        })
    }
    .alignItems(HorizontalAlign.Center)
    .padding({
      left: $r('app.float.dialog_padding'),
      right: $r('app.float.dialog_padding')
    })
  }
}

4. 字符串反转弹窗首页引入

// pages/Index.ets

import { CommonConstants } from '../common/constants/Constants'
import Logger from '../common/utils/Logger'
import { 
  DaffodilsNumberCustomDialog
} from '../views/DaffodilsNumberCustomDialog'
import { 
  MultiplicationTableCustomDialog
} from '../views/MultiplicationTableCustomDialog'
import { multiplicationTable } from '../common/utils/Method'
import {
  IsPalindromicStringCustomDialog
} from '../views/IsPalindromicStringCustomDialog'

/* 引入字符串反转弹窗 --start-- */
import { StringReversalCustomDialog } from '../views/StringReversalCustomDialog'
/* 引入字符串反转弹窗 --end-- */

@Entry
@Component
struct Index {
  daffodilsNumberCustomDialogController: CustomDialogController 
    = new CustomDialogController({
      builder: DaffodilsNumberCustomDialog(),
      alignment: DialogAlignment.Center,
      offset: {
        dx: CommonConstants.OFFSET_X,
        dy: CommonConstants.OFFSET_Y
      }
    })

  multiplicationTableCustomDialogController: CustomDialogController 
    = new CustomDialogController({
      builder: MultiplicationTableCustomDialog(),
      alignment: DialogAlignment.Center,
      offset: {
        dx: CommonConstants.OFFSET_X,
        dy: CommonConstants.OFFSET_Y
      }
    })

  isPalindromicStringCustomDialogController: CustomDialogController 
    = new CustomDialogController({
      builder: IsPalindromicStringCustomDialog(),
      alignment: DialogAlignment.Center,
      offset: {
        dx: CommonConstants.OFFSET_X,
        dy: CommonConstants.OFFSET_Y
      }
    })

  /* 定义字符串反转弹窗控制器 --start-- */
  stringReversalCustomDialogController: CustomDialogController 
    = new CustomDialogController({
      builder: StringReversalCustomDialog(),
      alignment: DialogAlignment.Center,
      offset: {
        dx: CommonConstants.OFFSET_X,
        dy: CommonConstants.OFFSET_Y
      }
    })
  /* 定义字符串反转弹窗控制器 --end-- */

  build() {
    Column() {
      Text($r('app.string.ArkTS_Development_Case'))
        .width(CommonConstants.PERCENT_NINETY)
        .margin({
          top: $r('app.float.text_margin_top'),
          bottom: $r('app.float.text_margin_bottom'),
          left: $r('app.float.text_margin_left'),
          right: $r('app.float.text_margin_right')
        })
        .font({
          size: $r('app.float.text_font_size'),
          weight: CommonConstants.FONT_WEIGHT_SEVEN_HUNDRED
        })

      Column() {
        Button($r('app.string.DaffodilsNumber'))
          .width($r('app.float.button_width'))
          .height($r('app.float.button_height'))
          .onClick(() => {
            this.daffodilsNumberCustomDialogController.open()
          })

        Button($r('app.string.MultiplicationTable'))
          .width($r('app.float.button_width'))
          .height($r('app.float.button_height'))
          .margin({ top: $r('app.float.button_margin_top') })
          .onClick(() => {
            this.multiplicationTableCustomDialogController.open()
            let result = multiplicationTable()
            for(let index = 0; index < result.length; index++) {
              Logger.info(result[index].toString(), '')
            }
          })

        Button($r('app.string.IsPalindromicString'))
          .width($r('app.float.button_width'))
          .height($r('app.float.button_height'))
          .margin({ top: $r('app.float.button_margin_top') })
          .onClick(() => {
            this.isPalindromicStringCustomDialogController.open()
          })

        Button($r('app.string.StringReversal'))
          .width($r('app.float.button_width'))
          .height($r('app.float.button_height'))
          .margin({ top: $r('app.float.button_margin_top') })

          /* 打开字符串反转弹窗 --start-- */
          .onClick(() => {
            this.stringReversalCustomDialogController.open()
          })
          /* 打开字符串反转弹窗 --end-- */

        Button($r('app.string.IsLeapYear'))
          .width($r('app.float.button_width'))
          .height($r('app.float.button_height'))
          .margin({
            top: $r('app.float.button_margin_top'),
            bottom: $r('app.float.button_margin_bottom')
          })
      }
    }
    .justifyContent(FlexAlign.SpaceBetween)
    .width(CommonConstants.PERCENT_FULL)
    .height(CommonConstants.PERCENT_FULL)
  }
}

九、闰年判断

1. 交互效果

2. 判断闰年算法实现

// entry/src/main/ets/common/utils/Method.ets
export function isLeapYear(year: number): boolean {
  let result: boolean = false;
  if ((year % 4 == 0 && year % 100 != 0) || (year % 400 === 0)) {
    result = true
  } else {
    result = false
  }
  return result
}

3. 判断闰年自定义弹窗

// entry/src/main/ets/views/IsLeapYearCustomDialog.ets
import { CommonConstants } from '../common/constants/Constants'
import CommonUtils from '../common/utils/CommonUtils'
import { isLeapYear } from '../common/utils/Method'

@CustomDialog
export struct IsLeapYearCustomDialog {
  @State content: string = ''
  @State result: boolean = false
  IsPalindromicStringCustomDialogController?: CustomDialogController

  build() {
    Column() {
      Column() {
        Text($r('app.string.ArkTS_Development_Case'))
          .height($r('app.float.button_height'))
          .font({ size: $r('sys.float.ohos_id_text_size_headline8') })
          .fontColor($r('sys.color.ohos_id_color_text_primary'))
          .margin({ top: $r('app.float.dialog_text_margin_top') })
        Text($r('app.string.Judgment_of_leap_year'))
          .font({ size: $r('sys.float.ohos_id_text_size_body2') })
          .fontColor($r('sys.color.ohos_id_color_text_secondary'))
          .margin({ left: $r('app.float.dialog_text_margin_left') })
      }
      .alignItems(HorizontalAlign.Center)
      .width(CommonConstants.PERCENT_FULL)
      .height($r('app.float.dialog_text_height'))

      TextInput({ placeholder: CommonConstants.LEAP_YEAR_INPUT })
        .margin({ top: $r('app.float.dialog_padding') })
        .height($r('app.float.dialog_textInput_height'))
        .showUnderline(true)
        .onChange((value: string) => {
          this.content = value;
        })
      Button($r('app.string.IsLeapYear'))
        .width($r('app.float.dialog_button_width'))
        .margin({
          top: $r('app.float.button_margin_bottom'),
          bottom: $r('app.float.dialog_padding')
        })
        .onClick(() => {
          this.result = isLeapYear(Number.parseInt(this.content))
          if (this.result) {
            CommonUtils.showToast(CommonConstants.LEAP_YEAR_YES)
          } else {
            CommonUtils.showToast(CommonConstants.LEAP_YEAR_NO)
          }
        })
    }
    .alignItems(HorizontalAlign.Center)
    .padding({
      left: $r('app.float.dialog_padding'),
      right: $r('app.float.dialog_padding')
    })
  }
}

4. 判断闰年弹窗首页引入

import { CommonConstants } from '../common/constants/Constants'
import Logger from '../common/utils/Logger'
import { 
  DaffodilsNumberCustomDialog
} from '../views/DaffodilsNumberCustomDialog'
import { 
  MultiplicationTableCustomDialog
} from '../views/MultiplicationTableCustomDialog'
import { 
  multiplicationTable
} from '../common/utils/Method'
import { 
  IsPalindromicStringCustomDialog
} from '../views/IsPalindromicStringCustomDialog'
import { StringReversalCustomDialog } from '../views/StringReversalCustomDialog'

/* 引入判断闰年弹窗 --start-- */
import { IsLeapYearCustomDialog } from '../views/IsLeapYearCustomDialog'
/* 引入判断闰年弹窗 --end-- */

@Entry
@Component
struct Index {
  daffodilsNumberCustomDialogController: CustomDialogController 
    = new CustomDialogController({
      builder: DaffodilsNumberCustomDialog(),
      alignment: DialogAlignment.Center,
      offset: {
        dx: CommonConstants.OFFSET_X,
        dy: CommonConstants.OFFSET_Y
      }
    })

  multiplicationTableCustomDialogController: CustomDialogController 
    = new CustomDialogController({
      builder: MultiplicationTableCustomDialog(),
      alignment: DialogAlignment.Center,
      offset: {
        dx: CommonConstants.OFFSET_X,
        dy: CommonConstants.OFFSET_Y
      }
    })

  isPalindromicStringCustomDialogController: CustomDialogController 
    = new CustomDialogController({
      builder: IsPalindromicStringCustomDialog(),
      alignment: DialogAlignment.Center,
      offset: {
        dx: CommonConstants.OFFSET_X,
        dy: CommonConstants.OFFSET_Y
      }
    })

  stringReversalCustomDialogController: CustomDialogController 
    = new CustomDialogController({
      builder: StringReversalCustomDialog(),
      alignment: DialogAlignment.Center,
      offset: {
        dx: CommonConstants.OFFSET_X,
        dy: CommonConstants.OFFSET_Y
      }
    })

  /* 定义判断闰年弹窗控制器 --start-- */
  isLeapYearCustomDialogController: CustomDialogController 
    = new CustomDialogController({
      builder: IsLeapYearCustomDialog(),
      alignment: DialogAlignment.Center,
      offset: {
        dx: CommonConstants.OFFSET_X,
        dy: CommonConstants.OFFSET_Y
      }
    })
  /* 定义判断闰年弹窗控制器 --end-- */

  build() {
    Column() {
      Text($r('app.string.ArkTS_Development_Case'))
        .width(CommonConstants.PERCENT_NINETY)
        .margin({
          top: $r('app.float.text_margin_top'),
          bottom: $r('app.float.text_margin_bottom'),
          left: $r('app.float.text_margin_left'),
          right: $r('app.float.text_margin_right')
        })
        .font({
          size: $r('app.float.text_font_size'),
          weight: CommonConstants.FONT_WEIGHT_SEVEN_HUNDRED
        })

      Column() {
        Button($r('app.string.DaffodilsNumber'))
          .width($r('app.float.button_width'))
          .height($r('app.float.button_height'))
          .onClick(() => {
            this.daffodilsNumberCustomDialogController.open()
          })

        Button($r('app.string.MultiplicationTable'))
          .width($r('app.float.button_width'))
          .height($r('app.float.button_height'))
          .margin({ top: $r('app.float.button_margin_top') })
          .onClick(() => {
            this.multiplicationTableCustomDialogController.open()
            let result = multiplicationTable()
            for(let index = 0; index < result.length; index++) {
              Logger.info(result[index].toString(), '')
            }
          })

        Button($r('app.string.IsPalindromicString'))
          .width($r('app.float.button_width'))
          .height($r('app.float.button_height'))
          .margin({ top: $r('app.float.button_margin_top') })
          .onClick(() => {
            this.isPalindromicStringCustomDialogController.open()
          })

        Button($r('app.string.StringReversal'))
          .width($r('app.float.button_width'))
          .height($r('app.float.button_height'))
          .margin({ top: $r('app.float.button_margin_top') })
          .onClick(() => {
            this.stringReversalCustomDialogController.open()
          })

        Button($r('app.string.IsLeapYear'))
          .width($r('app.float.button_width'))
          .height($r('app.float.button_height'))
          .margin({
            top: $r('app.float.button_margin_top'),
            bottom: $r('app.float.button_margin_bottom')
          })

          /* 打开判断闰年弹窗 --start-- */
          .onClick(() => {
            this.isLeapYearCustomDialogController.open()
          })
          /* 打开判断闰年弹窗 --end-- */
      }
      .width(CommonConstants.PERCENT_FULL)
    }
    .justifyContent(FlexAlign.SpaceBetween)
    .width(CommonConstants.PERCENT_FULL)
    .height(CommonConstants.PERCENT_FULL)
  }
}

完整代码下载：关注 Raink（陆荣涛），到下载区下载。

案例视频教程：《HarmonyOS应用开发实战指南》：第四章《应用 ArkTS 完成五个算法题》

# 算法 # 深度学习 # 人工智能 # harmonyos
Logo
HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

“新”意十足 · HarmonyOS模板&组件（本次上新：日程+工具+课堂模板、支付+登录等组件）

该组件聚合了多方的支付能力，开发者无需分别适配各家支付 SDK，即可快速集成支付功能，以最简化的方式完成端侧支付体验搭建，本模板为教育类应用提供了常用功能的开发样例，对视频播放器进行了定制化的开发，主要分首页、学习、我的三大模块。该组件提供华为账号一键登录及其他方式登录（微信、手机号登录），开发者可以根据业务需要快速实现应用登录，本模板为日程类应用提供了常用功能的开发样例，主要分首页、日历、我的三

avatar HarmonyOS开发者社区
cover

【 技术开源共建 】开源日历组件ossimplecalendarview快速集成

avatar HarmonyOS开发者社区
cover

【鸿蒙开源技术共建】用@luvi/lv-markdown-in在HarmonyOS上打造高性能Markdown编辑体验

avatar HarmonyOS开发者社区