学习目标:
- 掌握构建第一个ArkTS应用
学习内容:
容器的应用
创建流程
点击file,new-> create project
点击empty ->next
进入配置界面
点击finsh,生成下面图片
这里需要注意记住index.ets ,这是显示页面
–
2.构建第一个页面
在“project”窗口,点击“entry>src>main>ets>pages”,打开Index.ets 文件,编写页面。
2.1返回的应用场景,简单元素用Row和Column。
2.2复杂的用RelativeContainer组件进行布局
按钮
Button() {
Text('Next')
.fontSize(30)
.fontWeight(FontWeight.Bold
}
.type(ButtonType.Capsule)
.margin({
top: this.message.toString()
})
.backgroundColor('#0D9FFB')
.width('40%')
.height('5%')
会发现next在上方,要怎么调到Hello World的下面。
如何调整?
bias可以自己调整,数值越大越往上移。“container”容器的意思,在helloworld下面
.alignRules({
top:{anchor:"HelloWorld",align:VerticalAlign.Bottom},
bottom:{anchor:"__container__",align:VerticalAlign.Bottom},
left: {anchor: "HelloWorld", align: HorizontalAlign.Start},
right: {anchor: "HelloWorld", align: HorizontalAlign.End},
bias : {vertical : 0.1}
})
今天学到这里,明天不见不散。