QML: Notifica numero messaggi come iOS (IPhone)

iphoneNotifyExampleL’icona di notifica del numero dei messaggi utilizzata su iPhone o, più genericamente, in iOS è veramente carina. Un po’ di codice, un componente QML riutilizzabile per aggiungere una notifica in stile iOS come nell’immagine di questo articolo.
Notify.qml:

[sourcecode language=”css”]
import QtQuick 2.0
Item {
property color textColor: "white"
property color backgroundColor: "red"
property alias text: label.text
property alias size: label.font.pixelSize
width: back.width
height: back.height
Rectangle {
id: back
gradient: Gradient {
GradientStop { position: 0.0; color: Qt.darker(textColor, 1.2) }
GradientStop { position: 1.0; color: backgroundColor}
}
width: label.width + label.height /2
height: label.height
radius: height /2
border.color: textColor
border.width: height * 0.1
}
Text {
id: label
text: "9"
color: textColor
font.family: "Arial"
font.weight: Font.Bold
font.pixelSize: 20
anchors.centerIn: parent
}
}
[/sourcecode]

Un esempio del suo utilizzo sopra l’icona del famoso Thunderbird:

[sourcecode language=”css”]
Image {
width: 64; height:64
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
source: "Thunderbird.png"

Notify {
scale: 0.80
text: "22"
anchors {
right: parent.right
top: parent.top
}
}
}
[/sourcecode]