Even width of Text and Textfield

debugcn Published at Dev

alessandro ferrucci

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:

enter image description here

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
}

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

skypjack

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-07-8

Comments

0 comments

From Dev

text consisting of words longer than max-width in label doesn't wrap, even with max-width, word-break and overflow-wrap defined

From Dev

Related Related

Article