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:

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
    }
}

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

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
            }
        }
}

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *