HarmonyOS_计算器样式UI

最新推荐文章于 2025-11-23 16:10:50 发布

原创最新推荐文章于 2025-11-23 16:10:50 发布 · 306 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ui

在这里插入图片描述

@Entry
@Component
struct Index {
  @Styles common(){
    .backgroundColor("#ccc")
    .borderRadius(6)
  }

  @State arrs: Array<string> = [
    "CE", "C", "/", "x",
    "7", "8", "9", "-",
    "4", "5", "6", "+",
    "1", "2", "3", "=",
    "0", "."
  ]

  build() {
    Column() {
      /**
       * 1.TEXT画出上面的文本框
       * 2.使用网格布局循环展示各子组件
       */
      Text("0")
        .fontSize(20)
        .textAlign(TextAlign.End)
        .width("100%")
        .height("20%")
        .backgroundColor("#ccc")
        .borderRadius(8)
      Grid() {
        ForEach(this.arrs, (item:string, index) => {
          if (this.arrs.indexOf("=") === index) {
            GridItem() {
              Text(item)
            }
            .common()
            .rowStart(4)
            .rowEnd(5)
          } else if (this.arrs.indexOf("0") === index) {
            GridItem() {
              Text(item)
            }
            .common()
            .columnStart(1)
            .columnEnd(2)
          } else {
            GridItem() {
              Text(item)
            }
            .common()

          }

        })

      }
      .columnsTemplate("1fr 1fr 1fr 1fr")
      .rowsTemplate("1fr 1fr 1fr 1fr 1fr")
      .rowsGap(8)
      .columnsGap(5)
      .margin({ top: 5 })
      .height("80%")

    }
    .padding(10)
  }
}