qml - BlackBerry 10 Cascadesで画像ボタンを作成するにはどうすればよいですか？

Question

Cascades Qmlで画像の背景を持つボタンやリストなどのカスタムUI要素を作成する必要がありますが、Buttonなどのコントロールの背景を設定する方法がないようです。

この例はどこにも見つかりません。

これは、コンテナーを使用してカスタムコントロールを作成することで可能になるようですが、そのコンテナーにonClickイベントを発生させる方法がわかりません。

Answer 1

BB10のカスタムコントロールは実はとても簡単です。これがあなたがやろうとしていることの例です：

Container {
    property alias text: label.text
    property alias image: imagev.imageSource
    ImageView {
        id: imagev
        imageSource: "asset:///images/Button1.png"
    }        
    Label {
        id: label
        text: "demo"            
    }

    gestureHandlers: [
        TapHandler {
             onTapped: {
                 //do tapped code
             }                
        },
        LongPressHandler {
            onLongPressed: {
                //do long press code
            }            
        }        

    ]
}

「CustomButton.qml」として保存すると、メインの QML ファイルで次のようにアクセスできます。

Page {
    CustomButton {
        text: "my text"
        image: "images/myimage.png"
    }
}

Answer 2

これは、 MouseArea要素を使用して行うことができます。

Item {
  Image {
    anchors.fill: parent
    source: "yourimg.png"
  }
  MouseArea {
    anchors.fill: parent
    onClicked: {
      console.log("do your action here!")
    }
  }
}

このコードを別の QML ファイル (例: CustomButton.qml) に入れる場合。カスタム ボタン要素のように、他の QML ファイルで使用できます。

CustomButton {
}

詳細については、こちらをご覧ください。