Button with wider clickable area

  • Does the QML Button allow the clickable area to be wider than the visible background image? Something like this?

    I feel like I should be able to write something along the lines of:

    height: 100
    width: 100
    topMargin: 20
    bottomMargin: 20
    leftMargin: 20
    rightMargin: 20

    Text: "Button Label"
    Text.horizontalAlignment: Text.AlignHCenter
    Text.color: "white"

    color: Green
    colorPressed: Orange
    radius: 4

    to get a pressable square that is 100x100 pixels with a visible green button in the center 60x60 pixels that turns orange when pressed. But I can't seem to find the right syntax.

  • @MichaelRink ,

    Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    anchors.centerIn: parent
    width: 400
    height: 200
    border.color: "black"
    color: "white"
    anchors.centerIn: outerrect
    color: "green"
    width: 200
    height: 100
    radius: 10
    Text {
    id: name
    anchors.centerIn: rect
    text: qsTr("Visible Area")
    color: "white"
    font.pixelSize: 24
    MouseArea {
    anchors.fill: parent
    onClicked: {
    console.log(qsTr('Clicked on outer rect..'))

Log in to reply

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.