鸿蒙期末考察作业,此文章用于编写一个鸿蒙创意开发的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) } }
因为篇幅有限,下期再写,一周一更