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

From Qt Wiki
Jump to: navigation, search
(Sub-categorize)
 
(5 intermediate revisions by 2 users not shown)
Line 1: Line 1:
'''Български''' [[Simple_QML_Progress_Bar|English]]
+
{{Cleanup | reason=Auto-imported from ExpressionEngine.}}
 +
{{LangSwitch}}
 +
[[Category:Snippets::QML]]
 +
[[Category:HowTo]]
 +
[[Category:Developing with Qt::Qt Quick::QML]]
 +
[[Category:Bulgarian]]
  
[[Category:Snippets]]<br />[[Category:HowTo]]<br />[[Category:Developing_with_Qt::Qt Quick]]<br />[[Category:Developing_with_Qt::Qt Quick::QML]]
+
= Прост прогрес бар =
  
= Прост прогрес бар =
+
Този много прост 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
 +
}
  
Този много прост QML прогрес бар бе вдъхновен от примера, който идва с Qt. Направен е така, че да е много опростен и лек и да е подходящ дори за много малки размери. Ето така изглежда по подразбиране (със зеленият цвят на Qt ;<s>) )
+
Rectangle {
<br />[[Image:http://gallery.theharmers.co.uk/upload/2011/04/30/20110430152206-b395a64a.png|Simple progress bar]]
+
id: highlight
<br />Този прогрес бар се използва заедно с &quot;BusyIndicator&amp;quot;:http://developer.qt.nokia.com/wiki/Busy_Indicator_for_QML в QML компонента '''ProgressSpinner''', за да се получи приятен елемент, който може да показва активността и прогреса на дълги операции.
+
property int widthDest: ( ( progressbar.width * ( value- minimum ) ) / ( maximum - minimum ) - 4 )
<br />Реализация (SimpleProgressBar.qml):<br /><code><br />import QtQuick 1.0
+
width: highlight.widthDest
<br />Item {<br /> id: progressbar
 
<br /> property int minimum: 0<br /> property int maximum: 100<br /> property int value: 0<br /> property color color: &quot;#77B753&amp;quot;
 
<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: &quot;transparent&amp;quot;<br /> border.width: 1<br /> border.color: parent.color<br /> }
 
<br /> Rectangle {<br /> id: highlight<br /> property int widthDest: ( ( progressbar.width * ( value</s> minimum ) ) / ( maximum - minimum ) - 4 )<br /> width: highlight.widthDest
 
  
Behavior on width {<br /> SmoothedAnimation {<br /> velocity: 1200<br /> }<br /> }
+
Behavior on width {
 +
SmoothedAnimation {
 +
velocity: 1200
 +
}
 +
}
  
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>
+
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
 +
}
 +
}

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.

En Ar Bg De El Es Fa Fi Fr Hi Hu It Ja Kn Ko Ms Nl Pl Pt Ru Sq Th Tr Uk Zh

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

Този много прост 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
}

}