Qt 实现 QQ 9.0版 自定义菜单控件

#简述
重新最近开始了QQ最新版 9.0 界面的模仿,前几天搞了一个QQ登陆界面的动画效果详情见 QQ 9.0 新版登录窗口登录特效 ,今晚Qt技术学习班分享了QQ 9.0版本的自定义菜单控件,通过QListWidget 来承载 每个菜单项,通过简单的组合完成菜单项控件,主要如下:

1、自动设置菜单高度,根据当前添加的菜单项自增菜单高度;
2、菜单宽度可根据菜单文字自行设置;
3、菜单的透明度、菜单边框阴影宽度、菜单四角圆角弧度均可设置;
4、其他菜单等样式,菜单项文字颜色,图标等均可自行设置;

这里写图片描述


代码之路

QQCustomMenu.h

/**
* @author : 前行中的小猪;
* @date   : 2018年05月18日
* @version: 1.0
* @note   : 模仿QQ菜单样式,实现自定义菜单,通过ListWidget加载菜单项;
			1、自动设置菜单高度,根据当前添加的菜单项自增菜单高度;
			2、菜单宽度可根据菜单文字自行设置;
			3、菜单的透明度、菜单边框阴影宽度、菜单四角圆角弧度均可设置;
			4、其他菜单等样式,菜单项文字颜色,图标等均可自行设置,
			   这里
  • 3
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
1. 设置控件属性 首先需要在Qt Creator中创建一个新的自定义控件,可以通过以下步骤完成: 1. 在Qt Creator中选择“File” -> “New File or Project” -> “Qt” -> “Qt Designer Form” -> “Widget” -> “Choose”。 2. 给控件起一个名称,例如“TrafficLightWidget”。 3. 添加三个圆形的QLabel控件作为信号灯,设置它们的颜色和大小。可以使用QLabel的setStyleSheet()函数设置样式表,例如:setStyleSheet("background-color: green;border-radius: 20px;")。 4. 在Qt Creator中打开“Object Inspector”窗口,选择“TrafficLightWidget”,在“Property Editor”中添加以下属性: - int state:当前信号灯的状态,可以是0(红灯)、1(黄灯)或2(绿灯)。 - int interval:每个状态的持续时间,以毫秒为单位。 2. 实现功能 在实现交通灯控件的功能之前,需要先了解Qt的信号和槽机制。信号是对象发出的事件,槽是响应该事件的函数。可以使用connect()函数将信号和槽连接起来。 在TrafficLightWidget类中添加以下成员变量和函数: ``` private: int m_state; int m_interval; QTimer* m_timer; private slots: void onTimeout(); ``` m_state表示当前的信号灯状态,m_interval表示每个状态的持续时间,m_timer是一个计时器,用于定时改变信号灯状态。onTimeout()是一个槽函数,用于处理计时器超时事件。 在TrafficLightWidget的构造函数中,初始化成员变量和计时器,并将计时器的timeout()信号连接到onTimeout()槽函数: ``` TrafficLightWidget::TrafficLightWidget(QWidget *parent) : QWidget(parent), ui(new Ui::TrafficLightWidget) { ui->setupUi(this); m_state = 0; m_interval = 3000; m_timer = new QTimer(this); connect(m_timer, SIGNAL(timeout()), this, SLOT(onTimeout())); m_timer->start(m_interval); } ``` 在onTimeout()槽函数中,根据当前的信号灯状态改变信号灯颜色,并更新m_state和计时器的间隔时间: ``` void TrafficLightWidget::onTimeout() { switch (m_state) { case 0: // 红灯 ui->redLight->setStyleSheet("background-color: red;border-radius: 20px;"); ui->yellowLight->setStyleSheet("background-color: gray;border-radius: 20px;"); ui->greenLight->setStyleSheet("background-color: gray;border-radius: 20px;"); m_state = 1; m_interval = 2000; break; case 1: // 黄灯 ui->redLight->setStyleSheet("background-color: gray;border-radius: 20px;"); ui->yellowLight->setStyleSheet("background-color: yellow;border-radius: 20px;"); ui->greenLight->setStyleSheet("background-color: gray;border-radius: 20px;"); m_state = 2; m_interval = 4000; break; case 2: // 绿灯 ui->redLight->setStyleSheet("background-color: gray;border-radius: 20px;"); ui->yellowLight->setStyleSheet("background-color: gray;border-radius: 20px;"); ui->greenLight->setStyleSheet("background-color: green;border-radius: 20px;"); m_state = 0; m_interval = 3000; break; } m_timer->start(m_interval); } ``` 3. 使用控件Qt Creator中打开一个新的窗口,将TrafficLightWidget拖动进去,设置它的大小和位置,运行程序即可看到交通灯的效果。 ``` #include "mainwindow.h" #include "ui_mainwindow.h" #include "trafficlightwidget.h" MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent), ui(new Ui::MainWindow) { ui->setupUi(this); TrafficLightWidget* trafficLightWidget = new TrafficLightWidget(this); trafficLightWidget->setGeometry(50, 50, 100, 300); } MainWindow::~MainWindow() { delete ui; } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值