blackberry-10 - blackberry 10 カスケードで選択した背景色のボタンを作成するにはどうすればよいですか?

Question

ブラックベリー 10 カスケードで、選択した背景色のボタンを作成したいと考えています。

これどうやってするの ？

Answer 1

少なくともqmlに慣れれば、独自のボタンを作成するのは非常に簡単です:)

以下はカスタム ボタンの例です。CustomButton.qml などのファイルに配置します。プロパティを使用して色を通過させ、簡単に再利用できるようにすることもできます。

Container {
    property alias text: label.text

    signal clicked()  //emits a clicked signal.
        gestureHandlers: [
        TapHandler {
                onTapped: {
                    clicked();
            }
        }
    ]

    layout: DockLayout {
    }

    Container {
        background: Color.Red
        horizontalAlignment: HorizontalAlignment.Fill
        Container {
            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Center
            topPadding: 10
            bottomPadding: 15
            leftPadding: 20
            rightPadding: 20
            Label {
                id: label
                text: "demo"
                textStyle {
                    base: tsLabel.style
                }
                topMargin: 0
                bottomMargin: 0
                topPadding: 0
                bottomPadding: 0
            }
        }
    }

    attachedObjects: [
        TextStyleDefinition {
            id: tsLabel
            base: SystemDefaults.TextStyles.BodyText
            fontSize: FontSize.Small
            color: Color.White
            fontWeight: FontWeight.W100
        }
    ]
}

これをメイン ページで使用するには、次のようにします。

CustomButton {
    text: "my button"
    onClicked: {
        //do code
    }
}

これを強化するには、onTapped 関数にアニメーションまたは色の変更を追加します。Color.Red の代わりに imagePaint を使用して、ボタン イメージに 9patch を使用することもできます。