【元服务】基础布局——栅格布局案例

学习完基础的栅格布局理论概论之后我们来进行栅格布局的案例练习

我们要完成以下效果一个计算机的案例（结尾附源代码）

我们可以将其分为四部分进行完善功能 第一部分通过textinput标签实现数字的输入 第二、三、四部分通过栅格布局来实现排列 功能通过设置点击来实现添加数字与计算。

第一部分数字输入标签代码

第二、三部分排列以及功能代码

第四部分，通过switch循环来实现加减乘除的功能

/**
 * @author 坚果派-九龙
 * @date 2024年11月19日22:43:42
 */
@Entry
@Component
struct  gridpage6 {
  @State operator: string = ""
  @State x: number = 0;
  @State y: number = 0;
  @State num: string = "";
  @State result: string = "";

  @StorageProp('bottomRectHeight')
  bottomRectHeight: number = 0;
  @StorageProp('topRectHeight')
  topRectHeight: number = 0;

  build() {
    GridRow({ gutter: 15 }) {
      GridCol({ span: { sm: 12 } }) {
        TextInput({ placeholder: '0',  text: this.result })
          .backgroundColor(Color.White)
          .textAlign(TextAlign.End)
          .fontSize(36)
          .height("100%")
          .width("100%")
      }
      .height("10%").margin({ bottom: '15%', top: '15%' })

      GridCol({ span: { sm: 3 } }) {
        Button('7')
          .fontSize(35)
          .margin({ left: '10%' })
          .width("100%")
          .height("100%")
          .type(ButtonType.Normal)
          .onClick(() => {
            this.result += "7";
          })
      }.backgroundColor(0x1976D2).height("10%")

      GridCol({ span: { sm: 3 } }) {
        Button('8')
          .fontSize(35)
          .margin({ left: '10%' })
          .width("100%")
          .height("100%")
          .type(ButtonType.Normal)
          .onClick(() => {
            this.result += "8";
          })
      }.backgroundColor(0x1976D2).height("10%")

      GridCol({ span: { sm: 3 } }) {
        Button('9')
          .fontSize(35)
          .margin({ left: '10%' })
          .width("100%")
          .height("100%")
          .type(ButtonType.Normal)
          .onClick(() => {
            this.result += "9";
          })
      }.backgroundColor(0x1976D2).height("10%")

      GridCol({ span: { sm: 3 } }) {
        Button('/')
          .fontSize(35)
          .margin({ left: '10%' })
          .width("100%")
          .height("100%")
          .type(ButtonType.Normal)
          .onClick(() => {
            this.x = parseFloat(this.result);
            this.operator = "÷";
            this.result = ""
          })
      }.backgroundColor(0x1976D2).height("10%")

      GridCol({ span: { sm: 3 } }) {
        Button('4')
          .fontSize(35)
          .margin({ left: '10%' })
          .width("100%")
          .height("100%")
          .type(ButtonType.Normal)
          .onClick(() => {
            this.result += "4";
          })
      }.backgroundColor(0x1976D2).height("10%")

      GridCol({ span: { sm: 3 } }) {
        Button('5')
          .fontSize(35)
          .margin({ left: '10%' })
          .width("100%")
          .height("100%")
          .type(ButtonType.Normal)
          .onClick(() => {
            this.result += "5";
          })
      }.backgroundColor(0x1976D2).height("10%")

      GridCol({ span: { sm: 3 } }) {
        Button('6')
          .fontSize(35)
          .margin({ left: '10%' })
          .width("100%")
          .height("100%")
          .type(ButtonType.Normal)
          .onClick(() => {
            this.result += "6";
          })
      }.backgroundColor(0x1976D2).height("10%")

      GridCol({ span: { sm: 3 } }) {
        Button('*')
          .fontSize(35)
          .margin({ left: '10%' })
          .width("100%")
          .height("100%")
          .type(ButtonType.Normal)
          .onClick(() => {
            this.x = parseFloat(this.result);
            this.operator = "×";
            this.result = ""
          })
      }.backgroundColor(0x1976D2).height("10%")

      GridCol({ span: { sm: 3 } }) {
        Button('1')
          .fontSize(35)
          .margin({ left: '10%' })
          .width("100%")
          .height("100%")
          .type(ButtonType.Normal)
          .onClick(() => {
            this.result += "1";
          })
      }.backgroundColor(0x1976D2).height("10%")

      GridCol({ span: { sm: 3 } }) {
        Button('2')
          .fontSize(35)
          .margin({ left: '10%' })
          .width("100%")
          .height("100%")
          .type(ButtonType.Normal)
          .onClick(() => {
            this.result += "2";
          })
      }.backgroundColor(0x1976D2).height("10%")

      GridCol({ span: { sm: 3 } }) {
        Button('3')
          .fontSize(35)
          .margin({ left: '10%' })
          .width("100%")
          .height("100%")
          .type(ButtonType.Normal)
          .onClick(() => {
            this.result += "3";
          })
      }.backgroundColor(0x1976D2).height("10%")

      GridCol({ span: { sm: 3 } }) {
        Button('-')
          .fontSize(35)
          .margin({ left: '10%' })
          .width("100%")
          .height("100%")
          .type(ButtonType.Normal)
          .onClick(() => {
            this.x = parseFloat(this.result);
            this.operator = "-";
            this.result = ""
          })
      }.backgroundColor(0x1976D2).height("10%")

      GridCol({ span: { sm: 3 } }) {
        Button('.')
          .fontSize(35)
          .margin({ left: '10%' })
          .width("100%")
          .height("100%")
          .type(ButtonType.Normal)
          .onClick(() => {
            this.result += ".";
          })
      }.backgroundColor(0x1976D2).height("10%")

      GridCol({ span: { sm: 3 } }) {
        Button('0')
          .fontSize(35)
          .margin({ left: '10%' })
          .width("100%")
          .height("100%")
          .type(ButtonType.Normal)
          .onClick(() => {
            this.result += "0";
          })
      }.backgroundColor(0x1976D2).height("10%")

      GridCol({ span: { sm: 3 } }) {
        Button('C')
          .fontSize(35)
          .margin({ left: '10%' })
          .width("100%")
          .height("100%")
          .type(ButtonType.Normal)
          .onClick(() => {
            this.x = 0;
            this.operator ='';
            this.y = 0;
            this.result = "";
          })
      }.backgroundColor(0x1976D2).height("10%")

      GridCol({ span: { sm: 3 } }) {
        Button('+')
          .fontSize(35)
          .margin({ left: '10%' })
          .width("100%")
          .height("100%")
          .type(ButtonType.Normal)
          .onClick(() => {
            this.x = parseFloat(this.result);
            this.operator = "+";
            this.result = ""
          })
      }.backgroundColor(0x1976D2).height("10%")

      GridCol({ span: { sm: 12 } }) {
        Row() {
          Button('=')
            .fontSize(35)
            .type(ButtonType.Normal)
            .width("100%")
            .height("100%")
            .onClick(() => {
              this.y = parseFloat(this.result);
              switch (this.operator) {
                case '+':
                  this.result = (this.x + this.y).toString();
                  break;
                case '-':
                  this.result = (this.x - this.y).toString();
                  break;
                case '×':
                  this.result = (this.x * this.y).toString();
                  break;
                case '÷':
                  this.result = (this.x / this.y).toString();
                  break;
              }
            })
        }
      }.margin({ top: '15%' })
      .backgroundColor(Color.Gray).height("10%")
    }.backgroundColor(Color.Blue)
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
  }
}