教你写一个简单的页面

DevEco Studio 4.1 Beta1

说明：

为确保运行效果，本文及之后的文档示例都将以使用DevEco Studio 4.1 Beta1版本为例。

我们在构建第一个应用程序中新建了一个名为MyApplication的项目，我们将在此项目上进行后续的开发。

首先为了项目的可识别性，将项目名称修改为sample_demo。
将项目的目录展开，进入src/main/ets/pages/目录下，在index.ets中进行开发。

添加一个按钮

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

// Index.ets
  @Entry
  @Component
  struct 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%')
    }
  }

使用预览器查看页面

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

查看日志打印

编辑器窗口最下面的侧边工具栏中有日志和预览器日志选项（编辑器的中文化可参考DevEco Studio的使用-插件的安装），如下图示： alt text

日志：可查看真机中所有操作的日志

在代码中给按钮加一个点击事件(onClick)

// index.ets
@Entry
@Component
struct 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%')
        .onClick(() => {
          console.log("Demo log: " + this.message)
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

推送应用到真机运行，点击编辑器下面侧边窗口中日志，可查看当前应用的所有日志，在最后一个输入框中输入内容，可根据输入内容筛选日志信息，此时输入Demo log，再点击真机页面中的Next按钮，查看日志输出。

预览器日志：只可查看代码中报错的日志

模拟错误代码：删除代码最末尾的’}’

// index.ets
@Entry
@Component
struct 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%')
        .onClick(() => {
          console.log("Demo log: " + this.message)
        })
      }
      .width('100%')
    }
    .height('100%')
  }