主界面MainWindow
运行效果图
UI上整体是英文,后续可以方便的翻译为其他语种,有点像素级copy QQ,有木有。
主界面布局
MainWindow是继承于QMainWindow的无边框主界面,主界面放了一个QWidget,左右布局,左边widgetLeft是快捷功能导航,右边widgetRight是主要功能区。右边widgetRight也是左右布局,左边widgetRightLeft是中间导航区,右边是点击中间导航后呈现的内容区widgetRightRight,mainwindow.ui如下图
widgetLeft左边快捷功能导航
UI布局说明
一级功能快捷导航为自定义的QWidget,整体垂直布局。
-
- 最上面是用户头像QLabel,用户更新了头像可以加载显示到QLabel中,可点击弹出个人信息的非模态对话框。
-
- 中间widgetNav为自定义的QWidget,主要承载大的功能的QStackWidget切换。
-
- H为与host通信状态QLabel,S为与服务器通信状态QLable。
-
- 最下面更多功能按钮btnMore,弹出菜单执行用户登录、注册、修改密码、等功能。
- 最下面更多功能按钮btnMore,弹出菜单执行用户登录、注册、修改密码、等功能。
widgetRight右边功能导航/title/内容展示区
右侧为QSplitter分割的左右布局,左边widgetRightLeft为中间功能导航区,middleStackedWidge承载左侧一级功能导航窗口。
widgetRightRight为上下布局,上面是自定义title,承载app最大化/最小化/关闭功能按钮;下面部分rightStacktWidget承载中间二级功能导航窗口。
关键功能代码
初始化左侧工具栏
//初始化左侧工具条的按钮
void MainWindow::initLeftToolBar()
{
//1.头像QLabel
ui->headerLabel->setFixedSize(40, 40);
ui->headerLabel->setAlignment(Qt::AlignCenter);
ui->headerLabel->setFrameStyle(QFrame::Panel | QFrame::Sunken);
ui->headerLabel->setStyleSheet("border:none; ");
ui->headerLabel->installEventFilter(this); //1.给label安装事件过滤器
if (userInfo_->headerImage.empty()) {
//设置默认头像
ui->headerLabel->setStyleSheet("QLabel{"
"image:url(:/res/image/header.png) 4 4 4 4 stretch stretch;border-radius:15px;"
"}");
}
//2. stackWidget功能导航区
initNav(); //左侧QToolbutton导航
initIcon(); //QToolbutton的字体图标设置
//3. 清空与host和server通信状态文字
ui->ipcStateLabel->setText("");
ui->serverStateLabel->setText("");
//4. 更多功能
initBtnMore(); //初始化左侧更多按钮和样式
}
这里代码的关键点在于给QLable安装事件监听,用户点击头像弹出个人详细信息对话框。
bool MainWindow::eventFilter(QObject* object, QEvent* event)
{
if (object == ui->headerLabel) {
//2.监听头像label
if (event->type() == QEvent::MouseButtonPress && ((QMouseEvent*)event)->button() == Qt::LeftButton) {
//头像label点击, 弹出个人信息
on_headerLabel_clicked();
return true;
}
else {
return QWidget::eventFilter(object, event);
}
}
if (object = ui->widgetTitle) {
//双击标题栏最大化
if (event->type() == QEvent::MouseButtonDblClick)