Qt 自定义侧边菜单栏切换内容页面

Qt 自定义侧边菜单栏切换内容页面


做一个类似微信侧边栏切换不同页面的功能。支持初始状态

一、环境

  • 系统： Windows 10 专业版
  • Qt：Qt 5.14.1
  • 编译套件：MinGW-32

二、效果

菜单切换示例

代码免费随便用的。

三、实现方案

对于菜单点击后的互斥效果是通过样式表来设置的，通过样式表的不同状态来设置对应的显示效果，下面就给出具体的小小案例，下面给出了 homeBtn的样式和 editBtn 的样式，正常情况下是一张图片，在鼠标移入后、或者选中checked的时候是另外一张图片。

  • 这里我使用的是svg格式图片，到时候也很方便扩展这个图片样式，svg是文本格式的描述图像的规范
QPushButton
{
	border: 1px solid transparent;
	min-height:24px;
	max-height:24px;
	min-width:24px;
	max-width:24px;
}

/*HomeBtn*/
QPushButton#HomeBtn
{	
	image: url(:/images/home.svg);
}
QPushButton#HomeBtn:checked, QPushButton#HomeBtn:hover
{	
	image: url(:/images/home-filling.svg);
}
/*EditBtn*/
QPushButton#EditBtn
{	
	image: url(:/images/edit.svg);
}
QPushButton#EditBtn:checked, QPushButton#EditBtn:hover
{	
	image: url(:/images/edit-filling.svg);
}

1.方案一

思路：

  • 在菜单栏的父控件里去动态的去查找是哪一个按钮被触发点击状态，通过设置样式表的伪态来制作对应的响应效果，同时通过按钮和对应窗口的关系进行绑定即可

源码：

  • 关键代码：
//绑定
     QList<QPushButton *> childButtons = ui->MenuWidget->findChildren<QPushButton *>();

     foreach (auto item, childButtons) 
     {
         //按钮必须设置可选，我这里直接代码设置的，ui里面也可以设置
         item->setCheckable(true);
         
         connect(item, &QPushButton::clicked, [=]()
         {
             QWidget * tempWidget = ui->stackedWidget->findChild<QWidget *>(QString(item->objectName().replace("Btn", "Wg")));

             if(tempWidget != NULL)
             {
                 ui->stackedWidget->setCurrentWidget(tempWidget);

                 //设置其他按钮状态未选中-清空状态
                 foreach (auto btn, childButtons) {
                     btn->setChecked(false);
                 }

                 //设置当前按钮被选中
                 item->setChecked(true);
             }

         });
     }

2.方案二

思路：

  • 用 QButtonGroup 来绑定一个组，直接利用现成的按钮触发排斥功能，最后把按钮和对应窗口的关系进行绑定即可

源码：

  • 关键代码：
    //设置点击按钮互斥
    btnGroup.setExclusive(true);

    QList<QPushButton *> childButtons = ui->MenuWidget->findChildren<QPushButton *>();

    foreach (auto item, childButtons) {
        //要先设置可以checkable
        item->setCheckable(true);
        btnGroup.addButton(item);
    }

    connect(&btnGroup, QOverload<QAbstractButton *, bool>::of(&QButtonGroup::buttonToggled),
            [=](QAbstractButton *button, bool checked)
    {
        QWidget * tempWidget = ui->stackedWidget->findChild<QWidget *>(QString(button->objectName().replace("Btn", "Wg")));
        ui->stackedWidget->setCurrentWidget(tempWidget);
    });