Макеты в Blackberry 10 с использованием qml

Question

Я изучаю Blackberry 10. Я хочу создать страницу в qml для Balckberry 10, как показано ниже.

Я не понял макеты в qml. Я хочу макеты с определенной шириной и высотой и с некоторыми выравниваниями.

Не могли бы вы предоставить мне исходный код в qml для следующей страницы.

Answer 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 в этом случае.