Simple QML Progress Bar/bg: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
(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
}

}