使用 qml 在黑莓 10 中的布局答案

【问题标题】：Layouts in blackberry 10 using qml使用 qml 在黑莓 10 中的布局
【发布时间】：2013-07-18 10:15:58
【问题描述】：

我正在学习 Blackberry 10。我想在 qml 中为 balckberry 10 设计一个页面，如下所示。

我不明白 qml 中的布局。我想要具有特定宽度和高度以及一些对齐方式的布局。

能否请您提供以下页面的 qml 源代码。

【问题讨论】：

标签： qml blackberry-10 blackberry-cascades docklayoutpanel

【解决方案1】：

这是您要求的布局。当然，ImageView、ImageButton等需要自己提供资产。

import bb.cascades 1.0

Page {
    // root
    Container {
        //[0]
        Container {
            maxHeight: 300
            minHeight: maxHeight
            layout: StackLayout {
                orientation: LayoutOrientation.LeftToRight
            }
            ImageView {
            }
            ImageView {
            }
            ImageView {
            }
        } //[0]

        // [1]
        Container {
            maxHeight: 150
            minHeight: maxHeight
            layout: StackLayout {
                orientation: LayoutOrientation.LeftToRight
            }
            Label {
                text: "Label"   
            }
            Button {
                text: "Button 1"
            }
            Button {
                text: "Button 2"
            }
        } // [1]

        // [2]
        Container {
            maxHeight: 600
            minHeight: maxHeight
            horizontalAlignment: HorizontalAlignment.Fill
            // [2-1]
            Container {
                layout: StackLayout {
                    orientation: LayoutOrientation.LeftToRight
                }
                ImageButton {
                }
                ImageButton {
                }
                ImageButton {
                }
            } // [2-1]

            // [2-2]
            Container {
                layout: StackLayout {
                    orientation: LayoutOrientation.LeftToRight
                }
                ImageButton {
                }
                ImageButton {
                }
                ImageButton {
                }
            } // [2-2]

            // [2-3]
            Container {
                horizontalAlignment: HorizontalAlignment.Fill
                layout: DockLayout {
                }
                Button {
                    horizontalAlignment: HorizontalAlignment.Right
                    text: "Button 3"
                }
            } // [2-3]
        } // [2]

        // [3]
        Container {
            maxHeight: 150
            minHeight: maxHeight
            layout: StackLayout {
                orientation: LayoutOrientation.LeftToRight
            }
            TextArea {
                text: "Text Box"
            }
            ImageView {
            }
        } // [3]
    } // root
}

另外，如果您想在同一个StackLayout 中拥有不同的小部件相对大小及其相对于彼此的位置，我建议在这种情况下使用StackLayoutProperties。

【讨论】：