效果展示
知识点
绝对定位
作用:控制组件位置,可以实现层叠效果
特点:
- 参照 父组件左上角 进行偏移
- 绝对定位后的组件 不再占用自身原有位置
语法:.position(位置对象)
参数:{ x: 水平偏移量 , y: 垂直偏移量}
zIndex层级
作用:调整组件层级
语法:.zIndex(数字)
参数:取值为整数数字,取值越大,显示层级越高
代码展示
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
build() {
Column() {
Column() {
Text("VIP")
.position({
x: 0,
y: 0
})
.zIndex(1)
.width(70)
.height(40)
.textAlign(TextAlign.Center)
.fontSize(20)
.fontWeight(700)
.border({
width: 5,
color: "#F8EA87"
})
.borderRadius({
topLeft: 20,
bottomRight: 20
})
.fontColor("#F8EA87")
.backgroundColor("#F1932D")
Image($r("app.media.position_moco"))
.width('99%')
.borderRadius(20)
Row({ space: 20 }) {
Image($r("app.media.position_earphone"))
.padding(5)
.width(30)
.borderRadius(15)
.fillColor("#fff")
.backgroundColor("#0AC1EF")
Text("飞狗MOCO")
.fontSize(24)
.fontWeight(700)
}
.padding({
left: 20
})
.margin({
top: 10,
bottom: 10
})
.width("100%")
}
.width(300)
.backgroundColor("#fff")
}
.padding(20)
.width("100%")
.height("100%")
.linearGradient({
angle: 135, // 设置颜色渐变起始角度为顺时针方向45°
colors: [
[0xceeff2, 0.0],
[0xf2e0de, 0.4],
[0xFFFFFF, 0.8],
]
})
}
}