4.2 菜单栏

简介: 4.2 菜单栏

4.2.1 菜单栏 QMenu

QMenu类为菜单栏、右键菜单和其他弹出菜单提供的一个控件。

它可以是菜单栏中的下拉菜单,也可以是独立的右键菜单。当用户单击相应的项目或按指定的快捷键时,菜单栏显示下拉菜单。它们可以与popup()同步执行,也可以与exec()同步执行。

01ebd755782e4c909dad0843d3544acf.jpeg


1 separatorsCollapsible bool默认true

这一属性决定是否应该将连续的分隔符合并。

有时,当同一个菜单栏在不同的上下文环境中时,需要显示和隐藏不同的QAction,那么在这种情况下,QMenu的分割线之间就有可能没有QAction,所以就需只显示一个,如果分割线在开头或结尾,那就不显示。

2 tearOffEnabled bool 默认false

true-菜单包含一个特殊的条目(通常显示为菜单顶部的一条虚线),当它被触发时,它会创建一个该菜单的窗口,可以方便我们拖动,一般用作工具栏。

3 toolTipsVisible bool 默认为false

这个属性设置该菜单栏下的QAction是否显示悬停提示信息,默认为false,但在开发中,这个属性一般设置为打开的。

4.2.2 例子

新建项目MainWindowMenu,类名MainWindowMenu,继承自QMainWindow。

4.2.2.1 创建ui界面

创建下图的ui界面

01ebd755782e4c909dad0843d3544acf.jpeg


4.2.2.2 添加资源文件

Qt 资源系统是一个跨平台的资源机制,用于将程序运行时所需要的资源以二进制的形式存储于可执行文件内部。

一般的,先在自己的项目文件夹下创建一个文件夹,将项目中用到的图片,文件等先放到该文件夹下。然后将其添加到资源文件中。

下面我们来添加一个图片资源。

首先,我们先在项目文件夹下建立一个image文件夹,用于存放我们的图片。

右键项目=》添加新文件=》Qt=》Qt Resource File,确定。输入资源文件名称resource,完成,弹出添加资源文件内容的界面。

点击右侧的添加按钮,前缀改为空,前缀的作用主要是为了区分文件的类型(图片,文本等),我们这里在文件夹中已经区分了,所以改为空。

01ebd755782e4c909dad0843d3544acf.jpeg

点击添加=》文件,将我们image目录中的文件添加到资源文件中。

01ebd755782e4c909dad0843d3544acf.jpeg

保存Ctrl+S,记得这里一定要先保存。

资源文件的读取路径:资源文件的路径从冒号":"开始,沿着上图中的树结构进行读取,例如上图中Qt.png的路径为“:/image/weixin.png”。

4.2.2.3 编写头文件和源文件

mainwindowmenu.h

#ifndef MAINWINDOWMENU_H
#define MAINWINDOWMENU_H
#include <QMainWindow>
namespace Ui {
class MainWindowMenu;
}
class MainWindowMenu : public QMainWindow
{
    Q_OBJECT
public:
    explicit MainWindowMenu(QWidget *parent = 0);
    ~MainWindowMenu();
private slots:
    void on_checkBox_separtors_toggled(bool checked);
    void on_checkBox_tear_toggled(bool checked);
    void on_checkBox_tips_toggled(bool checked);
private:
    Ui::MainWindowMenu *ui;
    QMenu* m_menu;
};
#endif // MAINWINDOWMENU_H

mainwindowmenu.cpp

#include "mainwindowmenu.h"
#include "ui_mainwindowmenu.h"
MainWindowMenu::MainWindowMenu(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindowMenu)
{
    ui->setupUi(this);
    m_menu = new QMenu("点击菜单");
    //添加 微信,QQ动作
    QStringList strs;
    strs << "weixin" << "qq";
    foreach(const QString& str, strs)
    {
        QAction* act = new QAction(str);
        //使用资源文件,路径为该文件在资源树中的结构,切记冒号开头
        act->setIcon(QIcon(QString(":/image/%1.png").arg(str)));
        //设置悬停提示
        act->setToolTip(str);
        //加入到菜单中
        m_menu->addAction(act);
    }
    //添加 “大 中 小”动作,先添加个间隔线
    m_menu->addSeparator();
    strs.clear();
    strs << "小" << "中" << "大";
    QActionGroup* group = new QActionGroup(this);
    for(int i = 0; i < strs.size(); ++i)
    {
        QString str = strs.at(i);
        QAction* act = group->addAction(str);
        act->setData(i);//可以使用setData动态存储当前act的index索引
        //setCheckable会根据系统,在item前出现一个点或勾,表示已选中
        act->setCheckable(true);
        act->setToolTip(str);
        //将动作加入到动作组中,方便集中管理,
        //并且默认设置同一时间只有一个动作被选中
        group->addAction(act);
        m_menu->addAction(act);
    }
    //这里为简洁,使用了lambda表达式
    connect(group, &QActionGroup::triggered, [=](QAction* action){
        QFont fnt = ui->textEdit->font();//获取文本原字体
        int index = action->data().toInt();//使用data获取索引
        if (index == 0)//小
        {
            fnt.setPointSize(9);
        }
        else if (index == 1)//中
        {
            fnt.setPointSize(14);
        }
        else//大
        {
            fnt.setPointSize(19);
        }
        ui->textEdit->setFont(fnt);
    });
    //将菜单加入到菜单栏
    menuBar()->addMenu(m_menu);
    //设置文本
    ui->textEdit->setText("跟小豆君学Qt");
    //选择第一个字体设置动作,设置为小号字体
    group->actions().first()->setChecked(true);
}
MainWindowMenu::~MainWindowMenu()
{
    delete ui;
}
void MainWindowMenu::on_checkBox_separtors_toggled(bool checked)
{
    m_menu->setSeparatorsCollapsible(checked);
}
void MainWindowMenu::on_checkBox_tear_toggled(bool checked)
{
    m_menu->setTearOffEnabled(checked);
}
void MainWindowMenu::on_checkBox_tips_toggled(bool checked)
{
    m_menu->setToolTipsVisible(checked);
}

编译运行程序,效果如下:

01ebd755782e4c909dad0843d3544acf.jpeg


好了,我么今天的分享就到这里了,下期分享制作自定义菜单栏,实现个性化定制。


如果你想要获得更多干货,请关注我的微信公众号:小豆君,只要关注,便可加入小豆君为大家创建的C++\Qt交流群,方便讨论学习。

相关文章
|
7月前
|
前端开发
顶部导航栏
顶部导航栏
65 0
Foundation 顶部导航栏6
导航栏可以固定在页面顶部,即使页面滚动,导航栏也会保持在顶部不动。实现方法是将导航栏放置在带有 `class=&quot;fixed&quot;` 的 `&lt;div&gt;` 标签内。
Foundation 顶部导航栏7
通过将导航栏放置在带有 `.sticky` 类的 `&lt;div&gt;` 中,可以实现导航栏的绝对定位效果。当页面滚动至该区域时,导航栏会固定在顶部。此外,可以通过 `data-options=&quot;sticky_on: small|medium|large&quot;` 属性控制导航栏在特定屏幕尺寸上的固定行为。例如,仅在大屏幕上固定导航栏或在小屏幕和大屏幕上固定导航栏。
Foundation 顶部导航栏3
通过在 `&lt;li&gt;` 元素内添加 `&lt;label&gt;` 标签,可以为下拉菜单设置分类标题。例如,使用 `&lt;label&gt;Fruit&lt;/label&gt;` 和 `&lt;label&gt;Vegetable&lt;/label&gt;` 来区分水果和蔬菜选项。
|
1月前
|
UED
Foundation 顶部导航栏5
导航栏支持多种交互方式,默认情况下下拉菜单在鼠标悬停时显示,但可通过 `data-options=&quot;is_hover: false&quot;` 设置为点击显示。此外,导航栏还支持添加按钮和图标,增强界面功能与美观度。例如,通过引入 Foundation 图标库,可在导航项中加入图标,提升用户体验。
Foundation 顶部导航栏2
顶部导航栏可通过在 `&lt;li&gt;` 元素上添加 `.has-dropdown` 类来设置下拉菜单。示例代码展示了如何创建包含多个链接的下拉菜单,并使用 `.divider` 类来添加分割线。
Foundation 顶部导航栏4
内嵌下拉菜单示例:通过在主菜单项中嵌套多个层级的下拉菜单,实现多级导航结构。每个子菜单项均可进一步展开,形成层级分明的导航体系。
Foundation 顶部导航栏1
顶部导航栏位于页面头部,包含网站Logo、菜单按钮及导航链接。在小屏幕上,菜单按钮可展开隐藏的选项。通过`.left`和`.right`类可设置链接对齐方式,`.divider`类用于添加分割线。
|
6月前
(12)菜单栏、工具栏和状态栏
(12)菜单栏、工具栏和状态栏
|
4月前
自定义顶部导航栏
自定义顶部导航栏
46 1