[英]Even width of Text and Textfield
I have a simple login form written in QML with a custom component, MediumText
, and two TextField
s. 我有一个用QML编写的简单登录表单,其中包含一个自定义组件MediumText
和两个TextField
。 Unfortunately, I'm not able to properly align the elements, as shown by the following picture: 不幸的是,我无法正确对齐元素,如下图所示:
I want the labels to the left ( MediumText
type), as well as the TextField
instances on the right, to take up the same amount of space so that they are correctly aligned. 我希望左侧的标签( MediumText
类型)以及右侧的TextField
实例占用相同数量的空间,以便它们正确对齐。 Can you suggest me an approach? 你能建议我一种方法吗? Here is my current code. 这是我当前的代码。
MediumText.qml: MediumText.qml:
import QtQuick 2.3
Text {
clip: true
font.pixelSize: 20
font.family: "Liberation Mono"
smooth: true
font.bold: true
wrapMode: Text.WordWrap
opacity: 1
}
Login.qml: Login.qml:
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.1
Rectangle {
id:rootRect
anchors.centerIn: parent
Layout.preferredWidth: 480
Layout.preferredHeight: 640
ColumnLayout {
anchors.centerIn: parent
Layout.fillWidth: true
spacing: 16
Row{
Image {
id: logoimage
height: 135
fillMode: Image.PreserveAspectFit
source: "images/logo.png"
}
}
RowLayout {
anchors.left: parent.left; anchors.right: parent.right
spacing: 4
MediumText { text: "Username: ";Layout.fillWidth:true; }
TextField { id:usernameText; placeholderText: "username"; Layout.fillWidth: true;}
}
RowLayout {
anchors.left: parent.left; anchors.right: parent.right
spacing: 4
MediumText { text: "Password:";Layout.fillWidth:true }
TextField { id:passwordText; placeholderText: "password"; echoMode: TextInput.Password; Layout.fillWidth: true;}
}
RowLayout {
spacing: 16
anchors.horizontalCenter: parent.horizontalCenter
Button { text: "Login"; onClicked: {
console.log(mojoLoginLoader.visible);
mojoLoginLoader.visible=true;
passwordText.enabled=false;
usernameText.enabled=false;
//auth_controller.sayHello();
mojoRootViewHolder.source="Welcome.qml"
}
}
Button { text: "Exit"; onClicked: auth_controller.sayNay() }
}
}
CenteredLoader{visible:false; id:mojoLoginLoader}
}
一种有效的解决方法是设置TextField
的preferredWidth
属性:
MediumText { text: "Username: ";Layout.fillWidth:true;Layout.preferredWidth: parent.width/2}
You can use a GridLayout
instead of building a grid by means of ColumnLayout
and RowLayout
. 您可以使用GridLayout
代替通过ColumnLayout
和RowLayout
构建网格。 By using the GridLayout
, what you want is already guaranteed by the component. 通过使用GridLayout
,组件已经可以保证所需的内容。
Here is a full example from which you can start: 这是一个完整的示例,您可以从中开始:
import QtQuick 2.3
import QtQuick.Window 2.2
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1
Window {
visible: true
width: 500
height: 500
title: "Grid example"
ColumnLayout {
anchors.centerIn: parent
Layout.fillWidth: true
spacing: 16
Row{
Image {
id: logoimage
height: 135
fillMode: Image.PreserveAspectFit
source: "images/logo.png"
}
}
GridLayout {
anchors.centerIn: parent
Layout.fillWidth: true
columnSpacing: 16
rowSpacing: 4
columns: 2
MediumText { text: "Username: "; Layout.fillWidth:true; }
TextField { id:usernameText; placeholderText: "username"; Layout.fillWidth: true;}
MediumText { text: "Password:";Layout.fillWidth:true }
TextField { id:passwordText; placeholderText: "password"; echoMode: TextInput.Password; Layout.fillWidth: true;}
}
RowLayout {
spacing: 16
anchors.horizontalCenter: parent.horizontalCenter
Button { text: "Login"; onClicked: {
console.log(mojoLoginLoader.visible);
mojoLoginLoader.visible=true;
passwordText.enabled=false;
usernameText.enabled=false;
//auth_controller.sayHello();
mojoRootViewHolder.source="Welcome.qml"
}
}
Button { text: "Exit"; onClicked: auth_controller.sayNay() }
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.