我有一个如下页面:
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个按钮,用于在登录和注册之间导航。 问题是:我无法在登录容器上聚焦(输入文本或按下按钮)(但是注册容器运行良好)。
请让我知道如何解决这个问题
答案 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是在登录容器的顶部创建的,即使它不可见,也会在下面阻塞容器。两种解决方案: