Question

我有一个用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}
}

Answer 1

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

TextField

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

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

2 个答案: