【C++/QT】QT实现侧边导航栏(附代码)

这篇具有很好参考价值的文章主要介绍了【C++/QT】QT实现侧边导航栏(附代码)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

背景

没有背景,瞎玩的

效果

界面挺原始的
代码链接
【C++/QT】QT实现侧边导航栏(附代码)
【C++/QT】QT实现侧边导航栏(附代码)

实现步骤

1、设计主页面

结构如下:
【C++/QT】QT实现侧边导航栏(附代码)
a、添加 sideBar 到左侧
b、拖动四个 QToolButton
c、放置 verticalSpacer
d、右侧放置主窗口 stackedWidget ,删掉两个page
e、修饰按键
【C++/QT】QT实现侧边导航栏(附代码)

<property name="styleSheet">
        <string notr="true">/* 默认 */
        QToolButton{
              border-top: 3px outset transparent;
              border-bottom: 7px outset transparent;
              border-right: 3px outset transparent;
              border-left: 20px outset transparent;

              background-color: rgb(228, 228, 228);
        }

        /* 鼠标悬停 */
        QToolButton:hover{
              background-color: rgb(205, 205, 205);
        }

        /* 点击和按下 */
        QToolButton:pressed,QToolButton:checked{
              border-left: 18px outset rgb(93, 95, 97);
              background-color: rgb(246, 246, 246);
        }

        QPushButton:default {
          border-color: navy; /* make the default button prominent */
        }
        </string>
       </property>

2、新建若干个ui

【C++/QT】QT实现侧边导航栏(附代码)
在这里我把它命名为 HomeWindow、MonitorWindows、SettingWindow、AboutWindow

3、设置关联属性

#include "mainwindow.h"
#include "ui_mainwindow.h"


MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    // 隐藏标题(关闭)
    //this->setWindowFlags(Qt::SplashScreen|Qt::WindowStaysOnTopHint|Qt::FramelessWindowHint);

    ui->stackedWidget->addWidget(&homeWnd);
    ui->stackedWidget->addWidget(&monitorWnd);
    ui->stackedWidget->addWidget(&settringWnd);
    ui->stackedWidget->addWidget(&aboutWnd);

    btnGroup.addButton(ui->btnHome, 0);
    btnGroup.addButton(ui->btnMonitor, 1);
    btnGroup.addButton(ui->btnSettring, 2);
    btnGroup.addButton(ui->btnAbout, 3);

    connect(&btnGroup, static_cast<void (QButtonGroup::*)(int)
            >(&QButtonGroup::buttonClicked),
            ui->stackedWidget, &QStackedWidget::setCurrentIndex);

    // 设置默认选中的页面
    btnGroup.button(0)->setChecked(true);
    ui->stackedWidget->setCurrentIndex(0);

}

这样就可以实现切换了。
头文件如下:文章来源地址https://www.toymoban.com/news/detail-504153.html

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QButtonGroup>

#include <QPainter>
#include <QPropertyAnimation>

#include "homewindow.h"
#include "monitorwindow.h"
#include "settingwindow.h"
#include "aboutwindow.h"

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();

private slots:
    void on_toolButton_min_clicked();
    void on_toolButton_close_clicked();


private:
    Ui::MainWindow *ui;

    QButtonGroup btnGroup;
    HomeWindow homeWnd;
    MonitorWindow monitorWnd;
    SettingWindow settringWnd;
    AboutWindow aboutWnd;

};

#endif // MAINWINDOW_H

到了这里,关于【C++/QT】QT实现侧边导航栏(附代码)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 小程序自定义底部导航 custom-tab-bar完整实现代码附效果图

    根据用户身份,动态设置底部的导航图标  实现步骤: 第一步 ,先配置:app.json里面的 tabBar 的 custom 设置为 true,如图:这里需要注意的是,自定义 tabBar 中包含的页面,在这里的 list 页面路径也必须得有,其它字段可以不设置 相关代码:   第二步 ,创建组件:在项目跟目

    2024年02月15日
    浏览(53)
  • vue2+element-ui实现侧边导航栏

    编写 client/src/components/LeftMenu.vue ,创建侧边导航栏: 编辑 client/src/views/Index.vue ,引入侧边导航栏:

    2024年02月02日
    浏览(48)
  • vue3后台管理系统实现动态侧边导航菜单管理(ElementPlus组件)

    记住 一级(el-sub-menu)的都是只是展示的 点击跳转的都是一级下的子级(el-menu-item) 完整展示 1:在登陆功能进行登陆 获取menu列表 注册路由表的时候 把文件进行创建好 因为注册的方法需要获取这个路径 整个router下的main product等等都要创建 2:侧边菜单界面 router/index.ts

    2024年02月16日
    浏览(55)
  • 『Android』Toolbar+DrawerLayout+NavigationView实现类似QQ侧边栏效果

    👨‍🎓作者简介:一位喜欢写作,计科专业大三菜鸟 🏡个人主页:starry陆离 如果文章有帮到你的话记得点赞👍+收藏💗支持一下哦 为什么默认的Android应用跑出来都是紫色的主题? 可在看到原来默认给我们设置了主题的颜色 Material Theme 可以定义为以下 3 种 Theme.Material(深

    2024年02月03日
    浏览(44)
  • Qt实现跟随侧边栏的按钮控制侧边栏的展开与折叠

    一、界面布局方式如图所示:SideToolWidget主体采用水平布局,包含两个QWidget,左侧为用于信息显示的leftWidget,右侧为容纳展开折叠按钮窗口btnWidget与云台工具显示窗口ptzWidget的containerWidget,内部窗体的具体布局如图所示; 二、实现方式描述,按钮窗口btnWidget与云台工具显示窗口

    2024年02月11日
    浏览(64)
  • 【CSS】简记CSS效果:通过transition(动画过渡属性)实现侧边栏目滑入滑出

    在资金明细的页面中,点击按钮时筛选区域从左侧滑出,完成筛选点击确认后调用接口完成数据查询,筛选区域滑入左侧; https://www.cnblogs.com/yadiblogs/p/10145625.html  

    2024年02月10日
    浏览(48)
  • Qt 侧边栏隐藏和滑出 最简单实现

    源码链接:https://github.com/KunMengcode/CPP-QT-Example/tree/main/Sidebar_Hide

    2024年02月15日
    浏览(35)
  • HTML侧边导航栏

    简介 :本文用最简洁的语言,来教会读者,如果用html+css来制作,侧边导航栏,本案例以手机商城中的部分为例子来制作。 运行结果 : 运行结果 : 如果大家觉得有用的话,可以关注我下面的微信公众号,极客李华,我会在里面更新更多行业资讯,企业面试内容,编程资源

    2024年02月03日
    浏览(39)
  • 文字效果 用背景渐变实现 波浪背景文字

    1. 实现波浪背景 原理:透明到纯色的径向渐变,然后复制该渐变背景,最后加上背景水平方向移动的无限循环动画 2. 文字波浪背景 将该渐变应用在文本标签上,并添加一下css属性 最后,在做一些适当调整,比如弧度衔接处 动画时间等 。搞定 3. 总结 波浪的本质上是一个曲

    2024年02月08日
    浏览(53)
  • 分享一个 VUE 侧边导航共用组建

    提示:我这里有英文所以有$i18n.locale===\\\'zh\\\' 判断,使用的时候按照个人项目情况使用。 提示:这里我是写在全局的layout里面,因为的的项目用的地方比较多。可根据自己的项目更改 好记性, 不如乱笔头,记个笔记。 第一:可能自己以后能用到 第二:可能帮助到有需要的人

    2024年02月14日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包