HarmonyOS从零到入门 第四章 构建第一个页面

上一期的文章链接https://blog.csdn.net/qq_74831425/article/details/145307693

构建第一个页面

1.使用文本组件。

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

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

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

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    RelativeContainer(){
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .height('100%')
      .width('100%')
    }
    
 }

2.添加按钮。

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

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  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 }
        })
      // 添加按钮，以响应用户点击
      Button() {
        Text('Next')
          .fontSize(30)//字体大小
          .fontWeight(FontWeight.Bold)//字体加粗
      }
      .type(ButtonType.Capsule)
      .margin({
        top:150
      })
      .backgroundColor('#0D9FFB')
      .width('40%')
      .height('5%')
      .alignRules({
        center: { anchor: '__container__', align: VerticalAlign.Center },
        middle: { anchor: '__container__', align: HorizontalAlign.Center }
      })
    }
    .height('100%')
    .width('100%')
  }
}

3.结果

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

构建第二个页面

1.创建第二个页面。

新建第二个页面文件。

在“Project”窗口，打开“entry > src > main > ets”，右键点击“pages”文件夹，选择“New > ArkTS File”，命名为“Second”，点击回车键。可以看到文件目录结构如下：

说明

也可以在右键点击“pages”文件夹时，选择“New > Page > Empty Page”，命名为“Second”，点击“Finish”完成第二个页面的创建。使用此种方式则无需再进行下文中第二个页面路由的手动配置。

配置第二个页面的路由。

在“Project”窗口，打开“entry > src > main > resources > base > profile”，在main_pages.json文件中的“src”下配置第二个页面的路由“pages/Second”。示例如下：

{
  "src": [
    "pages/Index",
    "pages/Second"
  ]
}

2.添加文本及按钮。

参照第一个页面，在第二个页面添加Text组件、Button组件等，并设置其样式。“Second.ets”文件的示例如下：

@Entry
@Component
struct Second {
  @State message: string = 'Hi there'

  build() {
    RelativeContainer() {
      Text(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Button() {
        Text('Back')
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
      }
      .type(ButtonType.Capsule)
      .margin({
        top: 20
      })
      .backgroundColor('#0D9FFB')
      .width('40%')
      .height('5%')
    }
    .height('100%')
    .width('100%')
  }
}

到此，两个页面实现，下一步实现页面的跳转