Text 和 Textfield 的均匀宽度

Question

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

我希望左侧的标签（MediumText 类型）以及右侧的 TextField 实例占用相同数量的 space，以便它们正确对齐。你能建议我一个方法吗？这是我当前的代码。

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

Answer 1

一个有效的修复是设置 TextField 的 preferredWidth 属性:

MediumText { text: "Username: ";Layout.fillWidth:true;Layout.preferredWidth: parent.width/2}

Answer 2

您可以使用 GridLayout 而不是通过 ColumnLayout 和 RowLayout 构建网格。通过使用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() }
        }
    }
}

Text 和 Textfield 的均匀宽度

Even width of Text and Textfield

qt

qml

qt5

qtquick2