鸿蒙开发之如何使用ios的页面布局方式开发鸿蒙app

创建一个页面，使用

Stack（）

设置其宽高都是

100%

背景颜色设置为粉色，方便查看

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

  build() {
    Row() {
      Column() {

        Stack() {
          Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        }
        .height('100%')
        .width('100%')
        .backgroundColor(Color.Pink)

      }
      .width('100%')
    }
    .height('100%')
  }

}

页面效果为

然后再添加控件，设置position,就相当于ios中的x,y

        Stack() {
          Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)


          Button()
            .backgroundColor(Color.Blue)
            .width(200)
            .height(60)
            .position({x:0,y:0})
            .onClick((event: ClickEvent) => {

            })
        }
        .height('100%')
        .width('100%')
        .backgroundColor(Color.Pink)

这时展示效果如下，在左上角展示

.width(200)
.height(60)
.position({x:0,y:0})

相当于ios的

CGRectMake(0, 0, 200, 60);

然后再加一个按钮，紧挨上一个按钮的右下角

        Button()
            .backgroundColor(Color.Blue)
            .width(100)
            .height(50)
            .position({x:200,y:60})
            .onClick((event: ClickEvent) => {

            })

页面展示

.width(100)
.height(50)
.position({x:200,y:60})

相当于ios的

CGRectMake(200, 60, 100, 50);

然后，顺便说一下鸿蒙里面创建的控件没有对象返回，

是不能 let btn = Button(); 这样写的