Difference between revisions of "Simple QML Progress Bar/bg"

From Qt Wiki
Jump to: navigation, search
Line 1: Line 1:
 
'''Български''' [[Simple_QML_Progress_Bar|English]]
 
'''Български''' [[Simple_QML_Progress_Bar|English]]
  
[[Category:Snippets]]<br />[[Category:HowTo]]<br />[[Category:Developing_with_Qt::Qt Quick]]<br />[[Category:Developing_with_Qt::Qt Quick::QML]]
+
[[Category:Snippets]]
 +
[[Category:HowTo]]
 +
[[Category:Developing_with_Qt::Qt Quick]]
 +
[[Category:Developing_with_Qt::Qt Quick::QML]]
  
 
= Прост прогрес бар =
 
= Прост прогрес бар =
  
 
Този много прост QML прогрес бар бе вдъхновен от примера, който идва с Qt. Направен е така, че да е много опростен и лек и да е подходящ дори за много малки размери. Ето така изглежда по подразбиране (със зеленият цвят на Qt ;-) )
 
Този много прост QML прогрес бар бе вдъхновен от примера, който идва с Qt. Направен е така, че да е много опростен и лек и да е подходящ дори за много малки размери. Ето така изглежда по подразбиране (със зеленият цвят на Qt ;-) )
<br />[[Image:http://gallery.theharmers.co.uk/upload/2011/04/30/20110430152206-b395a64a.png|Simple progress bar]]
 
<br />Този прогрес бар се използва заедно с "BusyIndicator":http://developer.qt.nokia.com/wiki/Busy_Indicator_for_QML в QML компонента '''ProgressSpinner''', за да се получи приятен елемент, който може да показва активността и прогреса на дълги операции.
 
<br />Реализация (SimpleProgressBar.qml):<br /><code><br />import QtQuick 1.0
 
<br />Item {<br /> id: progressbar
 
<br /> property int minimum: 0<br /> property int maximum: 100<br /> property int value: 0<br /> property color color: "#77B753"
 
<br /> width: 250; height: 23<br /> clip: true
 
<br /> Rectangle {<br /> id: border<br /> anchors.fill: parent<br /> anchors.bottomMargin: 1<br /> anchors.rightMargin: 1<br /> color: "transparent"<br /> border.width: 1<br /> border.color: parent.color<br /> }
 
<br /> Rectangle {<br /> id: highlight<br /> property int widthDest: ( ( progressbar.width * ( value- minimum ) ) / ( maximum - minimum ) - 4 )<br /> width: highlight.widthDest
 
  
Behavior on width {<br /> SmoothedAnimation {<br /> velocity: 1200<br /> }<br /> }
+
[[Image:http://gallery.theharmers.co.uk/upload/2011/04/30/20110430152206-b395a64a.png|Simple progress bar]]
  
anchors {<br /> left: parent.left<br /> top: parent.top<br /> bottom: parent.bottom<br /> margins: 2<br /> }<br /> color: parent.color<br /> }<br />}<br /></code>
+
Този прогрес бар се използва заедно с "BusyIndicator":http://developer.qt.nokia.com/wiki/Busy_Indicator_for_QML в 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 {
 +
SmoothedAnimation {
 +
velocity: 1200
 +
}
 +
}
 +
 
 +
anchors {
 +
left: parent.left
 +
top: parent.top
 +
bottom: parent.bottom
 +
margins: 2
 +
}
 +
color: parent.color
 +
}
 +
}
 +
</code>
  
 
Употреба:
 
Употреба:
  
<code><br />import QtQuick 1.0
+
<code>
 +
import QtQuick 1.0
  
Rectangle {<br /> id: root<br /> width: 640<br /> height: 360
+
Rectangle {
 +
id: root
 +
width: 640
 +
height: 360
  
SimpleProgressBar {<br /> id: progress<br /> anchors.centerIn: progressSpinner<br /> width: 100<br /> height: 12<br /> color: progressSpinner.color<br /> value: 35<br /> }<br />}
+
SimpleProgressBar {
 +
id: progress
 +
anchors.centerIn: progressSpinner
 +
width: 100
 +
height: 12
 +
color: progressSpinner.color
 +
value: 35
 +
}
 +
}

Revision as of 12:15, 25 February 2015

Български English

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

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

Simple progress bar

Този прогрес бар се използва заедно с "BusyIndicator":http://developer.qt.nokia.com/wiki/Busy_Indicator_for_QML в 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
}

}