鸿蒙创意开发

鸿蒙期末考察作业，此文章用于编写一个鸿蒙创意开发的app，让我们直接进入正题

index.ets

import { Button1 } from './Button1'
@Entry
@Component
struct Index{
  build() {
  Column({space: 10}){
    //空白填充把按钮整体下移
    Blank()
    //间距
    Row({space: 10}){
      Button1({num: 7})
      Button1({num: 8})
      Button1({num: 9})
      Button1({num: 6})
    }
    Row({space: 10}){
      Button1({num: 4})
      Button1({num: 5})
      Button1({num: 6})
      Button1({num: 6})
    }

    Row({space: 10}){
      Button1({num: 1})
      Button1({num: 2})
      Button1({num: 3})
      Button1({num: 3})
    }


  }.width('100%').height('100%')
    .backgroundColor(Color.Black)
  }
}

Button1.ets

//如果只有一个component显示不了，声明预览
@Preview
//因为没有设置高宽所以组件就一点
//声明组件
@Component
//需要时导出结构体
export struct Button1{
  //这里不加@State是因为如果家里@State点击页面会发生变化
  num: number = 1
  //创建结构入口方法
  build(){
    Column() {
      Text(this.num.toString()).fontColor(Color.White)
        .fontSize(50)
    }.width(75).height(75)
    .backgroundColor(0x333333)
    //居中
    .justifyContent(FlexAlign.Center)
    //圆角宽度除以2
    .borderRadius(50)

  }
}

因为篇幅有限，下期再写，一周一更