鸿蒙HarmonyOS NEXT开发：Search搜索框组件的使用，生成随机数或输入数字，实现数字偏移效果与交互的组件

效果图：

在开发过程中，要创建一个生成随机数或输入数字，且具有数字偏移效果和丰富交互功能的组件，可通过以下步骤和代码来达成。

1.状态定义：

首先，使用 @State 定义了一个数组 x ，用于存储六个数字的偏移量。

  @State x:number[]=[0,0,0,0,0,0]   //六个数的偏移

2.随机数生成函数：

getRandom 函数用于生成 0 到 999999 之间的随机数，并将其各位数字分配到 x 数组中。

  getRandom(){    //生成0到999999的随机数
    let num = Math.floor(Math.random()*999999)
    for (let i = 0; i < 6; i++){
      this.x[5-i] = num%10
      num=Math.floor(num/10)
    }
  }

 

3.对输入的数字处理函数：

alterNumber 函数用于处理用户输入的数字，同样将其各位数字分配到 x 数组中。

  alterNumber(num:number){    //处理输入的数
    for (let i = 0; i < 6; i++){
      this.x[5-i] = num%10
      num=Math.floor(num/10)
    }
  }

 4.界面构建：

在构建界面时，采用了 Column 布局。

包含一个“生成随机数”的按钮，点击时触发 getRandom 函数生成随机数并更新偏移量。

一个搜索输入框Search()，设置了占位符、输入类型为纯数字、最大长度为 6 等属性，并在提交输入时调用 alterNumber 函数处理输入的数字。

通过循环创建 6 列，每列又包含 0 到 9 共 10 个数字的文本。每个列根据 x 数组中对应的数字进行偏移，使用 offset 函数设置偏移量，并添加了 600ms 的动画效果，使偏移更加自然流畅。

    Column({space:10}){
      Button('生成随机数')
        .onClick(()=>{
          this.getRandom()
        })
      Search({placeholder:'请输入0到999999的数'})
        .searchIcon({size:0,src:''})    //左边Icon样式和路径
        .cancelButton({style:CancelButtonStyle.INPUT})   //设置右侧清除按钮样式、路径、状态
        .searchButton('确定')   //右边按钮
        .type(SearchType.NUMBER)    // 输入类型 纯数字
        .maxLength(6)
        .width('100%')
        .onSubmit((value:string)=>{
          this.alterNumber(Number(value))
        })
      Row(){
        ForEach([0,1,2,3,4,5],(index:number)=>{     //循环6列，代表6个数
          Column(){
            ForEach([0,1,2,3,4,5,6,7,8,9],(item:number)=>{    // 每列都有0到9  10个数
              Text(item.toString())
                .height(30)     //设置高 便于偏移量的计算
            })
          }
          .offset({y:-1*30*this.x[index]})    //偏移量
          .animation({duration:600})      //600ms的动画
        })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceAround)
      .clip(true)
      .height(30)
      .borderWidth(2)
    }
    .padding(20)
    .width('100%')
    .height('100%')

完整代码：

@Entry
@Component
struct Index {
  @State x:number[]=[0,0,0,0,0,0]   //六个数的偏移

  getRandom(){    //生成0到999999的随机数
    let num = Math.floor(Math.random()*999999)
    for (let i = 0; i < 6; i++){
      this.x[5-i] = num%10
      num=Math.floor(num/10)
    }
  }

  alterNumber(num:number){    //处理输入的数
    for (let i = 0; i < 6; i++){
      this.x[5-i] = num%10
      num=Math.floor(num/10)
    }
  }

  build() {
    Column({space:10}){
      Button('生成随机数')
        .onClick(()=>{
          this.getRandom()
        })
      Search({placeholder:'请输入0到999999的数'})
        .searchIcon({size:0,src:''})    //左边Icon样式和路径
        .cancelButton({style:CancelButtonStyle.INPUT})   //设置右侧清除按钮样式、路径、状态
        .searchButton('确定')   //右边按钮
        .type(SearchType.NUMBER)    // 输入类型 纯数字
        .maxLength(6)
        .width('100%')
        .onSubmit((value:string)=>{
          this.alterNumber(Number(value))
        })
      Row(){
        ForEach([0,1,2,3,4,5],(index:number)=>{     //循环6列，代表6个数
          Column(){
            ForEach([0,1,2,3,4,5,6,7,8,9],(item:number)=>{    // 每列都有0到9  10个数
              Text(item.toString())
                .height(30)     //设置高 便于偏移量的计算
            })
          }
          .offset({y:-1*30*this.x[index]})    //偏移量
          .animation({duration:600})      //600ms的动画
        })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceAround)
      .clip(true)    //超出隐藏
      .height(30)
      .borderWidth(2)
    }
    .padding(20)
    .width('100%')
    .height('100%')
  }
}

 

注意事项：

在实际应用中，需要根据具体的设计需求和用户体验来调整偏移量的计算方式、动画效果的时长和流畅度等。同时，对于输入数字的合法性验证和错误处理也需要进一步完善，以提高组件的稳定性和可用性。

本代码为基于API12，低版本API可能会出现报错。