c++ - 送信ボタンを配置する qml レイアウト bb10

Question

カラーボックスの下に送信ボタンを配置したいと思います。レイアウトを修正するにはどうすればよいですか? topPadding を調整するたびに、送信ボタンではなく、カバーされたボックス全体が調整されます

import bb.cascades 1.0

ページ {

Container {
    background: Color.create("#f9f7f2");
    layout: StackLayout {}

    // Container for holding the title
    Container {
        horizontalAlignment: HorizontalAlignment.Center
        layout: DockLayout {}

        ImageView {
            horizontalAlignment: HorizontalAlignment.Fill
            verticalAlignment: VerticalAlignment.Fill
            imageSource: "asset:///images/navigation_bar.png"
        }

        Container {
            horizontalAlignment: HorizontalAlignment.Right
            rightPadding: 30
            topPadding: 40
            layout: DockLayout {}

            ImageButton {
                id: btnsettings
                verticalAlignment: VerticalAlignment.Center
                defaultImageSource: "asset:///images/navbar_icon_settings.png"

                onClicked: {
                    // show settings page when the button is clicked
                    cppObj.onSettingsClicked();
                }
            }
        }
    }

    Container {
        topPadding: 20
        leftPadding: 20
        rightPadding: 20
        bottomPadding: 20
        background: Color.create("#F4E9E1");
        horizontalAlignment: HorizontalAlignment.Fill
        layout: StackLayout {}

        Label {
            verticalAlignment: VerticalAlignment.Center
            horizontalAlignment: HorizontalAlignment.Left
            text: "Add Projects"

            textStyle {
                //  fontFamily: FontStyle.Default.Myriad
                // fontSize: 36
                color: Color.create("#60323C")
            }
        }
    }

    ScrollView {
        scrollViewProperties {
            scrollMode: ScrollMode.Vertical
        }

        Container {
            verticalAlignment: VerticalAlignment.Center
            horizontalAlignment: HorizontalAlignment.Center
            Divider {}

            Container {
                rightPadding: 30
                leftPadding: rightPadding
                bottomPadding: 40
                topPadding: 20
                verticalAlignment: VerticalAlignment.Bottom
                layout: DockLayout {}

                ImageView {
                    horizontalAlignment: HorizontalAlignment.Center
                    verticalAlignment: VerticalAlignment.Center
                    topMargin: 40
                    imageSource: "asset:///images/create_project_frame.png"
                }

            Container {
                horizontalAlignment: HorizontalAlignment.Center
                leftPadding: 70
                rightPadding: 70
                topPadding: 60

                Label {
                    horizontalAlignment: HorizontalAlignment.Center
                    verticalAlignment: VerticalAlignment.Center
                    text: qsTr("Create a Project")
                }
            }

            Container {
                leftPadding: 70
                rightPadding: 70
                topPadding: 150

                TextField {
                    id: tfMemberName
                    input.submitKey: SubmitKey.Next
                    topPadding: 50
                    hintText: qsTr("project name")
                     }
                 }

            Container {
                rightPadding: 30
                leftPadding: rightPadding
                bottomPadding: 20
                verticalAlignment: VerticalAlignment.Bottom
                layout: DockLayout {}

                ImageView {
                    horizontalAlignment: HorizontalAlignment.Center
                    verticalAlignment: VerticalAlignment.Center
                    topMargin: 40
                    imageSource: "asset:///images/add_member_frame.png"
                }

                Container {
                    horizontalAlignment: HorizontalAlignment.Center
                    leftPadding: 70
                    rightPadding: 70
                    topPadding: 60

                    Label {
                        horizontalAlignment: HorizontalAlignment.Center
                        verticalAlignment: VerticalAlignment.Center
                        text: qsTr("Add a Member")
                    }
                }

                    Container {
                        leftPadding: 70
                        rightPadding: 70
                        topPadding: 150

                        TextField {
                            id: tfEmail
                            input.submitKey: SubmitKey.Next
                            topPadding: 40
                            hintText: qsTr("email address")
                        }
                     }

                    Container {
                       horizontalAlignment: HorizontalAlignment.Left
                       verticalAlignment: VerticalAlignment.Center
                       topPadding: 250
                       leftPadding: 180
                       layout: DockLayout {}

                    ImageButton {
                        id: btnaddmore
                        defaultImageSource: "asset:///images/button_add.png"

                        onClicked: {
                            controller.showProjectsPage(); /*var projectsPage = page.createObject();
                            navPane.push(projectsPage);*/
                        }
                    }
                }

               Container {
                    horizontalAlignment: HorizontalAlignment.Right
                    rightPadding: 250
                    topPadding: 310

                    Label {
                        horizontalAlignment: HorizontalAlignment.Right
                        text: qsTr("add more")
                            }
                        }
                    }
                }
            }

            ImageButton {
                id: btnsubmit
                horizontalAlignment: HorizontalAlignment.Center
                defaultImageSource: "asset:///images/button_submit.png"
            }
        }
}
/*actions: [
    ActionItem {
        title: qsTr ("Add Project")
        imageSource: "asset:///images/actionbar_icon_add.png"
        ActionBar.placement: ActionBarPlacement.OnBar

        /*onTriggered: {
            _projects.addProjects()
            navigationPane.push(addProjects.createObject())
        }
    }
]*/

}

この見た目を実現したい

Answer 1

私があなたを正しければ、このコード

import bb.cascades 1.0

Page {

    // [0]
    Container {
        background: Color.Gray
        topPadding: 40
        leftPadding: 20
        rightPadding: leftPadding
        bottomPadding: topPadding
        layout: StackLayout {
        }

        // [1]
        Container {
            leftPadding: 40
            rightPadding: leftPadding
            background: Color.Red
            maxHeight: 350

            // [2]
            Container {
                layoutProperties: StackLayoutProperties {
                    spaceQuota: 1.5
                }
                Label {
                    horizontalAlignment: HorizontalAlignment.Center
                    text: "Add a Member"
                }
                TextField {
                    horizontalAlignment: HorizontalAlignment.Center
                    hintText: "email address"
                }
            } // [2]

            Container {
                layoutProperties: StackLayoutProperties {
                    spaceQuota: 1
                }
                horizontalAlignment: HorizontalAlignment.Center
                Container {
                    layout: StackLayout {
                        orientation: LayoutOrientation.LeftToRight
                    }
                    Button {
                        text: "+"
                    }
                    Label {
                        verticalAlignment: VerticalAlignment.Center
                        text: "add more"
                    }
                }

            }
        } //[1]

        Button {
            horizontalAlignment: HorizontalAlignment.Center
            text: "Button submit"
        }
    } // [0]
}

次のレイアウトが得られます。

Buttonsカスタムに置き換えるだけImageButtons