HarmonyOS 鸿蒙Next简易温度单位转换器

HarmonyOS 鸿蒙Next简易温度单位转换器 如何快速实现的一个建议的温度转换器，来实现摄氏 ↔ 华氏 一键互转呢？

5 回复

这种自问自答到底是在干什么，连号都不换， 有什么kpi要刷？

更多关于HarmonyOS 鸿蒙Next简易温度单位转换器的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


参加活动要求的格式。https://developer.huawei.com/consumer/cn/activity/701764118166959700 快去参加，

应用场景

单位转换、数值转换、金额转换、温度转换等等不同的转换都是我们日常生活中所需要的，所以今天分享一个简单的温度转换器 。

实现思路

1、首先需要实现双向转换，这样功能才完善。

2、需要自动识别输入的来源，也就是输入华氏自动转摄氏，输入摄氏自动转华氏。

实现效果

完整实现代码

@Entry
@Component
struct TemperatureConverter {
  @State celsius: string = '';
  @State fahrenheit: string = '';
  @State lastEdited: 'C' | 'F' | null = null; // 记录上次编辑的是哪个输入框

  // 摄氏转华氏：F = C × 9/5 + 32
  private celsiusToFahrenheit(c: number): number {
    return c * 9 / 5 + 32;
  }

  // 华氏转摄氏：C = (F - 32) × 5/9
  private fahrenheitToCelsius(f: number): number {
    return (f - 32) * 5 / 9;
  }

  build() {
    Column({ space: 30 }) {
      Text('🌡️ 温度转换器')
        .fontSize(28)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 50 })

      // 摄氏输入
      Column({ space: 8 }) {
        Text('摄氏 (°C)')
          .fontSize(16)
          .fontColor('#333')
          .alignSelf(ItemAlign.Start)
        TextInput({ placeholder: '例如：25', text: this.celsius })
          .onChange((value: string) => {
            this.celsius = value;
            this.lastEdited = 'C';
            // 只有在用户编辑摄氏时，才更新华氏
            if (value === '') {
              this.fahrenheit = '';
            } else {
              const num = parseFloat(value);
              if (!isNaN(num)) {
                this.fahrenheit = this.celsiusToFahrenheit(num).toFixed(2);
              } else {
                this.fahrenheit = '';
              }
            }
          })
          .width('80%')
          .height(45)
          .padding({ left: 12 })
          .backgroundColor('#F8F9FA')
          .borderRadius(8)
      }

      // 华氏输入
      Column({ space: 8 }) {
        Text('华氏 (°F)')
          .fontSize(16)
          .fontColor('#333')
          .alignSelf(ItemAlign.Start)
        TextInput({ placeholder: '例如：77', text: this.fahrenheit })
          .onChange((value: string) => {
            this.fahrenheit = value;
            this.lastEdited = 'F';
            // 只有在用户编辑华氏时，才更新摄氏
            if (value === '') {
              this.celsius = '';
            } else {
              const num = parseFloat(value);
              if (!isNaN(num)) {
                this.celsius = this.fahrenheitToCelsius(num).toFixed(2);
              } else {
                this.celsius = '';
              }
            }
          })
          .width('80%')
          .height(45)
          .padding({ left: 12 })
          .backgroundColor('#F8F9FA')
          .borderRadius(8)
      }

      // 使用提示
      Text('💡 提示：在任一框中输入数字，另一框将自动转换')
        .fontSize(14)
        .fontColor('#888')
        .width('80%')
        .textAlign(TextAlign.Center)
        .margin({ top: 20 })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Start)
  }
}

鸿蒙Next温度单位转换器

基于ArkTS开发，实现摄氏度与华氏度互转。

核心转换逻辑

  • 华氏度转摄氏度：华氏度 = 摄氏度 × 9/5 + 32
  • 摄氏度转华氏度：摄氏度 = (华氏度 - 32) × 5/9

技术实现要点

  1. 状态管理：使用 @State 装饰器管理输入和输出数据。
  2. 界面组件：
    • 输入：使用 TextInput 组件接收用户输入的温度值。
    • 触发：使用 Button 组件触发转换计算。
    • 输出：使用 Text 组件显示转换结果。
  3. 界面布局：采用 Column、Row 等布局组件构建应用界面结构。

在HarmonyOS Next中，你可以使用ArkTS快速实现一个简洁的温度单位转换器。核心在于利用状态变量和简单的数学公式。

1. 数据与状态管理 在组件的状态中定义两个变量，例如：

@State celsius: string = '';
@State fahrenheit: string = '';

2. 转换逻辑实现 创建两个转换方法，分别处理摄氏转华氏和华氏转摄氏：

// 摄氏转华氏
convertCtoF() {
  const c = parseFloat(this.celsius);
  if (!isNaN(c)) {
    this.fahrenheit = ((c * 9/5) + 32).toFixed(2);
  }
}

// 华氏转摄氏
convertFtoC() {
  const f = parseFloat(this.fahrenheit);
  if (!isNaN(f)) {
    this.celsius = ((f - 32) * 5/9).toFixed(2);
  }
}

3. 界面构建 使用ArkUI的Column、Row、TextInput和Button组件构建界面：

build() {
  Column() {
    // 摄氏温度输入
    TextInput({ placeholder: '输入摄氏温度' })
      .onChange((value: string) => {
        this.celsius = value;
        this.convertCtoF();
      })

    // 转换按钮
    Button('⇄ 一键转换')
      .onClick(() => {
        // 这里可以添加切换逻辑或同时更新两个字段
        if (this.celsius) {
          this.convertCtoF();
        } else if (this.fahrenheit) {
          this.convertFtoC();
        }
      })

    // 华氏温度输入
    TextInput({ placeholder: '输入华氏温度' })
      .onChange((value: string) => {
        this.fahrenheit = value;
        this.convertFtoC();
      })
  }
}

4. 交互优化

  • 在TextInput的onChange事件中直接调用对应的转换方法，实现实时转换。
  • 一键转换按钮可以作为备用交互方式，或在输入框为空时提供转换触发点。

这个实现利用了ArkTS的响应式能力，当任一输入框内容变化时，另一个输入框会自动更新为转换后的值，实现了真正的“一键互转”体验。

回到顶部