无法聚焦(单击)容器黑莓级联中的控件

时间:2013-09-05 05:09:03

标签: blackberry-10 blackberry-cascades

我有一个如下页面:

import bb.cascades 1.0

NavigationPane {     id:nav     第{{         //根容器         容器 {             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个按钮,用于在登录和注册之间导航。 问题是:我无法在登录容器上聚焦(输入文本或按下按钮)(但是注册容器运行良好)。

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

1 个答案:

答案 0 :(得分:2)

如果我把它放在IDE中,我会马上得到

  

组件'Page'的默认属性不接受多个对象。

所以,在你的两个容器周围放一个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不应该破坏你的设计