I try to use QML ProgressBar.
Here is the documentation
https://doc.qt.io/qt-5/qml-qtquick-controls-styles-progressbarstyle.html#details
I try this code
import QtQuick 2.14
import QtQuick.Controls 2.15
import QtQuick.Window 2.14
import QtQuick.Controls.Styles 1.4
Window {
id: root
width: 300; height: 300
ProgressBar {
value: 0.5
style: ProgressBarStyle {
background: Rectangle {
radius: 2
color: "lightgray"
border.color: "gray"
border.width: 1
implicitWidth: 200
implicitHeight: 24
}
progress: Rectangle {
color: "lightsteelblue"
border.color: "steelblue"
}
}
}
}
But I have the error invalid property name "style". What i doing wrong?
You're mixing the styling from Qt Quick Controls 1 with Qt Quick Controls 2. To customise a ProgressBar in Qt Quick Controls 2, see this page:
import QtQuick 2.12
import QtQuick.Controls 2.12
ProgressBar {
id: control
value: 0.5
padding: 2
background: Rectangle {
implicitWidth: 200
implicitHeight: 6
color: "#e6e6e6"
radius: 3
}
contentItem: Item {
implicitWidth: 200
implicitHeight: 4
Rectangle {
width: control.visualPosition * parent.width
height: parent.height
radius: 2
color: "#17a81a"
}
}
}
import QtQuick.Controls 2.15
...
import QtQuick.Controls.Styles 1.4
You are using two different versions of QtQuick here, ie. you have imported ProgressBar from QtQuick.Controls 2.15 which does not have a style property (https://doc.qt.io/qt-5/qml-qtquick-controls2-progressbar.html).
More information about differences can be found here:
https://doc.qt.io/qt-5/qtquickcontrols2-differences.html
Related
Conical gradient is not there in Qt6 and hence i want a circular progress bar just like the code. But i am unable to use Conical Gradient because import QtGraphicalEffects 1.15 is scrapped in Qt6
This is my code is there another alternative for Conical Gradient
Main .qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Controls.Styles 1.4
import QtGraphicalEffects 1.0
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
Custom_Temp{
anchors.centerIn: parent
from_value: 0
to_value: 100
range_1: 35
range_2: 50
range_3: 80
unit: "°"
vlaue: 60
}
}
Custom_temp.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Controls.Styles 1.4
import QtGraphicalEffects 1.15
Item {
property int from_value
property int to_value
property int range_1
property int range_2
property int range_3
property alias vlaue: main_progress_bar.value
property string unit
ProgressBar{
anchors.centerIn: parent
id:main_progress_bar
from: from_value
to: to_value
property string actual_color: value >= range_2 ? "red": value >= range_1? "#ffe208" : "green"
background: Rectangle {
implicitWidth: 100
implicitHeight: 6
color: "transparent"
radius: 3
}
contentItem:
Rectangle{
color: "transparent"
implicitWidth: 100
implicitHeight: implicitWidth
Rectangle
{
id: outerRing
z: 10
anchors.fill: parent
radius: Math.max(width, height) / 2
color: "transparent"
border.color: "gray"
border.width: 16
}
Rectangle
{
id: innerRing
z: 10
anchors.fill: parent
anchors.margins: (outerRing.border.width - border.width) / 2
radius: outerRing.radius
color: "transparent"
border.color: "darkgray"
border.width: 8
ConicalGradient
{
source: innerRing
anchors.fill: parent
gradient: Gradient
{
GradientStop { position: 0.00; color: main_progress_bar.actual_color }
GradientStop { position: main_progress_bar.value/100; color: main_progress_bar.actual_color }
GradientStop { position: (main_progress_bar.value/100) + 0.01; color: "transparent" }
GradientStop { position: 1.00; color: "transparent" }
}
}
}
Label
{
id: progressLabel
anchors.centerIn: parent
color: main_progress_bar.value >= range_2? "red": main_progress_bar.value >= range_1? "#ffe208" : "green"
text: (main_progress_bar.value.toFixed(1)) + "°"
font.pixelSize: 20
}
}
}
}
is there an alternative for conicalGradient in Qt6?
There is a ConicalGradient in Qt6, but you have to use:
import Qt5Compat.GraphicalEffects
This is my Box.qml
I want to use this Box as customized QML Component.
import QtQuick 2.5
Rectangle{
id: sample
width: 100
height: 35
border.color: "Black"
color: "#778899"
Text{
font.pointSize: 10
font.bold: true
anchors.centerIn: parent
}
}
This is my main.qml
import QtQuick 2.5
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("Repeater")
Box{
text: "Number"
}
}
But this is not working
I am getting Following Error
qrc:/main.qml:11 Cannot assign to non-existent property "text"
You have to expose that property through property.
Box.qml
import QtQuick 2.5
Rectangle{
property string mytext
id: sample
width: 100
height: 35
border.color: "Black"
color: "#778899"
Text {
font.pointSize: 10
font.bold: true
anchors.centerIn: parent
text: mytext
}
}
main.qml
import QtQuick 2.5
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("Repeater")
Box{
mytext: "Number"
}
}
Or use alias:
Box.qml
import QtQuick 2.5
Rectangle{
property alias text: txt.text
id: sample
width: 100
height: 35
border.color: "Black"
color: "#778899"
Text {
id: txt
font.pointSize: 10
font.bold: true
anchors.centerIn: parent
}
}
main.qml
import QtQuick 2.5
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("Repeater")
Box{
text: "Number"
}
}
I'm trying to create a basic layout for my application. I want it to look like this . This is my set up so far.
main.qml
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("basic layout")
ColumnLayout {
anchors.fill: parent
spacing: 0
Header {
Layout.fillWidth: true
height: 50
}
Body {
Layout.fillWidth: true
Layout.fillHeight: true
}
Footer {
Layout.fillWidth: true
height: 30
}
}
}
Header.qml
import QtQuick 2.7
import QtQuick.Layouts 1.3
Rectangle {
color: "red"
}
Footer.qml
import QtQuick 2.7
import QtQuick.Layouts 1.3
Rectangle {
color: "blue"
}
Body.qml
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
Item {
RowLayout {
anchors.fill: parent
Rectangle {
color: "red"
width: 100
Layout.fillHeight: true
}
Rectangle {
color: "green"
width: 400
Layout.fillHeight: true
}
Rectangle {
color: "blue"
width: 400
Layout.fillHeight: true
}
Rectangle {
color: "black"
Layout.fillWidth: true
Layout.fillHeight: true
}
}
}
When it's ran In the, the Body section I get is nothing but white space. Rectangles are visible when i give them a size manually. I tried adding anchors.fill: parent to Item level in Body.qml. Still result is the same. What am i doing wrong?
You have to set rectangle's width in the RowLayout using
Layout.preferredWidth: 400
instead of
width: 400
I have a problem using the style property to change the text color of a scrollable TextArea.
I also added the included modules from the .pro file:
QT += qml quick core quickcontrols2
This is what my .qml file looks like:
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.1
import QtQuick.Controls.Material 2.0
import QtGraphicalEffects 1.0
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Test")
Page {
width: parent.width
height: parent.height
background: Rectangle {
color: "#000000"
width: parent.width
height: parent.height
}
Flickable {
id: flickable
anchors.bottom: parent.bottom
width: parent.width-50
flickableDirection: Flickable.VerticalFlick
height: 200
TextArea.flickable: TextArea {
id: pane1
text: "This is some text"
font.bold: false
font.pointSize: 10
wrapMode: Text.WordWrap
clip: true
style: TextAreaStyle {
textColor: "#4F4F4F"
}
background: Rectangle {
color: "#FFFFFF"
width: parent.width
height: parent.height
}
}
ScrollBar.vertical: ScrollBar { }
}
}
}
The Error message I get when running this example:
QQmlApplicationEngine failed to load component
qrc:/main.qml:38 Cannot assign to non-existent property "style"
I guess I am missing some dependency, but couldn't find anything in the documentation pointing me into the right direction.
Posting #BaCaRoZzo's comment as a community answer.
style property is not available in controls 2. Styling is inlined in the control. See here.
You can also remove import QtQuick.Controls.Styles 1.4 since it is necessary to styling controls 1.x, which you didn't import.
I am trying to use topMargin in ColumnLayout. but i am facing some issues.
Could some one help me out of this.
Here is my code
import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
import QtQuick.Layouts 1.1
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle{
anchors.fill: parent
ColumnLayout{
id: columlayout
Rectangle{
width: 100
height: 100
color: "red"
}
Rectangle{
Layout.topMargin: 50
width: 100
height: 100
color: "green"
}
Rectangle{
width: 100
height: 100
color: "blue"
}
}
}
}
Issue:
Cannot assign to non-existent property "topMargin"
The margin properties were introduced in QtQuick.Layouts 1.2, so you must import that version, not 1.1.