Simple QML Progress Bar/bg: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
(Sub-categorize) |
||
(5 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
{{Cleanup | reason=Auto-imported from ExpressionEngine.}} | |||
{{LangSwitch}} | |||
[[Category:Snippets::QML]] | |||
[[Category:HowTo]] | |||
[[Category:Developing with Qt::Qt Quick::QML]] | |||
[[Category:Bulgarian]] | |||
= Прост прогрес бар = | |||
Този много прост QML прогрес бар бе вдъхновен от примера, който идва с Qt. Направен е така, че да е много опростен и лек и да е подходящ дори за много малки размери. Ето така изглежда по подразбиране (със зеленият цвят на Qt ;-) ) | |||
[[Image:http://gallery.theharmers.co.uk/upload/2011/04/30/20110430152206-b395a64a.png|Simple progress bar]] | |||
Този прогрес бар се използва заедно с [http://developer.qt.nokia.com/wiki/Busy_Indicator_for_QML BusyIndicator] в QML компонента '''ProgressSpinner''', за да се получи приятен елемент, който може да показва активността и прогреса на дълги операции. | |||
Реализация (SimpleProgressBar.qml): | |||
<code> | |||
import QtQuick 1.0 | |||
Item { | |||
id: progressbar | |||
property int minimum: 0 | |||
property int maximum: 100 | |||
property int value: 0 | |||
property color color: "#77B753" | |||
width: 250; height: 23 | |||
clip: true | |||
Rectangle { | |||
id: border | |||
anchors.fill: parent | |||
anchors.bottomMargin: 1 | |||
anchors.rightMargin: 1 | |||
color: "transparent" | |||
border.width: 1 | |||
border.color: parent.color | |||
} | |||
Rectangle { | |||
id: highlight | |||
property int widthDest: ( ( progressbar.width * ( value- minimum ) ) / ( maximum - minimum ) - 4 ) | |||
width: highlight.widthDest | |||
Behavior on width { | Behavior on width { | ||
SmoothedAnimation { | |||
velocity: 1200 | |||
} | |||
} | |||
anchors { | anchors { | ||
left: parent.left | |||
top: parent.top | |||
bottom: parent.bottom | |||
margins: 2 | |||
} | |||
color: parent.color | |||
} | |||
} | |||
</code> | |||
Употреба: | Употреба: | ||
<code> | <code> | ||
import QtQuick 1.0 | |||
Rectangle { | Rectangle { | ||
id: root | |||
width: 640 | |||
height: 360 | |||
SimpleProgressBar { | SimpleProgressBar { | ||
id: progress | |||
anchors.centerIn: progressSpinner | |||
width: 100 | |||
height: 12 | |||
color: progressSpinner.color | |||
value: 35 | |||
} | |||
} |
Latest revision as of 13:08, 28 November 2016
This article may require cleanup to meet the Qt Wiki's quality standards. Reason: Auto-imported from ExpressionEngine. Please improve this article if you can. Remove the {{cleanup}} tag and add this page to Updated pages list after it's clean. |
Прост прогрес бар
Този много прост QML прогрес бар бе вдъхновен от примера, който идва с Qt. Направен е така, че да е много опростен и лек и да е подходящ дори за много малки размери. Ето така изглежда по подразбиране (със зеленият цвят на Qt ;-) )
Този прогрес бар се използва заедно с BusyIndicator в QML компонента ProgressSpinner, за да се получи приятен елемент, който може да показва активността и прогреса на дълги операции.
Реализация (SimpleProgressBar.qml):
import QtQuick 1.0
Item {
id: progressbar
property int minimum: 0
property int maximum: 100
property int value: 0
property color color: "#77B753"
width: 250; height: 23
clip: true
Rectangle {
id: border
anchors.fill: parent
anchors.bottomMargin: 1
anchors.rightMargin: 1
color: "transparent"
border.width: 1
border.color: parent.color
}
Rectangle {
id: highlight
property int widthDest: ( ( progressbar.width * ( value- minimum ) ) / ( maximum - minimum ) - 4 )
width: highlight.widthDest
Behavior on width {
SmoothedAnimation {
velocity: 1200
}
}
anchors {
left: parent.left
top: parent.top
bottom: parent.bottom
margins: 2
}
color: parent.color
}
}
Употреба:
import QtQuick 1.0
Rectangle {
id: root
width: 640
height: 360
SimpleProgressBar {
id: progress
anchors.centerIn: progressSpinner
width: 100
height: 12
color: progressSpinner.color
value: 35
}
}