qt - Even width of Text and Textfield -
i have simple login form written in qml custom component, mediumtext
, , 2 textfield
s. unfortunately, i'm not able align elements, shown following picture:
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
Post a Comment