【ArkTS】鸿蒙开发 比较两个数的大小 用户界面输入两个数并输出较大数

在DevEcoStudio中开发一个比较两个数X,Y大小的界面，主要练习对HarmonyOS 文本框输入TextInput属性的应用。

TextInput 的具体使用步骤可以先在官网略作了解 

1.设置三个值来分别接收输入的两个值和作比较后较大的值

  @State Xvalue: string = ''
  @State Yvalue:string= ''
  @State max:string=''

'

2.设置TextInput的参数

通过在官网对TextInput属性的了解，可以知道其有三个选填参数。第一个参数为无文本输入时显示的值；第二个值为输入框当前输入的值；第三个是控制器。

用设置的字符串变量Xvalue来记录并存储输入的两个值之一X，Yvalue来记录并存储输入的两个值之一Y。

Row() {

 

 Row() {

        //设置TextInput三个参数
        TextInput({  placeholder: '输入x', text: this.Xvalue,controller: this.controller })
          //设置输入框无输入时显示文字的颜色和大小以及粗细
          .placeholderColor(Color.Grey)
          .placeholderFont({ size: 14, weight: 400 })
            //设置光标颜色为红色
          .caretColor(Color.Red)
            //输入框宽度
          .width(150)
            //输入框长度
          .height(40)
            //输入框外边距
          .margin(20)
            //输入文字大小
          .fontSize(14)
            //输入文字颜色
          .fontColor(Color.Black)
            //设置onChange事件实时更新Xvalue的值
          .onChange((value: string) => {
            this.Xvalue = value
          })
        TextInput({  placeholder: '输入y',text: this.Yvalue, controller: this.controller })
          .placeholderColor(Color.Grey)
          .placeholderFont({ size: 14, weight: 400 })
          .caretColor(Color.Red)
          .width(150)
          .height(40)
          .margin(20)
          .fontSize(14)
          .fontColor(Color.Black)
          .onChange((value: string) => {
            this.Yvalue = value
          })
      }

3.设置比较大小的函数MAX

该函数较为基础，简单的比较两个值的大小并返回较大值

function MAX(a:number | string,b:number | string) {
  if (Number(a) > Number(b)) {
    return a
  } else {
    return b
  }

4.设置按钮

该按钮按下可以触发比较两个值大小并存入max的事件

Button('进行比较')
        //外边距
        .margin(15)
          //点击按钮触发事件
        .onClick(() => {
          //将XY的值利用MAX函数得出较大值并存入max中
          this.max=MAX(this.Xvalue,this.Yvalue).toString()

        })

5.设置文本输出较大值

 Text(this.max)
        .width(40)
        .height(40)
        .fontSize(30)
        .backgroundColor('rgb(244,246,245)')
      Text('显示较大值')

完整代码

function MAX(a:number | string,b:number | string) {
  if (Number(a) > Number(b)) {
    return a
  } else {
    return b
  }
}
@Entry
@Component
struct TextInputExample {
  @State Xvalue: string = ''
  @State Yvalue:string= ''
  @State max:string=''



  controller: TextInputController = new TextInputController()

  build() {


    Column() {
      Row() {

        //设置TextInput三个参数
        TextInput({  placeholder: '输入x', text: this.Xvalue,controller: this.controller })
          //设置输入框无输入时显示文字的颜色和大小以及粗细
          .placeholderColor(Color.Grey)
          .placeholderFont({ size: 14, weight: 400 })
            //设置光标颜色为红色
          .caretColor(Color.Red)
            //输入框宽度
          .width(150)
            //输入框长度
          .height(40)
            //输入框外边距
          .margin(20)
            //输入文字大小
          .fontSize(14)
            //输入文字颜色
          .fontColor(Color.Black)
            //设置onChange事件实时更新Xvalue的值
          .onChange((value: string) => {
            this.Xvalue = value
          })
        TextInput({  placeholder: '输入y',text: this.Yvalue, controller: this.controller })
          .placeholderColor(Color.Grey)
          .placeholderFont({ size: 14, weight: 400 })
          .caretColor(Color.Red)
          .width(150)
          .height(40)
          .margin(20)
          .fontSize(14)
          .fontColor(Color.Black)
          .onChange((value: string) => {
            this.Yvalue = value
          })
      }

      Button('进行比较')
        //外边距
        .margin(15)
          //点击按钮触发事件
        .onClick(() => {
          //将XY的值利用MAX函数得出较大值并存入max中
          this.max=MAX(this.Xvalue,this.Yvalue).toString()

        })
      //文本框输出max的值
      Text(this.max)
        .width(40)
        .height(40)
        .fontSize(30)
        .backgroundColor('rgb(244,246,245)')
      Text('显示较大值')
    }.width('100%')
  }
}