qt - Even width of Text and Textfield -


i have simple login form written in qml custom component, mediumtext, , 2 textfields. unfortunately, i'm not able align elements, shown following picture:

enter image description here

i want labels left (mediumtext type), textfield instances on right, take same amount of space correctly aligned. can suggest me approach? here 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} } 

you can use gridlayout instead of building grid means of columnlayout , rowlayout. using gridlayout, want guaranteed component.

here full example 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() }         }     } } 

Comments

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -