How can I change the size of a Button icon?
If i set icon.height and icon.width it gives me this error:
QML IconLabel: Binding loop detected for property "icon"
Button {
Layout.preferredHeight: parent.height * 0.2
Layout.preferredWidth: parent.width
Layout.row: 4
Layout.column: 0
Layout.columnSpan: 3
icon.source: "qrc:/media/dazn.png"
icon.height: height
icon.width: width
}
You should indeed not bind to height and width, since these properties are indirectly calculated from the icon size plus the padding, leading to the mentioned binding loop. Not sure about your exact intentions, but you could bind to Layout.preferredHeight and Layout.preferredWidth
Button {
Layout.preferredHeight: parent.height * 0.2
Layout.preferredWidth: parent.width
Layout.row: 4
Layout.column: 0
Layout.columnSpan: 3
icon.source: "qrc:/media/dazn.png"
icon.height: Layout.preferredHeight
icon.width: Layout.preferredWidth
}
It seems the icon is still constrained by some limits (inside IconLabel), however it will get as big as allowed.
Related
I have a QtQuick Controls 1.3 SplitView(as I am on QT 5.11), which contains 3 rectangles in vertical orientation. It displays fine, and I can drag-resize the childs as intended.
Now I want to add a button which allows the user to completely hide the bottom most rectangle, effectively collapsing it. However, nothing I am trying to resize the rect works:
import QtQuick.Controls 1.3 as C1
[...]
C1.SplitView {
id: splitView
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.left: parent.left
width: parent.width - flightSelector.width - separator.width
orientation: Qt.Vertical
LateralChart {
id: lateralChart
width: parent.width
height: mainPage.height * 0.75
Layout.minimumHeight: 30
Layout.maximumHeight: mainPage.height - 30 - 30
}
UtilityBar {
id: utilityBar
Layout.minimumHeight: 30
Layout.maximumHeight: 30
onCollapse: {
console.log("minimize")
flightList.height = 0 // no effect
flightList.preferredHeight = 0 // no effect
flightlist.Layout.maximumHeight = 0 // no effect
flightList.shouldCollapse = true // no effect
}
}
FlightListTable {
id: flightList
width: parent.width
Layout.minimumHeight: 0
Layout.maximumHeight: mainPage.height - 60 - 30
model: flightListFilterModel
property bool shouldCollapse: false
C1.SplitView.preferredHeight: shouldCollapse ? 0 : 300
}
}
[...]
If I just go flightList.visible = false, then the rect will be hidden, but the position of the middle rect remains, so it is positioned wrong (it should move to the bottom).
How can I resize SplitView child contents dynamically via JS code?
According to the docs, there must always be one (and only one) child object that has Layout.fillheight set to true. By default, it will choose the last visible child in the SplitView. In your case, it sounds like you want that to actually be the first child. So adding Layout.fillHeight: true to your LateralChart should give you the desired output.
I am posting because I want a text the be wrap into a rectangle (if the text is too long, it will be cut and the end of it won't be display)
For now I tried with :
Rectangle {
id: form
property alias px: form.x
property alias py: form.y
property alias pheight: form.height
property alias pwidth: form.width
property ItemControl itemControl
color: itemControl.backgroundColor
border.width: 1
border.color: itemControl.color
radius: 1
Text {
id: text_field
height: parent.height
width: parent.width
anchors.centerIn: parent
text:itemControl.text
color: itemControl.color
font.pixelSize: 16
font.family: robotoMono.name
font.bold: false
wrapMode: text_field.WordWrap
maximumLineCount: 1
}
}
But I don't have the expected result. The text is still continuing after the end of the rectangle. Does anyone knows how to compel the text into the rectangle ?
You used Text.WordWrap but the text only contains one word (the . and underscores aren't treated as word separators). Text.Wrap and Text.WrapAnywhere may be more appropriate in this case. Moreover, maximumLineCount: 1 will limit Text to only show one line.
Consider making the font smaller, the rectangle larger, or redesign the UI for this bit.
I am developing a UI where I have made two buttons and two labeltextfield. The problem is that the alignment I cant do of the inner item in rowlayout. And the buttons are also not anchored to the base of the textfield. I have already set the anchor.bottom to textfield.bottom.
I set the Layout.Alignment = Qt.AlignBottom but isnt working
GroupBox{
id: gb
RowLayout{
id:rl
Button{
id: btn1
text:"Btn1"
Layout.preferredHeight: 30
Layout.preferredWidth: 150
anchors.bottom: tlfield.bottom
}
Button{
id: btn2
text:"Btn2"
Layout.preferredHeight: 30
Layout.preferredWidth: 150
anchors.bottom: tlfield.bottom
}
LabeledTextFieldVertical
{
id: tlfield
fieldLabel.text: "text"
fieldText.text: check
fieldText.maximumLength: 15
Layout.preferredWidth: 130
fieldText.height:30
Layout.alignment: Qt.AlignBottom
shouldFillWidth: false
}
}
}
Layouts and anchoring items are two different mechanisms, see Qt Quick Layouts and Positioning with Anchors for further reading.
Hello everyone! :)
I am developing a Qt Quick Controls 2 application, and I need to scale down an SVG image that is a part of a ColumnLayout to fit the screen height. Here is my code:
Page {
title: "About"
ColumnLayout {
anchors.fill: parent
spacing: 20
Image {
id: app_logo
source: "images/app_logo.svg"
mipmap: true
Layout.maximumWidth: Math.min(parent.width, 300)
Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
verticalAlignment: Qt.AlignTop
fillMode: Image.PreserveAspectFit
}
Label {
text: "Version 0.1"
font.pointSize: 15
Layout.fillWidth: true
horizontalAlignment: Qt.AlignHCenter
}
}
}
The original SVG size is 1200x500, and the resulting painted image is 300x125, which is also displayed by paintedWidth and paintedHeight properties. The problem I face is that SVG's canvas is not changed, remaining 1200x500, which moves other controls (e.g. the label) out of the screen:
How do I set the canvas size to the actual painted size not causing a binding loop?
When using SVG images in Qt Quick, change their sourceSize to match their item size:
Image {
id: app_logo
source: "images/app_logo.svg"
mipmap: true
Layout.maximumWidth: Math.min(parent.width, 300)
Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
verticalAlignment: Qt.AlignTop
sourceSize: Qt.size(width, height) //important
}
The highlighted line changes canvas (rendering) size.
According to paintedHeight documentation:
When using an Image.PreserveAspectFit or an Image.PreserveAspectCrop paintedWidth or paintedHeight can be smaller or larger than width and height of the Image item.
The paintedHeight is 125 because fillMode: Image.PreserveAspectFit is set. However the height of image is not set and it remains to 500 pixels by default. To assign correct height without causing a binding loop, you can set Layout.preferredHeight property and calculate PreserveAspectFit by yourself:
Image {
id: app_logo
source: "images/app_logo.svg"
mipmap: true
Layout.maximumWidth: Math.min(parent.width, 300)
Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
verticalAlignment: Qt.AlignTop
//PreserveAspectFit
Layout.preferredHeight: (width / sourceSize.width) * sourceSize.height
}
I'd like to create my own styled RadioButton, but I'm having difficulty controlling the size of the components used in the RadioButtonStyle that I am using. I want to put my RadioButton in a GridLayout and have the RadioButton take up all the available space (as if I were setting Layout.fillWidth and Layout.fillHeight to true)
To start off with, I am using the RadioButtonStyle code from the Qt docs inside a GridLayout:
GridLayout {
columns: 3
anchors.fill: parent
RadioButton {
text: "Radio Button"
style: RadioButtonStyle {
indicator: Rectangle {
implicitWidth: 16
implicitHeight: 16
Rectangle {
anchors.fill: parent
visible: control.checked
color: "#555"
}
}
}
}
}
we can see that implicitWidth and implicitHeight of the indicator Rectangle are set int literals. I want to size the indicator Rectangle to fill the space provided by the layout.
I would like the width and height of the indicator Rectangle to track the width and height of the RadioButton, which in turn tracks the width and height of the GridLayout cell containing it.
== UPDATE ==
I have tried the following - setting Layout.maximumHeight/Width prevents Qml going into some kind of infinite loop
RadioButton {
id: rdbt
Layout.fillHeight: true
Layout.fillWidth: true
Layout.maximumWidth: 200
Layout.maximumHeight: 200
style: RadioButtonStyle {
id: ab
indicator: Rectangle {
color: "blue"
height: control.height
width: control.width //control.width