官方文档:位置设置
目录标题
- position:绝对定位,确定子组件相对父组件的位置。
position:绝对定位,确定子组件相对父组件的位置。
正→
↓
@Entry
@Component
struct Loc_position {
@State message: string = 'Hello World';
build() {
Column() {
Column({ space: 20 }) {
Row() {
Text('1').size({ width: '30%', height: '50' }).backgroundColor(Color.Red)
Text('2').size({ width: '45%', height: '50' }).backgroundColor(Color.Gray)
Text('3').size({ width: '50', height: '30' }).backgroundColor(Color.Orange)
.position({ x: 0, y: 0 }) // 坐标(0,0)
Text('4').size({ width: '60%', height: '30' }).backgroundColor(Color.Yellow)
.position({ x: 50, y: 30 }) // 坐标(50,30)
Text('5').size({ width: '20', height: '20' }).backgroundColor(Color.Red)
.position({ x: -20, y: -20 }) // 坐标(-20,-30)
Text('6').size({ width: '50%', height: '50' }).backgroundColor(Color.Pink)
.position({ x: '50%', y: '70%' }) // 坐标
}.width('80%').height(200).border({ width: 1, style: BorderStyle.Dashed })
}.width('100%').margin({ top: 30 })
}.width('100%')
}
}