BlackBerry 10: Cascades-Button mit variabler Höhe

Der von Haus aus in Cascades enthaltene Button ist nicht in der Lage, seine Höhe zu variieren. Aus diesem Grund steht jeder Entwickler über kurz oder lang vor der Aufgabe, seinen eigenen Knopf zu realisieren. Hier ein kleines und eher primitives Beispiel, das die Vorgehensweise illustriert. Der Knopf entsteht durch die Kombination eines hellen und eines dunklen Rechtecks, die nach dem Anklicken ihre Farben tauschen:

import bb.cascades 1.0

Container 
{
    property string myText: aLabel.text
    signal clicked
    
    id: outerBox
    background: Color.LightGray
    preferredHeight: 500 //Nasty hack
    preferredWidth: 500  //Nasty hack
    leftMargin: 10
    rightMargin: 10
    topPadding: 5
    rightPadding: 5
    leftPadding: 5
    bottomPadding: 5
    

    Container
    {
        id:innerBox
        layout: DockLayout {}
        background: Color.DarkGray
        preferredHeight: 5000 //Nasty hack
        preferredWidth: 5000 //Nasty hack
        Label
        {
            verticalAlignment: VerticalAlignment.Center
            horizontalAlignment: HorizontalAlignment.Center
            id:aLabel
               text:myText
        }
    }
    
    onTouch: 
        {
        if(event.isDown())
        {
            innerBox.background = Color.LightGray
            outerBox.background = Color.DarkGray
        }
        else if(event.isUp())
        {
            innerBox.background = Color.DarkGray
            outerBox.background = Color.LightGray
            clicked()
        }
        else if(event.isCancel())
        {
            innerBox.background = Color.DarkGray
            outerBox.background = Color.LightGray
        }
    }
}

Sie können diesen Knopf theoretisch eins zu eins in ihr Programm übernehmen. Da Cascades im Moment keine abgerundeten Ecken kennt, ist es unter Umständen sinnvoller, den Inhalt durch eine ImageView zu realisieren – in diesem Fall müssen Sie auch das Klick-Handling adjustieren. ()