当前位置：首页 > article >正文

26.Harmonyos Next仿uv-ui 组件NumberBox 步进器组件小数位数设置

article 2025/3/12 17:48:03

温馨提示：本篇博客的详细代码已发布到 git : https://gitcode.com/nutpi/HarmonyosNext 可以下载运行哦！

文章目录

- 1. 组件介绍
- 2. 效果展示
- 3. 小数位数设置
- - 3.1 基本小数位数设置
  - 3.2 小数位数与步长的结合
- 4. 完整示例代码
- 5. 知识点讲解
- - 5.1 小数位数属性
  - 5.2 小数位数的内部实现
  - 5.3 小数位数与步长的关系
  - 5.4 小数位数的应用场景
- 6. 总结

1. 组件介绍

NumberBox步进器组件的小数位数设置功能允许开发者控制数值显示的精度，适用于需要精确数值输入的场景。本文将详细介绍如何在HarmonyOS NEXT中设置和使用NumberBox步进器的小数位数功能。

2. 效果展示

3. 小数位数设置

3.1 基本小数位数设置

在NumberBox组件中，通过decimalLength属性可以设置显示的小数位数：

NumberBox({
  value: this.value,
  decimalLength: 2,  // 设置显示2位小数
  onChange: (value: number) => {
    this.value = value;
  }
})

3.2 小数位数与步长的结合

小数位数设置通常与步长设置结合使用，以实现精确的数值调整：

NumberBox({
  value: this.value,
  step: 0.1,         // 设置步长为0.1
  decimalLength: 1,  // 设置显示1位小数
  onChange: (value: number) => {
    this.value = value;
  }
})

4. 完整示例代码

下面是一个展示不同小数位数设置的完整示例：

// NumberBoxDecimalDemo.ets
// NumberBox步进器小数位数设置示例

import { NumberBox } from '../components/NumberBox';

@Entry
@Component
struct NumberBoxDecimalDemo {
  @State value1: number = 5;    // 整数
  @State value2: number = 5.5;  // 1位小数
  @State value3: number = 5.25; // 2位小数
  @State value4: number = 5.125; // 3位小数

  build() {
    Column() {
      // 标题
      Text('NumberBox 小数位数设置示例')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .margin({ bottom: 20 })
      
      // 整数（0位小数）
      Row() {
        Text('整数(0位小数)')
          .width('40%')
          .fontSize(16)
        NumberBox({
          value: this.value1,
          decimalLength: 0,  // 设置0位小数，即整数
          onChange: (value: number) => {
            this.value1 = value;
          }
        })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)
      .alignItems(VerticalAlign.Center)
      .padding(10)
      
      // 1位小数
      Row() {
        Text('1位小数')
          .width('40%')
          .fontSize(16)
        NumberBox({
          value: this.value2,
          step: 0.1,         // 设置步长为0.1
          decimalLength: 1,  // 设置1位小数
          onChange: (value: number) => {
            this.value2 = value;
          }
        })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)
      .alignItems(VerticalAlign.Center)
      .padding(10)
      
      // 2位小数
      Row() {
        Text('2位小数')
          .width('40%')
          .fontSize(16)
        NumberBox({
          value: this.value3,
          step: 0.05,        // 设置步长为0.05
          decimalLength: 2,  // 设置2位小数
          onChange: (value: number) => {
            this.value3 = value;
          }
        })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)
      .alignItems(VerticalAlign.Center)
      .padding(10)
      
      // 3位小数
      Row() {
        Text('3位小数')
          .width('40%')
          .fontSize(16)
        NumberBox({
          value: this.value4,
          step: 0.001,       // 设置步长为0.001
          decimalLength: 3,  // 设置3位小数
          onChange: (value: number) => {
            this.value4 = value;
          }
        })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)
      .alignItems(VerticalAlign.Center)
      .padding(10)
      
      // 显示当前值
      Column() {
        Text('当前值：')
          .fontSize(16)
          .fontWeight(FontWeight.Bold)
          .margin({ top: 20, bottom: 10 })
        
        Text('整数值: ' + this.value1)
          .fontSize(14)
          .margin({ bottom: 5 })
        
        Text('1位小数值: ' + this.value2.toFixed(1))
          .fontSize(14)
          .margin({ bottom: 5 })
        
        Text('2位小数值: ' + this.value3.toFixed(2))
          .fontSize(14)
          .margin({ bottom: 5 })
        
        Text('3位小数值: ' + this.value4.toFixed(3))
          .fontSize(14)
      }
      .width('100%')
      .alignItems(HorizontalAlign.Center)
      .margin({ top: 20 })
    }
    .width('100%')
    .padding(16)
  }
}

5. 知识点讲解

5.1 小数位数属性

NumberBox组件的小数位数主要通过以下属性实现：

decimalLength属性：设置显示的小数位数，默认为0（整数）。

5.2 小数位数的内部实现

NumberBox组件内部通过formatValue方法实现小数位数的控制：

private formatValue(value: number): string {
  if (this.decimalLength === 0) {
    return Math.floor(value).toString();
  } else {
    return value.toFixed(this.decimalLength);
  }
}