I have the QML code below:
RowLayout {
anchors.fill: parent
spacing: 2
Rectangle {
Layout.alignment: Qt.AlignCenter
Layout.preferredWidth: 60
Layout.preferredHeight: 60
color: "red"
}
Rectangle {
Layout.alignment: Qt.AlignCenter
Layout.preferredWidth: 60
Layout.preferredHeight: 60
color: "green"
}
And I receive distribution like this:
But I would like to have another distribution:
How can I do this? Ideally without JS.
Thanks in advance!
It's not as nice as one would like to see, but this does the trick for me:
RowLayout {
anchors.fill: parent
spacing: 0
Item {
Layout.fillWidth: true
}
Rectangle {
Layout.preferredWidth: 60
Layout.preferredHeight: 60
color: "red"
}
Item {
Layout.fillWidth: true
}
Rectangle {
Layout.preferredWidth: 60
Layout.preferredHeight: 60
color: "green"
}
Item {
Layout.fillWidth: true
}
}
Related
Well, I've run into a problem with my StackView in Dialog. You can see it in this example.
Maybe I need to rewrite the animation?
Here is my code:
Dialog {
id: settingDialog
anchors.centerIn: parent
width: 350
height: parent.height / 1.1
closePolicy: Dialog.NoAutoClose
background: Rectangle {
color: "darkgrey"
border.color: "cyan"
radius: 5
}
ColumnLayout {
anchors.fill: parent
spacing: 5
ToolBar {
Layout.fillWidth: true
Layout.minimumHeight: 60
background: Rectangle { color: "transparent" }
RowLayout {
anchors.fill: parent
ToolButton {
id: tbBack
enabled: true
Layout.alignment: Qt.AlignHCenter
Layout.minimumWidth: 30
Layout.leftMargin: 10
background: Rectangle {
color: tbBack.hovered ? "darkcyan" : "transparent"
radius: parent.width
}
onClicked: stackViewSettings.pop()
}
Item { Layout.fillWidth: true }
ToolButton {
id: tbClose
Layout.alignment: Qt.AlignHCenter
Layout.minimumWidth: 30
Layout.rightMargin: 10
icon.source: "ADD YOUR ICO"
background: Rectangle {
color: tbClose.hovered ? "cyan" : "transparent"
radius: parent.width
}
onClicked: {
settingDialog.close()
stackViewSettings.pop()
}
}
}
}
//
StackView {
id: stackViewSettings
Layout.fillWidth: true
Layout.fillHeight: true
initialItem: Page {
background: Rectangle { color: noColor }
ColumnLayout {
anchors.fill: parent
spacing: 0
ListView {
id: listViewSettings
currentIndex: -1
interactive: false
spacing: 10
Layout.fillWidth: true
Layout.fillHeight: true
delegate: ItemDelegate {
height: 40
anchors {
left: parent.left
right: parent.right
}
highlighted: ListView.isCurrentItem
// Style of button
background: Rectangle {
color: parent.hovered ? "#555e69" : "transparent"
radius: 10
}
RowLayout {
anchors.fill: parent
spacing: 15
// Image
Rectangle {
color: noColor
Layout.minimumHeight: 30
Layout.minimumWidth: 30
Layout.leftMargin: 15
Layout.alignment: Qt.AlignRight
Image {
anchors.fill: parent
source: model.imageSource
}
}
// Text
Rectangle {
color: "transparent"
Layout.fillHeight: true
Layout.minimumWidth: 150
Layout.alignment: Qt.AlignLeft
Text {
anchors.verticalCenter: parent.verticalCenter
text: model.title
color: textColor
font.pixelSize: 16
}
}
}
onClicked: stackViewSettings.push(model.source)
}
model: ListModel {
ListElement { title: "Change profile"; imageSource: "ADD YOUR ICO"; source: "ADD YOUR PAGE" }
ListElement { title: "Language"; imageSource: "ADD YOUR ICO"; source: "ADD YOUR PAGE" }
}
}
}
}
}
}
}
Upd 1: I don't think I should use the stackview on dialog at all.
Upd 2: Just added clip: true in the StackView and It helped me.
Your problem is just a clipping issue. By default all QML objects have clip set to false, but you can turn it on to solve your problem:
StackView {
...
clip: true
}
Initially, I have four items with a specific size. Once a 5th item gets added, I would like to shrink the size of all items to make space inside the layout.
Window {
width: 640
height: 480
visible: true
id: root
Item {
id: col
width: 300
height: 200
anchors.centerIn: parent
RowLayout {
id: row
spacing: 10
anchors.centerIn: parent
Rectangle {
Layout.minimumWidth: 30
Layout.preferredWidth: 60
Layout.preferredHeight: 20
Layout.fillWidth: true
color: "red"
}
Rectangle {
Layout.minimumWidth: 30
Layout.preferredWidth: 60
Layout.preferredHeight: 20
color: "blue"
Layout.fillWidth: true
}
Rectangle {
Layout.minimumWidth: 30
Layout.preferredWidth: 60
Layout.preferredHeight: 20
color: "green"
Layout.fillWidth: true
}
Rectangle {
Layout.minimumWidth: 30
Layout.preferredWidth: 60
Layout.preferredHeight: 20
color: "green"
Layout.fillWidth: true
}
Rectangle {
Layout.minimumWidth: 30
Layout.preferredWidth: 60
Layout.preferredHeight: 20
color: "blue"
}
}
}
// for visualization
Rectangle {
width: col.width
height: col.height
x: col.x
y: col.y
color: "black"
opacity: 0.3
}
}
The items should have a size of 60 if there's space to fit all items, or scale down to 30 if there isn't. Any ideas how I would accomplish that?
You were almost there: Set Layout.maximumWidth instead of Layout.preferredWidth and make sure all the elements have Layout.fillWidth set to true. Also, the layout element itself must have the correct size for fillWidth to work. So replace centerIn with fill in this case.
Here is your snippet; corrected and rewritten to make it easier to try out different numbers of elements.
import QtQuick 2.14
import QtQuick.Layouts 1.14
import QtQuick.Controls 2.14
import QtQuick.Window 2.14
Window {
width: 640
height: 480
visible: true
id: root
Item {
id: col
width: 300
height: 200
anchors.centerIn: parent
RowLayout {
id: row
spacing: 10
anchors.fill: parent
Repeater {
model: spinBox.value
delegate: Rectangle {
Layout.minimumWidth: 30
Layout.maximumWidth: 60
Layout.preferredHeight: 20
Layout.fillWidth: true
color: ["red", "blue", "green", "green", "blue"][index % 5]
}
}
}
}
// for visualization
Rectangle {
width: col.width
height: col.height
x: col.x
y: col.y
color: "black"
opacity: 0.3
}
SpinBox {
id: spinBox
from: 1; to: 10
value: 5
}
}
Column {
id:column
spacing: 10
width: parent.width
Repeater{
model:5
Row {
leftPadding:17
topPadding:10
spacing: 10
Image {
id:img
height: 50
width: 50
source:"icon.png"
}
Text {
text:"User_name"
topPadding:12
}
Rectangle{
height: 40
width:40
color: "#333333"
Layout.alignment: Qt.AlignRight
}
}
}
}
I have Used Layout.alignment: Qt.AlignRight to show the rectangle to the right, But its not working. I don't understand why It is not working, I have also tried Layout.fillWidth: true inside an Item but still not working
As #Amfasis pointed out, Layout.alignment doesn't do anything unless you're using one of QML's layout types. Here's a working example using RowLayout/ColumnLayout:
ColumnLayout {
id:column
spacing: 10
width: parent.width
Repeater{
model:5
RowLayout {
Layout.leftMargin: 17
Layout.topMargin: 10
spacing: 10
Image {
id:img
source:"icon.png"
Layout.preferredWidth: 50
Layout.preferredHeight: 50
}
Text {
text:"User_name"
topPadding:12
Layout.fillWidth: true
}
Rectangle{
color: "#333333"
Layout.preferredHeight: 40
Layout.preferredWidth: 40
Layout.alignment: Qt.AlignRight
}
}
}
}
I am making UI for a game. When I tried to put margin for the image tab.png
It doesn't reflect any changes to it. It stays where it was before. I also tried to solve this problem by adding the margins through the Layout and by adding it outside the rectangle and row layout but nothing happened.
Also when I am adding margin to the bottom to the user.png to shift it a bit upward, it isn't shifting. So please help me out to solve this. I want to position the tab.png as this layout
The second circle is where I want to place the tab.png. The output of the code
Window {
visible: true
width: 800
height: 600
title: qsTr("Main screen")
ColumnLayout{
spacing: 0
anchors.fill: parent
Item {
id: titlebar
Layout.preferredHeight: 60
Layout.fillWidth: true
RowLayout {
anchors.fill: parent
spacing: 0
Rectangle {
Layout.fillWidth: true
Layout.fillHeight: true
color: "black"
Image {
source: "qrc:/img/tab.png"
anchors.leftMargin: undefined
Layout.leftMargin: 20
}
}
Rectangle {
Layout.preferredWidth: 100
Layout.fillHeight: true
color: "#f46b42"
/*Text {
anchors.centerIn: parent
text: "Actions"
}*/
Image{
id:image_user
source: "qrc:/img/user.png"
anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset:
anchors.left=parent.left
anchors.leftMargin: 10
clip: true
}
Item{
id:text_content
anchors.centerIn: parent
anchors.bottomMargin: 20
Text{
id:text_user
text: "User"
anchors.bottom:text_value.top
anchors.bottomMargin: 4
}
Text{
id:text_value
text:"$ 2000"
color:"yellow"
}}
}
}
}
Rectangle {
id: content
Layout.fillHeight: true
Layout.fillWidth: true
color: "lightyellow"
Text {
anchors.centerIn: parent
}
Column{
spacing: 1;
Repeater{
id:mmm
model: 5
Rectangle{
id:imgl
width: 100
height: 100
color: "#4286f4"
property string src: ""
MouseArea{
anchors.fill:parent
onClicked: {
parent.color="";
}
}
Image {
id: imgx
source: parent.src;
anchors.verticalCenter: parent.verticalCenter
}
onParentChanged: {
mmm.itemAt(0).src="qrc:/img/5by90.png";
mmm.itemAt(1).src="qrc:/img/6by42.png";
mmm.itemAt(2).src="qrc:/img/12by24.png";
mmm.itemAt(3).src="qrc:/img/fortune.png";
mmm.itemAt(4).src="qrc:/img/mini-roulette.png";
}
}
}
}
}
}
}
Layouts only affect your direct children, not the children of the children., so Layout.leftMargin: 20 will not affect Image as you see in this case.
The solution is really simple, it establishes the property x: 20 since the position of item is with respect to the parent's topleft position
Rectangle {
Layout.fillWidth: true
Layout.fillHeight: true
color: "black"
Image {
x:20
source: "qrc:/img/tab.png"
}
}
Inside Rectangle, for child elements, you need to use anchors.margin, whereas for Layouts child element can use Layout.margin.You need to use anchors.leftMargin: as Parent is Rectangle, Layout.margin will not have any effect.
Rectangle {
Layout.fillWidth: true
Layout.fillHeight: true
color: "black"
Image {
source: "qrc:/img/tab.png"
anchors.leftMargin: 20
}
}
I'm developing a mobile app with QML/QtQuick and Qt 5.9.x (Qt 5.10+ is not an option because it doesn't support iOS 8 and 9).
In my vertical layout I'd like to make Image be automatically resized to available height, but I can't figure out how to achieve this: it's always shown in full height. My QML file:
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
ApplicationWindow {
id: window
visible: true
// simulate iPhone 6
width: 375
height: 667
ColumnLayout {
anchors.fill: parent
spacing: 0
Text {
text: qsTr("multiline text multiline text multiline text multiline text")
textFormat: Text.PlainText
horizontalAlignment: Text.AlignHCenter
wrapMode: Text.WordWrap
font { weight: Font.Normal; pointSize: 18 }
Layout.fillWidth: true
Layout.topMargin: 20
}
Text {
text: qsTr("title1")
textFormat: Text.PlainText
font { weight: Font.DemiBold; pointSize: 50 }
Layout.alignment: Qt.AlignHCenter
Layout.topMargin: 30
}
Text {
text: qsTr("title2")
textFormat: Text.PlainText
font { weight: Font.DemiBold; pointSize: 25 }
Layout.alignment: Qt.AlignHCenter
}
Image {
source: "qrc:/Painting.jpg"
verticalAlignment: Image.AlignTop
fillMode: Image.PreserveAspectCrop
// Layout.preferredHeight: 200 // that's how I obtained the second screenshot, but using a constant is not an option of course
Layout.alignment: Qt.AlignHCenter
Layout.topMargin: 20
}
Text {
text: qsTr("multiline text multiline text multiline text multiline text")
textFormat: Text.PlainText
horizontalAlignment: Text.AlignHCenter
wrapMode: Text.WordWrap
font { weight: Font.Normal; pointSize: 17 }
Layout.fillWidth: true
Layout.topMargin: 20
}
GridLayout {
Layout.maximumWidth: 300
Layout.alignment: Qt.AlignHCenter
Layout.topMargin: 20
Layout.bottomMargin: 30
rows: 3
columns: 3
rowSpacing: 10
columnSpacing: 10
Rectangle {
color: "blue"
Layout.row: 0
Layout.column: 0
Layout.columnSpan: 3
Layout.fillWidth: true
Layout.preferredHeight: 25
}
Rectangle {
color: "blue"
Layout.row: 1
Layout.column: 0
Layout.fillWidth: true
Layout.preferredHeight: 25
}
Rectangle {
color: "blue"
Layout.row: 1
Layout.column: 1
Layout.columnSpan: 2
Layout.fillWidth: true
Layout.preferredHeight: 25
}
Rectangle {
color: "blue"
Layout.row: 2
Layout.column: 0
Layout.fillWidth: true
Layout.preferredHeight: 25
}
Rectangle {
color: "blue"
Layout.row: 2
Layout.column: 1
Layout.fillWidth: true
Layout.preferredHeight: 25
}
Rectangle {
color: "blue"
Layout.row: 2
Layout.column: 2
Layout.fillWidth: true
Layout.preferredHeight: 25
}
}
}
}
First image is how it's shown now, second one is how I want it to be: (screenshots are from desktop, but on mobile the result is the same)
I know how to achieve the desired behavior on iOS through AutoLayout (play with image's hugging priority and/or compression resistance), but I can't find anything similar in QML/QtQuick.
Using Layout.fillHeight will automatically resize the Image to the available height:
Image {
// ...
fillMode: Image.PreserveAspectCrop
Layout.fillHeight: true
}