RelativeContainer布局的应用
以容器和组件作为锚点布局、设置 margin、容器大小适应内容、bias 的用法、guideline 和 barrier 的声明及用法、不同链模式(SPREAD、SPREAD_INSIDE、PACKED 等)的实现等多个示例。
我就举两个例子锚点布局、bias 的用法
锚点布局
RelativeContainer() {
Row().width(100).height(100)
.backgroundColor("#FF3333")
.alignRules({
top: {anchor: "__container__", align: VerticalAlign.Top},
left: {anchor: "__container__", align: HorizontalAlign.Start}
})
.id("row1")
Row().width(100).height(100)
.backgroundColor("#FFCC00")
.alignRules({
top: {anchor: "__container__", align: VerticalAlign.Top},
right: {anchor: "__container__", align: HorizontalAlign.End}
})
.id("row2")
Row().height(100)
.backgroundColor("#FF6633")
.alignRules({
top: {anchor: "row1", align: VerticalAlign.Bottom},
left: {anchor: "row1", align: HorizontalAlign.End},
right: {anchor: "row2", align: HorizontalAlign.Start}
})
.id("row3")
Row()
.backgroundColor("#FF9966")
.alignRules({
top: {anchor: "row3", align: VerticalAlign.Bottom},
bottom: {anchor: "__container__", align: VerticalAlign.Bottom},
left: {anchor: "__container__", align: HorizontalAlign.Start},
right: {anchor: "row1", align: HorizontalAlign.End}
})
.id("row4")
Row()
.backgroundColor("#FF66FF")
.alignRules({
top: {anchor: "row3", align: VerticalAlign.Bottom},
bottom: {anchor: "__container__", align: VerticalAlign.Bottom},
left: {anchor: "row2", align: HorizontalAlign.Start},
right: {anchor: "__container__", align: HorizontalAlign.End}
})
.id("row5")
}
-
RelativeContainer()
: 定义了一个相对布局容器,允许子组件相对于彼此或容器本身定位。 -
Row()
: 定义了一个行组件,可以包含在RelativeContainer
中。每个Row
组件代表一个水平布局的条目。 -
.width()
和.height()
: 设置组件的宽度和高度。 -
.backgroundColor()
: 设置组件的背景颜色。 -
.alignRules()
: 定义组件的对齐规则,包括相对于哪个锚点(anchor)以及对齐方式(如顶部对齐Top
、底部对齐Bottom
、开始对齐Start
、结束对齐End
、中心对齐Center
)。 -
.id()
: 为组件设置一个唯一的标识符。
bias 的用法
Row() {
RelativeContainer() {
Row().width(100).height(100)
.backgroundColor("#FF3333")
.alignRules({
top: {anchor: "__container__", align: VerticalAlign.Top},
bottom : {anchor : "__container__", align : VerticalAlign.Bottom},
left: {anchor: "__container__", align: HorizontalAlign.Start},
right : {anchor : "__container__", align: HorizontalAlign.End},
bias : {vertical : 0.3}
})
.id("row1")
}
.width(300).height(300)
.margin({left: 50})
.border({width:2, color: "#6699FF"})
}