Simple QML Progress Bar/bg: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
(Add "cleanup" tag)
(Convert ExpressionEngine links)
Line 14: Line 14:
[[Image:http://gallery.theharmers.co.uk/upload/2011/04/30/20110430152206-b395a64a.png|Simple progress bar]]
[[Image:http://gallery.theharmers.co.uk/upload/2011/04/30/20110430152206-b395a64a.png|Simple progress bar]]


Този прогрес бар се използва заедно с "BusyIndicator":http://developer.qt.nokia.com/wiki/Busy_Indicator_for_QML в QML компонента '''ProgressSpinner''', за да се получи приятен елемент, който може да показва активността и прогреса на дълги операции.
Този прогрес бар се използва заедно с [http://developer.qt.nokia.com/wiki/Busy_Indicator_for_QML BusyIndicator] в QML компонента '''ProgressSpinner''', за да се получи приятен елемент, който може да показва активността и прогреса на дълги операции.


Реализация (SimpleProgressBar.qml):
Реализация (SimpleProgressBar.qml):

Revision as of 15:42, 4 March 2015

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.

Български English

Прост прогрес бар

Този много прост QML прогрес бар бе вдъхновен от примера, който идва с Qt. Направен е така, че да е много опростен и лек и да е подходящ дори за много малки размери. Ето така изглежда по подразбиране (със зеленият цвят на Qt ;-) )

Simple progress bar

Този прогрес бар се използва заедно с 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
}

}