创建一个页面,使用
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(); 这样写的