如何在QT中向窗口小部件的角落添加按钮？

Question

I am trying to display a square image and have an X in the top right corner (half in the image half outside) to close the image. I dont know of a layout manager that will allow me to do that. How do I implement this?

+---------O <- close button
|         |
|         |
+---------+

Answer 1

There will be a lot to implement here. I've accomplished this in the following way:

Step 1. Subclass QLabel to make it possible to capture mouse clicks. In the header declare signals Clicked and Pressed, and override the proper mouse events.

LabelButton::LabelButton(QWidget *parent) : QLabel(parent)
{
}
void LabelButton::mouseReleaseEvent(QMouseEvent *event){
    emit Clicked();
    event->accept();
}
void LabelButton::mousePressEvent(QMouseEvent *event){
    emit Pressed();
    event->accept();
}

Step 2. Add a LabelButton called xbutton containing an circular 'x' image to your widget at the location that you desire.

Example (This would be in your setupUi function):

...
xbutton = new LabelButton(MainWidget);
xbutton->setObjectName(QString::fromUtf8("xbutton"));
xbutton->setGeometry(QRect(0, 0, 31, 31));
xbutton->setPixmap(QPixmap(QString::fromUtf8(":/xbutton.gif")));
xbutton->setAlignment(Qt::AlignCenter);
...

Step 3. Create your widget. Set its background to transparent, and make sure its size includes room for the 'x' close button. Note: Setting your background to transparent means your widget will have to contain some child widget that accepts input from the user.

Example:

mywidget::mywidget(QWidget *parent): QWidget(parent){
    setupUi(this);
    moving=false; // notice that you must declare this bool for Step 4.
    offset=QPoint(0,0); // Also a QPoint for Step 4
#if defined(Q_WS_MAC) //These values worked for me with the Mac OS 10.5 SDK
    this->setWindowFlags(Qt::CustomizeWindowHint | Qt::WindowStaysOnTopHint | Qt::Window);
    QPalette pal = this->palette();
    pal.setColor(this->backgroundRole(), Qt::transparent);
    this->setPalette(pal);
#elif defined(Q_WS_WIN)//These values worked for me on Windows XP/Vista/7
    this->setWindowFlags(Qt::CustomizeWindowHint | Qt::WindowStaysOnTopHint |Qt::FramelessWindowHint | Qt::Window);
    setStyleSheet("background:transparent;");
    setAttribute(Qt::WA_TranslucentBackground);
#endif
    connect(xbutton,SIGNAL(Clicked()),this,SLOT(hide()));
}

Now you have the functionality that you originally desired. When you click the xbutton, the window will close. But you will not have normal move functionality until you implement that.

Step 4. Implement move functionality to your widget.

/*
 FUNCTION:mousePressEvent
 used to help move the widget since there is no title bar, sets the initial offset of the mouse
 */
void mywidget::mousePressEvent(QMouseEvent *event){
    if((event->button() == Qt::LeftButton)) {
        moving = true;
        offset = event->globalPos() - this->pos();
    }
}
/*
 FUNCTION:mouseReleaseEvent
 used to help move the widget since there is no title bar, releases the "moving" attribute
 */
void mywidget::mouseReleaseEvent(QMouseEvent *event){
    if(event->button() == Qt::LeftButton) {
        moving = false;
    }
}
/*
 FUNCTION:mouseMoveEvent
 used to help move the widget since there is no title bar
 */
void mywidget::mouseMoveEvent(QMouseEvent *event){
    if(moving){
    QPoint global = event->globalPos();
    this->setGeometry(global.x()-offset.x(),global.y()-offset.y(),this->width(),this->height());
    }
}

I found this way to be of most use to me, because I needed lots of functionality out of my customized slick-looking widget.

I really enjoy creative user interfaces and I hope that yours looks really sleek when you get it finished!