【问题标题】:Can not focus (click) on controls in container blackberry cascades无法聚焦(单击)容器黑莓级联中的控件
【发布时间】:2013-09-06 17:21:01
【问题描述】:

我有一个如下页面:

import bb.cascades 1.0

导航窗格 { 编号:导航 页 { // 根容器 容器 { 布局:码头布局{ }

        // 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 个按钮,用于在登录和注册之间导航。 问题是:我无法将注意力集中在登录容器上(输入文本或按下按钮)(但注册容器运行良好)。

请告诉我如何解决这个问题

【问题讨论】:

    标签: blackberry-10 blackberry-cascades


    【解决方案1】:

    如果我把它放在 IDE 中,我会立即得到 ​​p>

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

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

    【讨论】:

    • 谢谢!我更新了我的问题。问题是:我不能专注于登录容器
    • 您希望在打开电子邮件时专注于电子邮件?
    • 打开应用程序时,登录页面可见,但我无法专注于电子邮件、密码或登录按钮。当我导航到注册页面时,我可以专注于任何控件(我可以输入电子邮件、密码并按下注册按钮)
    • 首先,所有内容都在一个页面中。你有一些不同的页面设置?如果没有看到你正在使用的确切代码,我就看不到问题,我给你的工作
    • 我刚刚更新了我的完整源代码。如果将此代码粘贴到 IDE 中,将会丢失一些 .png 文件。
    猜你喜欢
    • 2023-03-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-12-17
    • 1970-01-01
    • 2023-02-17
    • 1970-01-01
    相关资源
    最近更新 更多