Qt button 多个按钮实现每次只能由一个按下。

时间:2024-01-21 14:16:40

需要实现效果如下:

为此可以通过代码设置checkable属性为true:

btn->setCheckable(true);

具体实现代码如下:

//导航按钮
    QWidget *btn_widget = new QWidget(this);
    my_listWidget_btn = new QPushButton(this);
    my_listWidget_btn->setFixedSize(30,30);
    my_listWidget_btn->setIcon(QIcon(":/image/Netease/diantai.png"));
    my_listWidget_btn->setStyleSheet("QPushButton{background-color:#2C7AD1;outline: none}"
                                     "QPushButton:pressed{background-color:#3A3A3F}"
                                     "QPushButton:checked{background-color:#3A3A3F}"
                                     ""
                                     );
    my_listWidget_btn->setCheckable(true);
    my_listWidget_btn->setChecked(true);//只能设置一个为选择状态
    my_listWidget_btn->setAutoExclusive(true);


    my_songWidget_btn = new QPushButton(this);
    my_songWidget_btn->setFixedSize(30,30);
    my_songWidget_btn->setIcon(QIcon(":/image/Netease/diantai.png"));
    my_songWidget_btn->setStyleSheet("QPushButton{background-color:#2C7AD1;}"
                                     "QPushButton:pressed{background-color:#3A3A3F;}"
                                     "QPushButton:checked{background-color:#3A3A3F;}"
                                     );

    my_songWidget_btn->setCheckable(true);
    my_songWidget_btn->setAutoExclusive(true);

    my_album_btn = new QPushButton(this);
    my_album_btn->setFixedSize(30,30);
    my_album_btn->setIcon(QIcon(":/image/Netease/diantai.png"));
    my_album_btn->setStyleSheet("QPushButton{background-color:#2C7AD1;}"
                                 "QPushButton:pressed{background-color:#3A3A3F}"
                                 "QPushButton:checked{background-color:#3A3A3F}"
                                );
    my_album_btn->setCheckable(true);
    my_album_btn->setAutoExclusive(true);

    my_folder_btn = new QPushButton(this);
    my_folder_btn->setFixedSize(30,30);
    my_folder_btn->setIcon(QIcon(":/image/Netease/diantai.png"));
    my_folder_btn->setStyleSheet("QPushButton{background:rbga(0,0,0,0);}"
                                 "QPushButton:pressed{background-color:#3A3A3F}"
                                 "QPushButton:checked{background-color:#3A3A3F}"
                                 );
    my_folder_btn->setCheckable(true);
    my_folder_btn->setAutoExclusive(true);

为此,可以实现4个按钮中,每次只有一个按钮按下,

但是,新的问题来了。

首先设置了setIcon(QIcon(":/image/Netease/diantai.png"));按钮图标,然后,又设置了setCheckable(true) 这样会造成背景颜色有焦点框的出现,

如下:

但是取消setCheckable(false)就不会存在这种情况。

于是,将Icon图标设置变成border-image设置,在添加相应的背景色,就可以解决这种问题。

具体设置代码如下:

my_songWidget_btn = new QPushButton(this);
my_songWidget_btn->setFixedSize(30,30);
my_songWidget_btn->setStyleSheet("QPushButton{background-color:#2C7AD1;\
                                              image:url(:/image/Netease/diantai.png);}"
                                     "QPushButton:pressed{background-color:#3A3A3F;\
                                                         image:url(:/image/Netease/diantai.png);}"
                                     "QPushButton:checked{background-color:#3A3A3F;\
                                                         image:url(:/image/Netease/diantai.png);}"
                                     );
my_songWidget_btn->setCheckable(true);
my_songWidget_btn->setAutoExclusive(true);

也就是修改样式,即可解决