I am using QtQuick.Controls 1.0 and QtQuick.Controls.Styles 1.0 and I can't find a way to properly align the label of the ComboBox vertically and on the right.
This is my current code
import QtQuick 2.0
import QtQuick.Controls 1.0
import QtQuick.Controls.Styles 1.0
ComboBox {
id: comboCategories
width: 230
height: 30
style: ComboBoxStyle {
background: Rectangle {
id: rectCategory
width: comboCategories.width
height: comboCategories.height
color: "white"
}
label: Text {
anchors.verticalCenter: parent.verticalCenter
anchors.right: background.right
font.pointSize: 12
color: "#808080"
text: control.currentText
}
}
}
But the label stays in the top left of my element and does not seem to be affected by the anchors. I also tried to replace parent with control or background with no effect
I don't exactly know the reasoning behind this but if I wrap my Text element in an Item then I can properly
import QtQuick 2.0
import QtQuick.Controls 1.0
import QtQuick.Controls.Styles 1.0
ComboBox {
id: comboCategories
width: 230
height: 30
style: ComboBoxStyle {
background: Rectangle {
id: rectCategory
width: comboCategories.width
height: comboCategories.height
color: "white"
}
label: Item {
anchors.fill: parent
Text {
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: 5
font.pointSize: 12
color: "#808080"
text: control.currentText
}
}
}
Related
I am just trying to create 4 rectangles with 3 next to each other and 4th one is below the 3rd rectangle and my qml looks like below
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Rectangle")
Item{
anchors.centerIn: parent
Rectangle {
id: firstRect
width:50
height:50
color: "#ff0000"
}
Rectangle {
id: secondRect
width:firstRect.width
height: firstRect.height
color: "blue"
//opacity: 0.5
anchors.left: firstRect.right
}
Rectangle {
id: thirdRect
width:firstRect.width
height: firstRect.height
color: "green"
//opacity: 0.5
anchors.left: secondRect.right
}
Rectangle {
id: fourthrect
width:firstRect.width
height: firstRect.height
color: "green"
//opacity: 0.5
anchors.top: thirdRect.bottom
}
}
}
But i am getting the 4th rectangle below the first rectangle like below even though my anchor is thirdRect.Bottom what am i doing wrong
Nearly there, you're close. Just need to anchor it horizontally under the third rectangle.
Rectangle {
id: fourthrect
width:firstRect.width
height: firstRect.height
color: "green"
anchors.top: thirdRect.bottom
anchors.left: thirdRect.left // <-- this
}
Note that, assuming both the third and fourth rectangles have the same width, it's also possible to use anchors.right: thirdRect.right or anchors.horizontalCenter: thirdRect.horizontalCenter.
Setting anchors.top: thirdRect.bottom will only anchor the item vertically, but not horizontally.
When customizing a QtQuickControls2 SpinBox, I get this error in the console when closing my application :
"There are still \"2\" items in the process of being created at engine destruction."
The number varies depending on how many Spinboxes are in the windows, it goes up for every indicator that was customized (two times per customized SpinBox : one for the up indicator, one for the down indicator). I tried commenting out each part of my custom code, as well as using the example code provided here, so I am positive that this is where the error comes from.
Does anyone know how to get rid of this error ?
Main window code :
import QtQuick 2.7
import QtQuick.Controls 2.3
ApplicationWindow{
width: 1600
height: 900
visible: true
SpinBox_custom{
}
}
Custom SpinBox_custom code :
import QtQuick 2.11
import QtQuick.Controls 2.4
SpinBox {
id: control
value: 50
editable: true
contentItem: TextInput {
anchors.fill: parent
anchors.rightMargin : up.indicator.width
anchors.leftMargin : down.indicator.width
z: 2
text: control.textFromValue(control.value, control.locale)
font.pointSize: Style.textPointSize-2
color: '#7e8d9e'
selectionColor: '#7e8d9e'
selectedTextColor: "white"
horizontalAlignment: Qt.AlignHCenter
verticalAlignment: Qt.AlignVCenter
readOnly: !control.editable
validator: control.validator
inputMethodHints: Qt.ImhFormattedNumbersOnly
}
up.indicator: Rectangle {
x: control.mirrored ? 0 : parent.width - width
height: parent.height
implicitWidth: 20
implicitHeight: 30
color: control.up.pressed ? '#dee2e6' : '#bec6ce'
border.color: enabled ? '#bec6ce' : '#dee2e6'
Text {
text: "+"
font.pixelSize: control.font.pixelSize * 2
color: '#428AC9'
anchors.fill: parent
fontSizeMode: Text.Fit
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
}
down.indicator: Rectangle {
x: control.mirrored ? parent.width - width : 0
height: parent.height
implicitWidth: 20
implicitHeight: 30
color: control.down.pressed ? '#dee2e6' : '#bec6ce'
border.color: enabled ? '#bec6ce' : '#dee2e6'
Text {
text: "-"
font.pixelSize: control.font.pixelSize * 2
color: '#428AC9'
anchors.fill: parent
fontSizeMode: Text.Fit
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
}
background: Rectangle {
implicitWidth: 90
}
}
I've just faced the same problem and after some experiments seemed to find that it's somewhat connected to assigning literal values to the value property of SpinBox.
Something similar is also discussed in this report, and these are other things asking for trouble when used in SpinBox mentioned there:
references between internal elements of SpinBox (contentItem, background, [up,down].indicator's)
references to parent in internal elements
assigning id to internal elements
After getting rid of all of that and also changing value: 0 to value: from it automagically stopped warning me with the message in the original post.
Just as a reference, here's the snippet which works for me without the warning:
SpinBox
{
id: control
value: from
from: 0
to: 600
editable: true
enabled: true
leftPadding: topPadding
rightPadding: height
contentItem: Item
{
anchors.left: control.left
anchors.top: control.top
anchors.bottom: control.bottom
implicitWidth: input.implicitWidth
implicitHeight: input.implicitHeight
width: control.width - control.height
height: control.height
TextInput
{
id: input
anchors.fill: parent
text: control.textFromValue(control.value, control.locale)
color: "black"
horizontalAlignment: Qt.AlignHCenter
verticalAlignment: Qt.AlignVCenter
readOnly: !control.editable
validator: control.validator
inputMethodHints: Qt.ImhFormattedNumbersOnly
}
}
up.indicator: Rectangle
{
anchors.top: control.top
anchors.right: control.right
anchors.topMargin: 1
anchors.rightMargin: 1
height: control.height / 2
width: control.height
color: "gold"
}
down.indicator: Rectangle
{
anchors.bottom: control.bottom
anchors.right: control.right
anchors.bottomMargin: 1
anchors.rightMargin: 1
height: control.height / 2
width: control.height
color: "orange"
}
background: Rectangle
{
implicitWidth: 100
border.color: "red"
border.width: 1
radius: 2
}
}
I want a Rectangle to auto-size itself to fit exactly around its visual children. If there is no border, then the following works great:
Rectangle {
width: childrenRect.width+(border.width*2)
height: childrenRect.height+(border.width*2)
...
}
HOWEVER, if the Rectangle has a border, the children will overlap it. I tried unsuccessfully wrapping the children in a container (Column in the example below) and using anchor.margins to shift the container over to miss the Rectangle's borders.
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
ApplicationWindow {
visible: true
width: 600; height: 600
Rectangle {
id: rect
border.width : 20
border.color: "yellow"
clip: true
width: childrenRect.width+(border.width*2)
height: childrenRect.height+(border.width*2)
Column {
anchors.margins: rect.border.width // does not work
Text { height: 40; text: "FoooooooooooooooMumble" }
Text { height: 40; text: "Bar" }
Button { height: 40; text: "press me" }
}
}
}
Can someone suggest how to do this?
For anchors.margins to work, the border anchors must be set (the margin space is relative to those). For example:
Column {
anchors.margins: rect.border.width
anchors.left: rect.left
anchors.top: rect.top
...
}
I am trying to give a Tumbler my own style. I declare the Tumbler like this:
Tumbler {
style: MyTumblerStyle {}
height: UIConstants.smallFontSize * 10
width: UIConstants.smallFontSize * 3
TumblerColumn {
model: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]
}
}
where MyTymblerStyle is defined like this:
TumblerStyle {
id: root
visibleItemCount: 5
background: Rectangle {}
foreground: Item {}
frame: Item {}
highlight: Item {}
delegate: Item {
id: delRoot
implicitHeight: (control.height) / root.visibleItemCount
Item {
anchors.fill: parent
Text {
text: styleData.value
font.pixelSize: UIConstants.smallFontSize
font.family: UIConstants.robotoregular
anchors.centerIn: parent
scale: 1.0 + Math.max(0, 1 - Math.abs(styleData.displacement)) * 0.6
color: styleData.current?UIConstants.color:"black"
opacity: 1 - Math.abs(styleData.displacement/(root.visibleItemCount-3))
}
}
}
}
I use it in a Row like this:
Row {
MyTumbler {}
StandardText {
color: UIConstants.color
text: "Uhr"
}
}
Now, the result looks like this:
As you can see, the "Uhr" text center is aligned to the top of the Tumbler. Also the Row does not seem to recognize the real width of the Tumbler.
Why? It does work when I do not use MyTumblerStyle.
The problem isn't your style, it's the width assignment.
It helps to break out the Rectangles at a time like this:
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Extras 1.3
ApplicationWindow {
title: qsTr("Hello World")
width: 300
height: 600
visible: true
Column {
anchors.centerIn: parent
Tumbler {
id: tumbler
width: 30
TumblerColumn {
model: 25
}
Component.onCompleted: print(width, height, implicitWidth, implicitHeight)
}
Rectangle {
width: tumbler.implicitWidth
height: tumbler.implicitHeight
color: "transparent"
border.color: "blue"
Text {
text: "Tumbler implicit size"
anchors.fill: parent
wrapMode: Text.Wrap
}
}
Rectangle {
width: tumbler.width
height: tumbler.height
color: "transparent"
border.color: "blue"
Text {
text: "The size you gave"
anchors.fill: parent
wrapMode: Text.Wrap
}
}
}
}
(I don't have access to UIConstants, so I guess the width you set)
The implicitWidth of Tumbler is calculated based on the width of each individual TumblerColumn. This allows you to set individual widths for columns, something that is necessary for scenarios where some are wider than others, for example:
So, you should also set the width of your column, or, preferably, only set the width of your column, and not the entire Tumbler:
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Extras 1.3
ApplicationWindow {
width: 300
height: 600
visible: true
Row {
anchors.centerIn: parent
Tumbler {
id: tumbler
TumblerColumn {
model: 25
width: 30
}
}
Text {
text: "Uhr"
}
}
}
This also explains why the Text is weirdly positioned; the Row sees 30 pixels, but the column still has its original (much wider) width.
I know I should be using Row, Column etc. rather than items anchored by ID to make my code simpler and easier to read. But they refuse to work most of the time. For example, in this case:
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Layouts 1.1
ListView {
id: listView
anchors.fill: parent
topMargin: spacing
anchors.leftMargin: spacing
anchors.rightMargin: spacing
clip: true
spacing: 0.5 * pxPermm
model: SqlQueryModel {}
delegate: Rectangle {
id: delegateItem
color: "white"
height: 14 * pxPermm
width: listView.width
clip: true
Row {
id: row
anchors.fill: delegateItem
spacing: pxPermm
Image {
height: row.height
width: height
source: "qrc:/resources/ryba.jpg"
fillMode: Image.PreserveAspectCrop
}
Item {
id: textItem
height: row.height
Label {
anchors.left: textItem.left
anchors.top: textItem.top
text: nazov
font.bold: true
}
Label {
anchors.left: textItem.left
anchors.bottom: textItem.bottom
text: cas
}
}
}
}
}
This shows two Labels on the top of an Image in the delegate of list view. Not two labels to the right of the image, as you would expect. However, this code works:
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Layouts 1.1
ListView {
id: listView
anchors.fill: parent
topMargin: spacing
anchors.leftMargin: spacing
anchors.rightMargin: spacing
clip: true
spacing: 0.5 * pxPermm
model: SqlQueryModel {}
delegate: Rectangle {
id: delegateItem
color: "white"
height: 14 * pxPermm
width: listView.width
clip: true
Row {
id: row
anchors.fill: delegateItem
spacing: pxPermm
Image {
height: row.height
width: height
source: "qrc:/resources/ryba.jpg"
fillMode: Image.PreserveAspectCrop
}
Label {
text: nazov
font.bold: true
}
}
}
}
Of course I need to show more than one label in the delegate. What am I missing here?
It turns out that Item has zero width by default. The code works properly after the width is set:
Item {
id: textItem
height: row.height
width: childrenRect.width
// labels etc
}