RelativeContainer( ) 12+
1：概念
- 相对布局容器内部一定要有子组件才能显示，如果没子组件，该容器不占空间
- 容器内子组件区分水平方法和垂直方向
2：子组件方向
- 水平方向：left，middle，right 对应容器的HorizontalAlign.Start, HorizontalAlign.Center, HorizontalAlign.end
- 垂直方向：top，center，bottom 对应的容器的VerticalAlign.top, VerticalAlign.center, VerticalAlign.bottom
3：注意
1. 参与相对布局的容器内组件，不设置id的组件可以显示，但是不能被其他子组件作为锚点，相对布局容器会为其拼接id，此id的规律无法被应用感知 2. 容器id固定位 ‘__container__’ guideline（辅助线）和barrier（封装） 3. id不能与组件重复， 重复的话按照组件 > guideline > barrier
4：代码
@Entry
@Component
struct Test04 {
@State message: string = 'Hello World';
build() {
Column(){
RelativeContainer() {
Row(){
}
.alignRules({
top:{anchor:'__container__',align:VerticalAlign.Top},
middle:{anchor:'__container__',align:HorizontalAlign.Center}
})
.id('row1')
.backgroundColor('#ff3334')
.width(100)
.height(100)
Row(){
}
.id('row2')
.width(100)
.height(100)
.alignRules({
center:{anchor:'__container__',align:VerticalAlign.Center},
right:{anchor:'row1',align:HorizontalAlign.Start}
})
.backgroundColor('#ffcc00')
Row(){
}
.id('row3')
.alignRules({
top:{anchor:'row1',align:VerticalAlign.Bottom},
left:{anchor:'row1',align:HorizontalAlign.End},
right:{anchor:'__container__',align:HorizontalAlign.End},
bottom:{anchor:'row2',align:VerticalAlign.Bottom}
})
.backgroundColor('#ff9a66')
Row(){
}
.alignRules({
top:{anchor:'row3',align:VerticalAlign.Bottom},
left:{anchor:'row2',align:HorizontalAlign.End},
right:{anchor:'row3',align:HorizontalAlign.Start},
bottom:{anchor:'__container__',align:VerticalAlign.Bottom}
})
.backgroundColor('#ff66ff')
Image($r('app.media.app_icon'))
.alignRules({
top:{anchor:'row1',align:VerticalAlign.Bottom},
left:{anchor:'row2',align:HorizontalAlign.End},
right:{anchor:'row3',align:HorizontalAlign.Start},
bottom:{anchor:'row4',align:VerticalAlign.Top}
})
}
.width(300)
.height(300)
.borderWidth(1)
}
.margin({top:30})
.height('100%')
.width('100%')
}
}
5：auto
父组件RelativeContainer的宽高设置为auto
由于父组件的长宽由子组件撑开，锚点设置尽量不用父组件
样例
RelativeContainer(){ Row(){}.width(100).height(100) .id('row1') .backgroundColor(Color.Red) Row(){}.width(100).height(100) .backgroundColor(Color.Blue) .alignRules({ left:{ anchor:'row1', align:HorizontalAlign.End }, top: { anchor:'row1', align:VerticalAlign.Bottom } }) .id('row2') Row(){}.width(100).height(100) .alignRules({ left: { anchor: 'row1', align:HorizontalAlign.Start }, top: { anchor: 'row2', align:VerticalAlign.Bottom } }) .backgroundColor(Color.Green) } .width('auto') .height('auto') .border({ width:1 })
6：bias
- 对齐后如果需要额外偏移可以设置bias（也可以使用offset）
样例
RelativeContainer(){
Row(){}.width(100).height(100)
.backgroundColor(Color.Red)
.id('row1')
.alignRules({
left: { anchor: '__container__', align: HorizontalAlign.Start },
right: { anchor: '__container__', align:HorizontalAlign.End },
bottom:{ anchor: '__container__', align:VerticalAlign.Bottom },
top: { anchor: '__container__', align:VerticalAlign.Top },
bias: { vertical:0,horizontal:0.5 }
})
}
.width(300)
.height(300)
.border({
width:1
})
bias:{vertical: 0, horizontal: 0.5}
// 垂直方向上偏移0，水平方向上偏移
7：guideLine
- 设置RelativeContainer容器的辅助线
- value：Array，数组中的每个项目即为一条辅助线
- id：guideLind的id，必须是唯一的并且不可以与容器内组件同名
- direction：指定guideLine的方向 水平 | 垂直 （默认值Axis.Vertical）
- position：指定guideLine位置，默认值{ start: 0 }
样例
RelativeContainer(){
Row(){}.width(100).height(100)
.backgroundColor(Color.Red)
.id('row1')
.alignRules({
left: { anchor: 'guideLine1', align: HorizontalAlign.Start },
top: { anchor: 'guideLine2', align:VerticalAlign.Top }
})
}
.guideLine([
{
id:'guideLine1',
direction:Axis.Vertical, //距离垂直轴方向的距离
position:{
start: 50
}
},
{
id:'guideLine2',
direction:Axis.Horizontal, //距离水平轴方向的距离
position:{
start: 50
}
}
])
.width(300)
.height(300)
.border({
width:1
})
8：barrier
- barrier ( value: Array )
- 设置RelativeContainer容器内的屏障，Array每一项目表示一个屏障
- id：barrier的id必须唯一且不能与容器组件重名
- direction：barrier的方向，BarrierDirection.LEFT
- referencedId：指定生成barrier所依赖的组件
样例
RelativeContainer(){
Row(){}.width(100).height(100)
.backgroundColor(Color.Red)
.id('row1')
Row(){}.width(100).height(100)
.alignRules({
left: { anchor:'row1', align:HorizontalAlign.End },
top: { anchor: 'row1', align: VerticalAlign.Bottom }
})
.id('row2')
.backgroundColor(Color.Green)
Row().width(100).height(100)
.alignRules({
left: { anchor:'row1', align:HorizontalAlign.End },
top: { anchor: 'row2', align:VerticalAlign.Bottom }
})
.backgroundColor(Color.Yellow)
.id('row3')
Row().width(100).height(100)
.alignRules({
top: { anchor: 'barrier1', align:VerticalAlign.Bottom },
left: { anchor: 'barrier2', align:HorizontalAlign.End }
})
.backgroundColor(Color.Pink)
}
.width(300)
.height(500)
.border({
width:1
})
.barrier([
{
id: 'barrier1',
direction: BarrierDirection.BOTTOM, // 该矩形的底边
referencedId:['row1','row2','row3'] // 将row1，row2，row3封装在一个矩形中
},
{
id: 'barrier2',
direction: BarrierDirection.RIGHT, // 该矩形的右边
referencedId:['row1','row2']
}
])