暑假学习DevEco Studio第一天

学习目标：

• 掌握构建第一个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}
      })

RelativeContainer容器调整的api文档

今天学到这里，明天不见不散。