My first ArkTS

构建第一个页面

1. 使用文本组件。

   工程同步完成后，在“Project”窗口，点击“entry > src > main > ets > pages”，打开“Index.ets”文件，进行页面的编写。

   针对本文中使用文本/按钮来实现页面跳转/返回的应用场景，页面均使用Row和Column组件来组建布局。对于更多复杂元素对齐的场景，可选择使用RelativeContainer组件进行布局。

   “Index.ets”文件的示例如下：

   // Index.ets@Entry@Componentstruct Index {  @State message: string = 'Hello World'
     build() {    Row() {      Column() {        Text(this.message)          .fontSize(50)          .fontWeight(FontWeight.Bold)      }      .width('100%')    }    .height('100%')  }}

2. 添加按钮。

   在默认页面基础上，我们添加一个Button组件，作为按钮响应用户点击，从而实现跳转到另一个页面。“Index.ets”文件的示例如下：

   // Index.ets@Entry@Componentstruct Index {  @State message: string = 'Hello World'
     build() {    Row() {      Column() {        Text(this.message)          .fontSize(50)          .fontWeight(FontWeight.Bold)        // 添加按钮，以响应用户点击        Button() {          Text('Next')            .fontSize(30)            .fontWeight(FontWeight.Bold)        }        .type(ButtonType.Capsule)        .margin({          top: 20        })        .backgroundColor('#0D9FFB')        .width('40%')        .height('5%')      }      .width('100%')    }    .height('100%')  }}

3. 在编辑窗口右上角的侧边工具栏，点击Previewer，打开预览器。第一个页面效果如下图所示：

   

@Entry
@Component
struct Index {
  @State message: string = 'Hello World! I am Zhou Jianfei 我的中文名：周剑飞';

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('HelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
    }
    .height('100%')
    .width('100%')
  }
}