鸿蒙Harmony OS Next原生开发初见Hello World与了解鸿蒙布局

鸿蒙初开,开天辟地

来看看Hello World吧

@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 }
        })
    }
    .height('100%')
    .width('100%')
  }
}

首先这个页面在Struct结构体下叫做Index,结构体中声明了一个String类型的变量message,初始值为Hello World

其后又声明了一个函数或者说方法build()

其中声明了一个row也就是行,他作为一个横向排列的容器而存在

它的高度和宽度都被设置为百分之百

其中我们又设置了一个纵向排列的容器column

column之中我们又放置了一个Text,而它所显示的值是我们最开始定义的message变量的值

并且他的字体大小是50,字体重量是Bold,布局部分会在后面的学习中进行简介,通过以上这些,我们就得到了一个最基本的Hello World应用的展示