Search code examples
qttouchqpushbutton

How to increase the clickable area of a QPushButton in Qt?


The Back button in the top left corner of my touch user interface is a little hard to press on a resistive touchscreen, because the touch events are not so precise at the borders of the screen.

The visual size of the button can't really be increased because the screen space is needed for other things. Thus I would like to increase only the clickable area of the button. So when the user touches somewhere in the top left corner of the screen (as marked in red), the back button should be pressed. Note that the red area also overlaps another button. Ideally, the visual button state would also change to the "pressed" state.

Example layout

Can anyone give me some pointers in the right direction? I have considered the following things, but I'm unsure which would work.

  • Overlaying the actual button with a larger, invisible button, painted with a transparent brush. But I have no idea how I could paint the smaller button as "pressed" when the user is pressing the invisible button.
  • Creating a new class based on QWidget, which has the size of the red area (with invisible background) and contains the actual button. Then relay touch events to the button so that it is pressed when the user touches the empty area.
  • Subclassing QPushButton and reimplementing QAbstractButton::hitButton to accept points outside of the button's area. But I guess that function would probably isn't even called when I touch outside the widget area.

Solution

  • To occupy more vertical space inside a layout, set buttons vertical policy to expanding.

    To increase the clickable area without increasing the visual size, increase the margin.

    To have the back button overlapping other buttons, don't put it to a layout. Instead set its parent directly and move it to the corner.

    backButton = new QPushButton("< Back", mainWindow);
    backButton->setStyleSheet("margin: 30;");
    backButton->show();
    backButton->resize(150, 90);
    backButton->move(-30, -30);