DockLayout布局

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 

}