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 
}