I created a slider in an item and customized it like in the following code :
Item {
id: item1
x: 0
y: 0
width: 200
height: parent.height
Rectangle {
id: background
anchors.fill: parent;
color:Qt.rgba(0.9,0.9,0.9,1);
}
Slider {
anchors.centerIn: parent
orientation: Qt.Vertical
height: parent.height
style: SliderStyle {
groove: Rectangle {
implicitWidth: 200
implicitHeight: 8
color: "gray"
radius: 8
}
handle: Rectangle {
anchors.centerIn: parent
color: control.pressed ? "white" : "lightgray"
border.color: "gray"
border.width: 2
width: 20
height: 20
radius: 6
}
}
}
}
The problem appears when I change the size of the handle to have it wider than high, so I change in the handle :
width: 20
height: 80 //the height is changed instead of width but I think
//it's because it is a vertical slider
And then, when I move the handle, it doesn't stay under the mouse cursor but there is an offset between the two.
How to fix that?
The slider is internally rotated 90 degrees when the orientation is vertical, so you'll need to set the width instead of the height. In other words, always style the handle assuming that the slider is horizontal, and the rest will just work...
... except for the mouse offset bug that you just ran into. It appears that your use case isn't auto-tested. Please submit a bug report at bugreports.qt.io.
Related
I want to change the scrollbar handle color, and follow the Qt doc
https://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-scrollbar
here is my code.
ScrollView {
id: view
anchors.top: parent.top
anchors.left: parent.left
contentHeight: 300
contentWidth: view.width
width: 200
height: 200
focus: true
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
Label {
text: "ABC"
font.pixelSize: 224
}
background: Rectangle{
color:"pink"
}
ScrollBar.vertical: ScrollBar {
parent: view
id: control
active: true
contentItem: Rectangle {
implicitWidth: 6
implicitHeight: 100
radius: width / 2
color: control.pressed ? "#81e889" : "#c2f4c6"
}
}
}
enter image description here
this result the handle will fill with scrollbar.
how to changed handle color and do not fill scrollbar?
here is update.
Try to setting implicitHeight to view.contentHeight
ScrollBar.vertical: ScrollBar {
parent: view
id: control
active: true
contentItem: Rectangle {
implicitWidth: 6
implicitHeight: view.contentHeight
radius: width / 2
color: control.pressed ? "#81e889" : "#c2f4c6"
}
}
here is result
It is have same problem，it's change the whole ScrollBar, not handle.
I want to pass the colorModelData for rectangle shown below.
Requirement is: on click of button i want to open a popup. And inside popup want to display multiple number of circles with different colors. Using button can i create a popup which will give me list of colors? ALso list of color should be exposed from outside.
How can i do it?
Rectangle {
id: control
property var colorModelData: ["Red", "Green", "Blue"]
Button{
id: btn
width: 100
height: 100
onClicked: {
rect.visible = true
}
}
Rectangle{
id: rect
visible: false
width: 400
height: 300
color: "gray"
anchors.top: btn.bottom
GridView{
width: rect.width
height: rect.height
model: colorModelData
delegate: Column{
Rectangle {
width: 20
height: 20
radius: width/2
//color: colorModelData [..... getting error]
}
}
}
}
}
I tested your code and it works for me. So I assume the only part you're missing is the line you have commented out. Use this:
color: colorModelData[index]
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'm trying to understand the functionality of Behavior by animating a small Rectangle when it's property changes.
Consider the following example:
import QtQuick 2.4
import QtQuick.Controls 1.2
Item {
width: 600
height: 80
Rectangle {
id: rect
color: "red"
width: 20
height: 20
property int xval: 0
Behavior on xval {
NumberAnimation {
target: rect
property: "x"
to: rect.xval
duration: 2000
easing.type: Easing.InOutQuad
}
}
}
Button {
anchors.bottom: parent.bottom
onClicked: { rect.xval=250 }
}
}
Here I'm trying to animate the x property of the Item rect on Button Click. But it doesnot animate. Now if you replace
to: rect.xval
with
to: 400
The Rectangle animates as expected on Button Click. All I want to do is to animate the Rectangle using the value set by the user. Am I missing something ?
You don't need a extra property to animate a property.
Behavior on foo will animate foo whenever it changes its value and make it the implicit property of inner Animations.
Your code can simply be
Item {
width: 600
height: 80
Rectangle {
id: rect
color: "red"
width: 20
height: 20
Behavior on x {
NumberAnimation {
duration: 2000
easing.type: Easing.InOutQuad
}
}
}
Button {
anchors.bottom: parent.bottom
onClicked: { rect.x=250 }
}
}
I'm trying to define a property with a default value in a reuseable QML component. Here's my code thus far:
property alias value: progressBar.value
property bool error: false
property ProgressBarStyle errorStyle: ProgressBarStyle {
background: Rectangle {
radius: 2
color: "lightgray"
border.color: "gray"
border.width: 1
implicitWidth: 200
implicitHeight: 24
}
progress: Rectangle {
color: "orangered"
border.color: "red"
}
}
Layout.fillWidth: true
ProgressBar {
id: progressBar
Layout.fillWidth: true
minimumValue: 0.0
maximumValue: 100.0
style: errorStyle
}
So the idea is errorStyle is constructed and set as the style of progressBar. I know that errorStyle works, because if I set it directly on progressBar it works. From what I can tell, the problem is errorStyle is null when I run my program.
UPDATE:
Maybe a better way of stating this question is: "How do I get around the 'PropertyChanges does not support creating state-specific objects.' error message that I get if I create the style directly in the PropertyChanges array?
UPDATE 2:
I"ve basically given up on this approach and decided to try and using styling instead. This has lead to another question: Cannot create certain QML types in a singleton
You can try declaring it with an id, and use the id. So dont declary it as a property but just like a component. Like this:
ProgressBarStyle {
id: errorStyle
background: Rectangle {
radius: 2
color: "lightgray"
border.color: "gray"
border.width: 1
implicitWidth: 200
implicitHeight: 24
}
progress: Rectangle {
color: "orangered"
border.color: "red"
}
}
ProgressBar {
id: progressBar
Layout.fillWidth: true
minimumValue: 0.0
maximumValue: 100.0
style: errorStyle
}
But the approach i would take would be the make a property color and bordercolor and change the rectangle color of the style instead of changing the style completely.
Like this:
property Color barColor
property Color barBorderColor
property Color progressColor
property Color progressBorderColor
ProgressBar {
id: progressBar
Layout.fillWidth: true
minimumValue: 0.0
maximumValue: 100.0
style: ProgressBarStyle {
background: Rectangle {
radius: 2
color: barColor
border.color: barBorderColor
border.width: 1
implicitWidth: 200
implicitHeight: 24
}
progress: Rectangle {
color: progressColor
border.color: progressBorderColor
}
}
}