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

您可以阅读有关此here的更多信息。

如何在BlackBerry 10 Cascades中创建图像按钮？

2 个答案: