代码Stack({alignContent:Alignment.Center}){
Item1()
Item2()
Item3()} 默认是居中对齐,后面的Item的优先级比前面的要高。
特点:代码简洁,效率更高(绝对定位来说的)
“设置浮动位置”指的是在界面布局中调整某个组件(在你的例子中是按钮)相对于其父容器的位置。在你的代码中,使用 .position({ x: 70, y: 100 })
来设置按钮的位置。这意味着按钮会在父容器(Stack
)的坐标系中,以 x=70
和 y=100
的位置来展示。
下面是个例子你可以试试:
@Entry
@Component
struct CardWithButton {
build() {
Stack({ alignContent: Alignment.Center }) {
// 卡片层
Divider()
.width(200)
.height(150)
.backgroundColor(Color.Orange)
// 浮动按钮
Button('Button')
.width(70)
.height(30)
.backgroundColor(Color.Pink)
.position({ x: 70, y: 100 }) // 设置浮动位置
.borderRadius(10) // 圆形按钮
}
}
}
@Entry
@Component
struct StackExample {
build() {
Stack({ alignContent: Alignment.Center }) {
// 第一层矩形
Divider()
.width(200)
.height(100)
.backgroundColor(Color.Yellow)
// 第二层矩形
Divider()
.width(180)
.height(90)
.backgroundColor(Color.Green)
// 第三层矩形
Divider()
.width(160)
.height(80)
.backgroundColor(Color.Blue)
}
}
}
@Entry //页面的入口文件,一个文件只能有一个
@Component // 组件
struct Index // 这个是index是 组件的名字, 只有写在第一个component里面的内容的首内容,下面写的所有都是第一个component的子组件
{
@State message: string = 'Hello World??';
// 用于声明全局(可修改的)变量
build() {
//build只能有一个根元素,一个根节点,row和colum可以嵌套
Stack({
alignContent:Alignment.TopEnd
}){
Text("第一个")
.width(250)
.height(250)
.backgroundColor(Color.Green)
//可以手动调层级 .zIndex(3)
.padding(50)
Text("第二个")
.width(150)
.height(150)
.backgroundColor(Color.Blue)
//可以手动调层级 .zIndex(5)
Text("第三个")
.width(50)
.height(50)
.backgroundColor(Color.Red)
//可以手动调层级 .zIndex(3)
}
.width(300)
.height(600)
.backgroundColor(Color.Pink)
}
}