How can i make the buttons wrap when a dialog window is resized to be narrow by the user? Currently they are just cutoff.
QML
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
Frame {
width: parent.width
height: parent.height
ColumnLayout {
width: implicitWidth
spacing: 20
anchors.left: parent.left
anchors.right: parent.right
Layout.alignment: Qt.AlignTop
// Config
ColumnLayout {
Layout.fillWidth: true
spacing: 2
Label {
text: "Config"
font.bold: true
}
TextField {
readOnly: true
placeholderText: qsTr("Path to config.json file (C:\\desktop\\config.txt)")
Layout.fillWidth: true
}
RowLayout {
Layout.fillWidth: true
Layout.alignment: Qt.AlignRight
Button {
text: qsTr("Edit")
implicitWidth: implicitHeight
}
Button {
text: qsTr("Browse")
implicitWidth: implicitHeight
}
Button {
text: qsTr("Clear")
implicitWidth: implicitHeight
}
Button {
text: qsTr("Find")
implicitWidth: implicitHeight
}
}
}
// File
ColumnLayout {
Layout.fillWidth: true
spacing: 2
Label {
text: "File"
font.bold: true
}
TextField {
readOnly: true
placeholderText: qsTr("Path to config.json file (C:\\desktop\\file.txt)")
Layout.fillWidth: true
}
RowLayout {
Layout.fillWidth: true
Layout.alignment: Qt.AlignRight
Button {
text: qsTr("Clear")
implicitWidth: implicitHeight
}
Button {
text: qsTr("Find")
implicitWidth: implicitHeight
}
}
}
}
}
main.qml
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Page1 {
anchors.centerIn: parent
}
}
You have to use Flow instead of RowLayout:
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
Frame {
width: parent.width
height: parent.height
ColumnLayout {
width: implicitWidth
spacing: 20
anchors.left: parent.left
anchors.right: parent.right
Layout.alignment: Qt.AlignTop
// Config
ColumnLayout {
Layout.fillWidth: true
spacing: 2
Label {
text: "Config"
font.bold: true
}
TextField {
readOnly: true
placeholderText: qsTr("Path to config.json file (C:\\desktop\\config.txt)")
Layout.fillWidth: true
}
Flow {
Layout.fillWidth: true
layoutDirection: Qt.RightToLeft
Button {
text: qsTr("Edit")
implicitWidth: implicitHeight
}
Button {
text: qsTr("Browse")
implicitWidth: implicitHeight
}
Button {
text: qsTr("Clear")
implicitWidth: implicitHeight
}
Button {
text: qsTr("Find")
implicitWidth: implicitHeight
}
}
}
// File
ColumnLayout {
Layout.fillWidth: true
spacing: 2
Label {
text: "File"
font.bold: true
}
TextField {
readOnly: true
placeholderText: qsTr("Path to config.json file (C:\\desktop\\file.txt)")
Layout.fillWidth: true
}
Flow {
Layout.fillWidth: true
layoutDirection: Qt.RightToLeft
Button {
text: qsTr("Clear")
implicitWidth: implicitHeight
}
Button {
text: qsTr("Find")
implicitWidth: implicitHeight
}
}
}
}
}
Related
Trying to center items in a ColumnLayout (nested into a StackLayout) but doesn't seem to work.
The StackLayout contains also a Canvas which I used to verify that Layout.fillWidth: true is working as expected. So I assume also the ColumnLayout is filling width (i.e. the problem is not the outer StackLayout), although I cannot understand what problem it has.
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.3
Window {
id: mainWindow
width: 340
height: 380
visible: true
title: qsTr("Hello")
TabBar {
id: tabBar
width: parent.width
TabButton {text: "Layout"}
TabButton {text: "Canvas"}
}
StackLayout {
anchors.fill: parent
anchors.topMargin: tabBar.height
currentIndex: tabBar.currentIndex
ColumnLayout {
Layout.fillWidth: true
spacing: 10
Label {
Layout.alignment: Qt.AlignCenter
text: "Regular buttons:"
}
RowLayout {
Layout.alignment: Qt.AlignCenter
spacing: 10
Button {text: "Normal"}
Button {text: "Highlighted"; highlighted: true}
DelayButton {text: "Delay"}
}
Label {
Layout.alignment: Qt.AlignCenter
text: "Checkboxes:"
}
RowLayout {
Layout.alignment: Qt.AlignCenter
spacing: 10
CheckBox {text: "Checkbox 1"}
CheckBox {text: "Checkbox 2"}
}
Label {
Layout.alignment: Qt.AlignCenter
text: "Radiobuttons:"
}
RowLayout {
Layout.alignment: Qt.AlignCenter
spacing: 10
RadioButton {text: "Radiobutton 1"}
RadioButton {text: "Radiobutton 2"}
}
Label {
Layout.alignment: Qt.AlignCenter
text: "Miscellaneous:"
}
Switch {
Layout.alignment: Qt.AlignCenter
text: "Switch"
}
}
Canvas {
Layout.fillWidth: true
Layout.fillHeight: true
Layout.maximumHeight: 100
Layout.margins: 2
onPaint: {
var ctx = getContext('2d')
ctx.reset()
ctx.strokeStyle = 'black'
ctx.lineWidth = 2
ctx.beginPath()
ctx.moveTo(0, 0)
ctx.lineTo(width, height)
ctx.stroke()
ctx.beginPath()
ctx.moveTo(width, 0)
ctx.lineTo(0, height)
ctx.stroke()
}
}
}
}
I have two QML pages main.qml and Kos.qml,
what i want is when a button in main.qml clicked it load Kos.qml in the screen.
i did try using loader, but it is not working
import QtQuick 2.5
import QtQuick.Controls 2.5
ApplicationWindow {
id: applicationWindow
width: 640
height: 480
color: "#fc4343"
title: qsTr("Tabs")
visible: true
// HALAMAN UTAMA
Page {
anchors.centerIn: parent
anchors.fill: parent
id: page
enabled: true
Loader{
id: kos
active: true
anchors.fill: parent
}
Button {
id: button
x: 198
width: 87
height: 30
text: qsTr("Search")
font.bold: true
anchors.top: borderImage.bottom
anchors.topMargin: 198
anchors.right: toolSeparator.left
anchors.rightMargin: 28
MouseArea{
anchors.fill: parent
onClicked:{
kos.source = "Kos.qml";
}
}
background: Rectangle {
id: background
color: "#ef3644"
}
contentItem: Text {
id: textItem
font: control.font
opacity: enabled ? 1.0 : 0.3
color: "white"
text: "Search"
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
}
}
Kos.qml i use PageBackground as a background
import QtQuick 2.4
PageBackground {
id: kos
width: 640
height: 480
Text {
id: element
x: 6
y: 20
width: 24
height: 32
color: "#ffffff"
text: qsTr("<")
font.strikeout: false
styleColor: "#ffffff"
font.underline: false
font.italic: false
font.bold: true
font.pixelSize: 25
MouseArea {
id: mouseArea
anchors.rightMargin: 0
anchors.bottomMargin: 0
anchors.leftMargin: 0
anchors.topMargin: 0
anchors.fill: parent
}
}
}
did i messed up somewhere?
I tried to run your code. Since I am not aware of what your PageBackground is, I changed that to Rectangle. That works for me. Try to start from the minimal code then add your styles and functions on top of it. Try with below minimal code. Keep both main.qml & Kos.qml in the same directory and ensure both files added to qml resources.
main.qml
import QtQuick 2.9
import QtQuick.Controls 2.2
ApplicationWindow {
id: applicationWindow
width: 640
height: 480
visible: true
Text {
anchors.centerIn: parent
text: "App window"
}
Loader {
id: loaderId
anchors.fill: parent
source: ""
}
Button {
text: "click me!!"
width: parent.width
anchors.bottom: parent.bottom
onClicked: {
if(loaderId.source == "")
loaderId.source = "Kos.qml"
else
loaderId.source = ""
}
}
}
Kos.qml
import QtQuick 2.9
Rectangle {
id: kos
width: 640
height: 480
color: "grey"
Text {
anchors.centerIn: parent
text: "<b>Loaded Item</b>"
color: "white"
}
}
I have a simple question - is there a way I can make my rowLayout change its height evenly with the rest of columnLayout items? Or what exactly does it prevent from adjusting its height along with the rectangles?
A simple piece of code:
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.5
ApplicationWindow {
visible: true
width: 640
height: 480
ColumnLayout {
anchors.fill: parent
anchors.margins: 30
RowLayout {
Layout.alignment: Qt.AlignHCenter
Layout.fillHeight: true
Rectangle {
id: rec1
width: 30; height: 30
Layout.alignment: Qt.AlignVCenter
color: "darkslateblue"
}
Label {
text: qsTr("Heading 1")
font.pixelSize: 25
verticalAlignment: Text.AlignVCenter
}
}
Rectangle {
id: rec2
Layout.fillWidth: true
Layout.fillHeight: true
color: "bisque"
}
Rectangle {
id: rec3
Layout.fillWidth: true
Layout.fillHeight: true
color: "bisque"
}
}
}
Right now I'm getting something like this:
One possible option is to use an Item as a RowLayout container:
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.5
ApplicationWindow {
visible: true
width: 640
height: 480
ColumnLayout {
anchors.fill: parent
anchors.margins: 30
Item{
Layout.fillWidth: true
Layout.fillHeight: true
RowLayout {
Layout.alignment: Qt.AlignHCenter
anchors.fill: parent
Rectangle {
id: rec1
width: 30; height: 30
Layout.alignment: Qt.AlignVCenter
color: "darkslateblue"
}
Label {
text: qsTr("Heading 1")
font.pixelSize: 25
verticalAlignment: Text.AlignVCenter
}
}
}
Rectangle {
id: rec2
Layout.fillWidth: true
Layout.fillHeight: true
color: "bisque"
}
Rectangle {
id: rec3
Layout.fillWidth: true
Layout.fillHeight: true
color: "bisque"
}
}
}
What i want to do here is to prevent the tab and enter to jump the focus to a specific control but go to the next.
So for example lets say i have 3 sequencial TextField
i'm focused on the first TextField now i press tab and instead of jumping to the second TextField the focus goes to the third TextField.
A full code example:
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
ApplicationWindow {
id: window
title: "Stack"
visible: true
width: 1400
Page {
id: page
anchors.fill: parent
property int responsiveWidth: 1000
property int maximumWidth: 900
ScrollView {
id:configScroll
anchors.fill: parent
function scrollToY(y) {
configScroll.flickableItem.contentY = y-30
}
GridLayout {
columns: 2
Keys.onPressed: {
if(event.key==Qt.Key_Return)
for (var i = 0; i < children.length; ++i)
if (children[i].focus) {
children[i].nextItemInFocusChain().forceActiveFocus()
break
}
}
width: page.width > page.responsiveWidth ? page.maximumWidth : page.width
anchors.top: parent.top
anchors.left: parent.left
anchors.leftMargin: page.width > page.responsiveWidth ? (page.width - childrenRect.width)/2 : 10
anchors.rightMargin: page.width > page.responsiveWidth ? 0 : 10
Label {
text: "Company Name"
color: "red"
Layout.fillWidth: true
}
TextField {
objectName: "company_name"
font.bold: true
Layout.fillWidth: true
Layout.rightMargin: 10
onFocusChanged: if(focus) { configScroll.scrollToY(y); }
}
Label {
text: "tab or enter passes this TextField"
color: "red"
Layout.fillWidth: true
}
TextField {
objectName: "company_name2"
font.bold: true
Layout.fillWidth: true
Layout.rightMargin: 10
onFocusChanged: if(focus) { configScroll.scrollToY(y); }
}
Label {
text: "label"
color: "red"
Layout.fillWidth: true
}
TextField {
objectName: "company_name"
font.bold: true
Layout.fillWidth: true
Layout.rightMargin: 10
onFocusChanged: if(focus) { configScroll.scrollToY(y); }
}
}
}
}
}
You can use the QML Type KeyNavigation to setup custom navigation, take a look at the documentation: KeyNavigation QML Type
You can set the KeyNavigation.tab property to navigate to a specific id like this:
TextField {
id: field1
objectName: "company_name"
font.bold: true
Layout.fillWidth: true
Layout.rightMargin: 10
onFocusChanged: if(focus) { configScroll.scrollToY(y); }
KeyNavigation.tab: field3
}
For navigation with enter-key here is a solution for this specific situation:
children[i].nextItemInFocusChain().nextItemInFocusChain().forceActiveFocus()
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}
}
One fix that works is setting the preferredWidth property of the TextField:
MediumText { text: "Username: ";Layout.fillWidth:true;Layout.preferredWidth: parent.width/2}
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() }
}
}
}