甚至文本和文本字段的宽度

时间:2015-06-14 15:44:54

标签: qt qml qt5 qtquick2

我有一个用QML编写的简单登录表单,其中包含自定义组件MediumText和两个TextField。不幸的是,我无法正确对齐元素,如下图所示:

enter image description here

我希望左侧的标签(MediumText类型)以及右侧的TextField个实例占用相同数量的空间,以便它们正确对齐。你能建议我一个方法吗?这是我目前的代码。

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:

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}
}

2 个答案:

答案 0 :(得分:3)

一个有效的修复方法是设置preferredWidth的{​​{1}}属性:

TextField

答案 1 :(得分:1)

您可以使用GridLayout代替通过ColumnLayoutRowLayout构建网格。 通过使用GridLayout,组件已经保证了您想要的内容。

以下是您可以从中开始的完整示例:

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() }
        }
    }
}