Even width of Text and Textfield

Question

I have a simple login form written in QML with a custom component, MediumText, and two TextFields. 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. Can you suggest me an approach? Here is my current code.

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

You can use a GridLayout instead of building a grid by means of ColumnLayout and RowLayout. By using the GridLayout, what you want is already guaranteed by the component.

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

Answer 2

One fix that works is setting the preferredWidth property of the TextField:

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