0

我有一个如下页面：

import bb.cascades 1.0

NavigationPane { id: nav Page { // 根容器 Container { layout: DockLayout { }

        // Background
        ImageView {
            imageSource: "asset:///bg.png"
            verticalAlignment: VerticalAlignment.Fill
            horizontalAlignment: HorizontalAlignment.Fill
        }

        // Container for contents
        Container {
            layout: StackLayout {
                orientation: LayoutOrientation.TopToBottom
            }

            // Top navigation : Login and Register buttons
            Container {
                layout: StackLayout {
                    orientation: LayoutOrientation.LeftToRight
                }

                ImageView {
                    id: tabLogin
                    imageSource: "asset:///ic_login_selected_tab.png"
                    onTouch: {
                        // Show login & hide register
                        loginContainer.setVisible(true)
                        registerContainer.setVisible(false)

                        // Change backgrounds
                        tabLogin.setImageSource(qsTr("asset:///ic_login_selected_tab.png"))
                        tabRegister.setImageSource(qsTr("asset:///ic_register_normal_tab.png"))
                    }

                }

                ImageView {
                    id: tabRegister
                    imageSource: "asset:///ic_register_normal_tab.png"

                    onTouch: {
                        loginContainer.setVisible(false)
                        registerContainer.setVisible(true)
                        tabLogin.setImageSource(qsTr("asset:///ic_login_normal_tab.png"))
                        tabRegister.setImageSource(qsTr("asset:///ic_register_selected_tab.png"))
                    }
                }

            }

            // Container for Login and Register pages
            Container {
                horizontalAlignment: HorizontalAlignment.Fill
                layout: DockLayout {
                }

                // Login container
                Container {
                    id: loginContainer
                    visible: true
                    horizontalAlignment: HorizontalAlignment.Fill
                    layout: StackLayout {
                        orientation: LayoutOrientation.TopToBottom
                    }

                    topPadding: 200

                    // safeMATE text
                    ImageView {
                        verticalAlignment: VerticalAlignment.Top
                        horizontalAlignment: HorizontalAlignment.Center
                        imageSource: "asset:///safemate.png"
                    }

                    // Container for email, passcode and login button
                    Container {
                        horizontalAlignment: HorizontalAlignment.Fill
                        verticalAlignment: VerticalAlignment.Center

                        topMargin: 100
                        bottomMargin: 50.0
                        Container {
                            layout: StackLayout {
                                orientation: LayoutOrientation.LeftToRight
                            }

                            background: Color.White
                            horizontalAlignment: HorizontalAlignment.Fill

                            leftPadding: 20.0
                            rightPadding: 30.0
                            topPadding: 25
                            bottomPadding: 25
                            bottomMargin: 5.0
                            topMargin: 5.0
                            leftMargin: 5.0
                            rightMargin: 5.0
                            layoutProperties: StackLayoutProperties {

                            }

                            ImageView {
                                imageSource: "asset:///ic_email.png"
                            }
                            TextField {
                                hintText: "Email"
                                inputMode: TextFieldInputMode.EmailAddress
                            }

                        }

                        Container {
                            layout: StackLayout {
                                orientation: LayoutOrientation.LeftToRight
                            }

                            background: Color.White
                            horizontalAlignment: HorizontalAlignment.Fill

                            leftPadding: 20.0
                            rightPadding: 30.0
                            topPadding: 25
                            bottomPadding: 25

                            bottomMargin: 5.0
                            topMargin: 5.0
                            leftMargin: 5.0
                            rightMargin: 5.0
                            layoutProperties: StackLayoutProperties {

                            }
                            ImageView {
                                imageSource: "asset:///ic_passcode.png"
                            }

                            TextField {
                                hintText: "Passcode"
                                inputMode: TextFieldInputMode.Password
                            }

                        }

                        ImageButton {
                            horizontalAlignment: HorizontalAlignment.Fill
                            defaultImageSource: "asset:///btn_login.png"
                            pressedImageSource: "asset:///btn_login_clicked.png"

                            onClicked: {
                                var page = homePage.createObject();

                                nav.push(page);
                            }
                        }
                    }
                }

                // Register container
                ScrollView {

                    Container {
                        id: registerContainer
                        visible: false
                    horizontalAlignment: HorizontalAlignment.Fill
                    layout: StackLayout {
                        orientation: LayoutOrientation.TopToBottom
                    }

                    topPadding: 30

                    // safeMATE text
                    ImageView {
                        verticalAlignment: VerticalAlignment.Top
                        horizontalAlignment: HorizontalAlignment.Center
                        imageSource: "asset:///safemate.png"
                    }

                    // Container for email, passcode and login button
                    Container {
                        horizontalAlignment: HorizontalAlignment.Fill
                        verticalAlignment: VerticalAlignment.Center

                        topMargin: 30
                        bottomMargin: 50.0

                        // Email
                        Container {
                            layout: StackLayout {
                                orientation: LayoutOrientation.LeftToRight
                            }

                            background: Color.White
                            horizontalAlignment: HorizontalAlignment.Fill

                            leftPadding: 20.0
                            rightPadding: 30.0
                            topPadding: 25
                            bottomPadding: 25
                            bottomMargin: 5.0
                            topMargin: 5.0
                            leftMargin: 5.0
                            rightMargin: 5.0
                            layoutProperties: StackLayoutProperties {

                            }

                            ImageView {
                                imageSource: "asset:///ic_email.png"
                            }
                            TextField {
                                hintText: "Email"
                                inputMode: TextFieldInputMode.EmailAddress
                            }

                        }

                        // Full name
                        Container {
                            layout: StackLayout {
                                orientation: LayoutOrientation.LeftToRight
                            }

                            background: Color.White
                            horizontalAlignment: HorizontalAlignment.Fill

                            leftPadding: 20.0
                            rightPadding: 30.0
                            topPadding: 25
                            bottomPadding: 25
                            bottomMargin: 5.0
                            topMargin: 5.0
                            leftMargin: 5.0
                            rightMargin: 5.0
                            layoutProperties: StackLayoutProperties {

                            }

                            ImageView {
                                imageSource: "asset:///ic_fullname.png"
                            }
                            TextField {
                                hintText: "Full name"
                                inputMode: TextFieldInputMode.Default
                            }

                        }

                        // Passcode
                        Container {
                            layout: StackLayout {
                                orientation: LayoutOrientation.LeftToRight
                            }

                            background: Color.White
                            horizontalAlignment: HorizontalAlignment.Fill

                            leftPadding: 20.0
                            rightPadding: 30.0
                            topPadding: 25
                            bottomPadding: 25

                            bottomMargin: 5.0
                            topMargin: 5.0
                            leftMargin: 5.0
                            rightMargin: 5.0
                            layoutProperties: StackLayoutProperties {

                            }
                            ImageView {
                                imageSource: "asset:///ic_passcode.png"
                            }

                            TextField {
                                hintText: "Passcode"
                                inputMode: TextFieldInputMode.Password
                            }

                        }

                        // Phone
                        Container {
                            layout: StackLayout {
                                orientation: LayoutOrientation.LeftToRight
                            }

                            // Country code
                            Container {
                                layout: StackLayout {
                                    orientation: LayoutOrientation.LeftToRight
                                }

                                background: Color.White

                                leftPadding: 20.0
                                rightPadding: 30.0
                                topPadding: 35
                                bottomPadding: 35
                                bottomMargin: 5.0
                                topMargin: 5.0
                                leftMargin: 5.0
                                rightMargin: 5.0
                                layoutProperties: StackLayoutProperties {

                                }

                                ImageView {
                                    imageSource: "asset:///ic_phonenumber.png"
                                }


                            }

                            // Phone
                            Container {
                                horizontalAlignment: HorizontalAlignment.Fill
                                layout: StackLayout {
                                    orientation: LayoutOrientation.LeftToRight
                                }

                                background: Color.White

                                leftPadding: 20.0
                                rightPadding: 30.0
                                topPadding: 23
                                bottomPadding: 23
                                bottomMargin: 5.0
                                topMargin: 5.0
                                leftMargin: 5.0
                                rightMargin: 5.0
                                layoutProperties: StackLayoutProperties {

                                }

                                // Phone number text box
                                TextField {
                                    hintText: "Phone number"
                                    inputMode: TextFieldInputMode.Default
                                }   
                            }
                        }

                        // Contact info title
                        Container {
                            topMargin: 20
                            horizontalAlignment: HorizontalAlignment.Fill
                            layout: StackLayout {
                                orientation: LayoutOrientation.LeftToRight
                            }

                            ImageView {
                                imageSource: "asset:///ic_contactinfo.png"
                            }

                            Container {
                                leftPadding: 20
                                layout: StackLayout {
                                    orientation: LayoutOrientation.TopToBottom
                                }

                                Label {
                                    verticalAlignment: VerticalAlignment.Center
                                    text: "CONTACT INFO"
                                }
                                Label {
                                    text: "These information will be used for emergencies"
                                    multiline: true
                                    textStyle.fontSize: FontSize.XSmall
                                }
                            }

                        }

                        // Contact info container
                        Container {
                            topMargin: 20
                            horizontalAlignment: HorizontalAlignment.Fill
                            verticalAlignment: VerticalAlignment.Center
                            layout: StackLayout {
                                orientation: LayoutOrientation.TopToBottom
                            }

                            // Phone
                            Container {

                                layout: StackLayout {
                                    orientation: LayoutOrientation.LeftToRight
                                }

                                // Country code
                                Container {
                                    layout: StackLayout {
                                        orientation: LayoutOrientation.LeftToRight
                                    }

                                    background: Color.White

                                    leftPadding: 20.0
                                    rightPadding: 30.0
                                    topPadding: 35
                                    bottomPadding: 35
                                    bottomMargin: 5.0
                                    topMargin: 5.0
                                    leftMargin: 5.0
                                    rightMargin: 5.0
                                    layoutProperties: StackLayoutProperties {

                                    }

                                    ImageView {
                                        imageSource: "asset:///ic_phonenumber.png"
                                    }
                                }

                                // Phone
                                Container {
                                    horizontalAlignment: HorizontalAlignment.Fill
                                    layout: StackLayout {
                                        orientation: LayoutOrientation.LeftToRight
                                    }

                                    background: Color.White

                                    leftPadding: 20.0
                                    rightPadding: 30.0
                                    topPadding: 23
                                    bottomPadding: 23
                                    bottomMargin: 5.0
                                    topMargin: 5.0
                                    leftMargin: 5.0
                                    rightMargin: 5.0
                                    layoutProperties: StackLayoutProperties {

                                    }

                                    // Phone number text box
                                    TextField {
                                        hintText: "Phone number"
                                        inputMode: TextFieldInputMode.Default
                                    }   
                                }
                            }

                            // Address
                            Container {
                                layout: StackLayout {
                                    orientation: LayoutOrientation.LeftToRight
                                }

                                background: Color.White
                                horizontalAlignment: HorizontalAlignment.Fill

                                leftPadding: 20.0
                                rightPadding: 30.0
                                topPadding: 25
                                bottomPadding: 25
                                bottomMargin: 5.0
                                topMargin: 5.0
                                leftMargin: 5.0
                                rightMargin: 5.0
                                layoutProperties: StackLayoutProperties {

                                }

                                ImageView {
                                    imageSource: "asset:///ic_address.png"
                                }
                                TextField {
                                    hintText: "Address"
                                    inputMode: TextFieldInputMode.EmailAddress
                                }

                            }
                        }

                        // Register button
                        ImageButton {
                            horizontalAlignment: HorizontalAlignment.Fill
                            defaultImageSource: "asset:///btn_register.png"
                            pressedImageSource: "asset:///btn_register_clicked.png"

                            onClicked: {
                                var page = homePage.createObject();

                                nav.push(page);
                            }
                        }
                    }
                }
        }
            }
        }
    }
}

attachedObjects: [
    ComponentDefinition {
        id: homePage
        source: "home.qml"
    }
]

onPopTransitionEnded: {
    // Transition is done destroy the Page to free up memory.
    page.destroy();
}

}

我在页面顶部有 2 个按钮可以在登录和注册之间导航。问题是：我无法将注意力集中在登录容器上（输入文本或按下按钮）（但注册容器运行良好）。

请让我知道如何解决这个问题

4

1 回答 1

2

如果我把它放在 IDE 中，我会立即得到

组件“页面”的默认属性不接受多个对象。

所以，在你的两个容器周围放一个 Container，这样 Page 里面就只有一个元素。

import bb.cascades 1.0
Page {
    Container {

        // Login container
        Container {
            // Email
            TextField {
            }
            // Password
            TextField {
            }
            // Button login
            Button {
            }
        }
        // Register container
        Container {
            // Email
            TextField {
            }
            // Password
            TextField {
            }
            // Button register
            Button {
            }
        }
    }
}

编辑：

由于您添加了完整代码，因此还有另一个问题。您创建了登录容器，然后创建了用于注册新用户的“ScrollView”。问题 ScrollView 是在登录容器之上创建的，即使它不可见，它也会阻塞下面的容器。两种解决方案：

  • 为注册新用户创建一个单独的页面
  • 将您的登录容器移动到 ScrollView 下。运气好的话应该可以完成这项工作（而不是禁用注册）。由于您使用不应破坏您的设计的 DockLayout
于 2013-09-05T08:03:49.790 回答