Button with wider clickable area



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

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

    Button{
    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")
    Rectangle{
    id:outerrect
    anchors.centerIn: parent
    width: 400
    height: 200
    border.color: "black"
    color: "white"
    Rectangle{
    id:rect
    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.