BlackBerry 10: Cascades-Button mit variabler Höhe

Die mobile Denkfabrik  –  4 Kommentare

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.