DockLayout布局要求子元素停靠式的布局。子元素可以通过horizontalAlignment: HorizontalAlignment.Center和verticalAlignment: VerticalAlignment.Top 确定自己在容器的哪个边。


DockLayout布局可以使用padding概念,确保子元素离容器的填充边距。




DockLayout例子
Container {
    layout: DockLayout {}
   
    Button {
        text: "Button1"
        horizontalAlignment: HorizontalAlignment.Right
        verticalAlignment: VerticalAlignment.Top                
    }
   
    Button {
        text: "Button2"
        horizontalAlignment: HorizontalAlignment.Right
        verticalAlignment: VerticalAlignment.Center
    }           
}


如果第一个元素放到左上角,第二个元素也放在了左上角,无论是先声明横horizontalAlignment还是先声明竖verticalAlignment,最终结果都是后者遮盖住前者。
后者遮盖前者的例子:


import bb.cascades 1.0


Page {
    Container {
        layout: DockLayout {
        }
        Button {
            text: "Button1"
            horizontalAlignment: HorizontalAlignment.Right
            verticalAlignment: VerticalAlignment.Top
        }
        Button {
            text: "Button2"
            horizontalAlignment: HorizontalAlignment.Right
            verticalAlignment: VerticalAlignment.Top
        }
    }

}


去掉了老版本容器内元素的布局属性:

Label { 
     layoutProperties: DockLayoutProperties {
         horizontalAlignment: HorizontalAlignment.Left } 
}
改为了新版本的对齐属性:

Label { 
     horizontalAlignment: HorizontalAlignment.Left 
}


Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐