【QT】：QMainWindow 窗口

IsLand1314

发布于 2025-02-18 12:14:44

8200

代码可运行

文章被收录于专栏：学习之路学习之路

运行总次数：0

代码可运行

QMainWindow 概述

Qt 窗口是通过 QMainWindow 类来实现的。

QMainWindow 是一个为用户提供主窗口程序的类。
该类继承自 QWidget，并提供了一个预定义的布局
QMainWindow 包含一个菜单栏（Menu Bar）、多个工具栏（Tool Bars）、多个浮动窗口（铆接部件子窗口）（Dock Widgets）、⼀个状态栏（Status Bar）和一个中心部件（Central Widget），它是许多应用程序的基础，如文本编辑器，图片编辑器等。

如下图为 QMainwindow 中各组件所处的位置

1. 菜单栏

Qt 中的菜单栏是通过 QMenuBar 这个类来实现的。一个主窗口最多只有一个菜单栏，位于主窗口顶部、主窗口标题栏下面。

菜单栏中包含菜单，菜单中包含菜单项

工具栏本质上就是把菜单中一些比较常用的选项直接放到工具栏里，直接点工具栏中的按钮就能快速生效。

🐇 1.1 具体使用

一、创建菜单栏

（1）方式一

菜单栏的创建可以借助于 QMainWindow 类提供的 menuBar() 函数来实现。menubar() 函数原型如下：

QMenuBar* menuBar() const

（2）方式二 – 在堆上创建

如果是获取到已经存在的 QMenuBar，那么这里的设置就是自己替换自己，仍然在对象树上

如果我们自己创建的项目没有勾选自动生成 ui 文件，那么上述代码是没有问题的。

但如果勾选了自动生成 ui 文件（Qt 已经给我们生成了一个 QMenuBar），那么上述代码就会引起内存泄漏

程序自己已经创建好了一个 QMenuBar，当设置新的 QMenuBar 进来时，就会导致旧的 QMenuBar 脱离了 Qt 的对象树，意味着后续就无法对这个对象进行释放了。

上述程序如果窗口关闭，对象树释放，此时进程就结束了，自然所有的内存都回收给系统，上述内存泄漏也就不会造成影响。
但是如果上述代码是出现在一个多窗口的程序中，如果涉及到窗口的频繁跳转切换（窗口的频繁创建销毁），上述内存泄漏就会更严重。但是实际上由于现在的计算机内存比较充裕，上述内存泄漏都还好，但还是要求代码写得更规范一些，所以采用下面这种写法。

菜单栏(QMenuBar) -> 菜单(QMenu) -> 菜单项(QAction)
上面通过图形化的方式还是不够方便，下面通过代码来创建

二、在菜单栏中添加菜单并且创建菜单项

创建菜单，并通过 QMenu 提供的 addMenu() 函数来添加菜单。
在 Qt 中，并没有专门的菜单项类（QMenuBarItem），可以通过 QAction 类，抽象出公共的动作，如在菜单中添加菜单项。

但是上面的菜单项点了之后没有反应，这个时候就需要我们通过 connect 和 trigged 绑定槽函数，总体代码如下：

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QDebug>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    // 1. 先创建一个菜单栏
    QMenuBar* menuBar = new QMenuBar();
    this->setMenuBar(menuBar);

    // 2. 创建菜单
    QMenu* menu1 = new QMenu("文件");
    QMenu* menu2 = new QMenu("编辑");
    QMenu* menu3 = new QMenu("视图");
    menuBar->addMenu(menu1);
    menuBar->addMenu(menu2);
    menuBar->addMenu(menu3);

   // 3. 给菜单添加菜单项
   QAction* action1 = new QAction("新建");
   QAction* action2 = new QAction("打开");
   QAction* action3 = new QAction("保存");
   QAction* action4 = new QAction("另存为");
   QAction* action5 = new QAction("退出");
   menu1->addAction(action1);
   menu1->addAction(action2);
   menu1->addAction(action3);
   menu1->addSeparator(); // 在保存和另存为中添加分割线
   menu1->addAction(action4);
   menu1->addAction(action5);

   // 4. 给 action 添加信号槽
   connect(action1, &QAction::triggered, this, &MainWindow::handle);
}

void MainWindow::handle()
{
    qDebug() << "触发新建操作!!!";
}

结果如下：

三、在菜单项之间添加分割线

🔥 在菜单项之间可以添加分割线。分割线如下图所示，添加分割线是通过 QMenu 类提供的 addSeparator() 函数来实现：

示例：

QAction 可以给菜单栏使用，也可以给工具栏使用。

四、添加快捷键

🔥 一般来说菜单都会有对应的快捷键，方便我们更好操作，因此我们也可以在设置菜单的 title 时，在字母前加 & 符号

示例：

QMenuBar* menuBar = new QMenuBar();
this->setMenuBar(menuBar);

QMenu* menu1 = new QMenu("文件(&F)");
menuBar->addMenu(menu1);

// 创建四个菜单项
QAction* action1 = new QAction("action1 (&Q)");
QAction* action2 = new QAction("action2 (&W)");
menu1->addAction(action1);
menu1->addAction(action2);

// 我们这需要绑定槽函数, 不然通过快捷键选中也没啥反应
connect(action1, &QAction::triggered, this, &MainWindow::handle1);

效果展示：

先按下 Alt 键，再按 F，其显示的 W 下面会有下划线，表示是有快捷键的，快捷键为 W。

这个 ("文件 (&F)") 就和之前QLabel 那学的设置伙伴类似，大家可以去看看之前写的文章

五、添加子菜单

菜单栏 -> 菜单 -> 菜单栏
菜单栏 -> 菜单 -> 子菜单 -> 子菜单 -> 菜单栏

QMenu 也提供了 addMenu，通过这个操作可以给某个菜单项添加子菜单。

QMenuBar* menuBar = new QMenuBar();
this->setMenuBar(menuBar);
 
QMenu* menuParent = new QMenu("父菜单");
QMenu* menuChild = new QMenu("子菜单");

menuBar->addMenu(menuParent);
menuParent->addMenu(menuChild);

QAction* action1 = new QAction("菜单项1");
QAction* action2 = new QAction("菜单项2");
menuChild->addAction(action1);
menuChild->addAction(action2);

QMenu* menuChild2 = new QMenu("子菜单2");
menuChild->addMenu(menuChild2);

六、添加图标

按照之前设置图标的方法编写，代码如下：

如果给 QMenu 设置图标。因为当前 QMenu 是长在 QMenuBar 上的，此时文本就不显示，图标会覆盖文本。而 QMenu 是子菜单，图标和文本都是可以显示的

🐇 1.2 综合案例

在窗口上创建一个菜单栏，在菜单栏中添加一些菜单，在某一个菜单中添加一些菜单项。

（1）新建 Qt 项目

注意：此时新建项目时选择的基类 QMainwindow !!!

（2）在 “mainwindow.cpp” 文件中创建菜单和中央控件，并且给 action 添加一些动作

创建一个菜单栏，一个菜单
两个菜单项：保存，加载
创建一个 QTextEdit 作为窗口的中央控件

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    
    // 设置标题
    this->setWindowTitle("我的记事本");
    
    // 创建菜单栏
    QMenuBar* menuBar = new QMenuBar(this);
    this->setMenuBar(menuBar);
    
    // 创建菜单
    QMenu* menu = new QMenu("文件");
    menuBar->addMenu(menu);
    
    // 创建菜单项
    QAction* action1 = new QAction("保存");
    QAction* action2 = new QAction("加载");
    menu->addAction(action1);
    menu->addAction(action2);
    
    // 创建中央控件
    edit = new QTextEdit(this);
    this->setCentralWidget(edit);
    edit->setPlaceholderText("此处编写⽂本内容...");
	
	// 连接信号槽,点击 action 时触发一定的效果
	//实现这两个槽函数：使用 QFileDialog 来实现选择文件的效果
	// 1. getSaveFileName 用于保存文件的场景，此时的对话框可以输入文件名
	// 2. getOpenFileName 用于打开文件的场景，此时的对话框可以获取到鼠标选择的文件名
	connect(action1, &QAction::triggered, this, &MainWindow::save);
	connect(action2, &QAction::triggered, this, &MainWindow::load);
}

搭配 C++ 标准库的文件操作实现文件读写

void MainWindow::save()
{
    // 弹出对话框,选择写入文件的路径
    QFileDialog* dialog = new QFileDialog(this);
    QString fileName = dialog->getSaveFileName(this, "保存⽂件", "C:/Users/1/");
    qDebug() << "fileName: " << fileName;
    
    // 写⼊⽂件
    std::ofstream file(fileName.toStdString().c_str());
    if (!file.is_open()) {
        qDebug() << "文件保存失败!";
        return;
    }
    const QString& text = edit->toPlainText();
    file << text.toStdString();
    file.close();
}
 
void MainWindow::load()
{
    // 弹出对话框,选择打开的文件
    QFileDialog* dialog = new QFileDialog(this);
    QString fileName = dialog->getOpenFileName(this, "加载文件", "C:/Users/1/");
    qDebug() << "fileName: " << fileName;
    
    // 读取文件
    std::ifstream file(fileName.toStdString().c_str());
    if (!file.is_open()) {
        qDebug() << "文件加载失败!";
        return;
    }
    std::string content;
    std::string line;
    while (std::getline(file, line)) {
        content += line;
        content += "\n";
    }
    file.close();
 
    // 显示到界面上
    QString text = QString::fromStdString(content);
    edit->setPlainText(text);
}

执行程序，可以看到此时就可以通过程序来保存 / 加载文件了，并且对文件进行编辑。

2. 工具栏

🧀工具栏是应用程序中集成各种功能，实现快捷键使用的一个区域。可以有多个，也可以没有，它并不是应用程序中必须存在的组件。

它是一个可移动的组件，它的元素可以是各种窗口组件，它的元素通常以图标按钮的方式存在。如下图为工具栏的示意图：

一、创建菜单栏

调用 QMainWindow 类的 addToolBar() 函数来创建工具栏，每增加⼀个工具栏都需要调用一次该函数。

如下添加一个工具栏：

// 工具类需要手动创建，自身不会自动创建
QToolBar* toolBar = new QToolBar(toolBar);
this->addToolBar(toolBar);

左边是无工具栏，右边是有工具栏

工具栏往往是和菜单栏搭配使用的，工具栏中的 QAction 也可以出现在菜单中。

注意：

// 创建菜单栏
QMenuBar* menuBar = this->menuBar();
this->setMenuBar(menuBar);

// 创建菜单
QMenu* menu = new QMenu("文件");
menuBar->addMenu(menu);

// 工具栏是需要手动创建出来的. 自身不会自动创建.
QToolBar* toolBar = new QToolBar();
this->addToolBar(toolBar);

// 创建两个菜单项
QAction* action1 = new QAction("保存");
QAction* action2 = new QAction("打开");
// action1->setToolTip("点击这里保存文件");
action1->setIcon(QIcon(":/picture/Save.png"));
action2->setIcon(QIcon(":/picture/open.png"));

// 菜单项还可以放到菜单中
menu->addAction(action1);
menu->addAction(action2);

// 菜单项放到工具栏中
toolBar->addAction(action1);
toolBar->addAction(action2);//存在覆盖

connect(action1, &QAction::triggered, this, &MainWindow::handle1);
connect(action2, &QAction::triggered, this, &MainWindow::handle2);

如果一个 QAction 既是 QMenu 的子元素，又是 QToolBar 的子元素，那么在释放的时候是否会重复 delete 呢？

只会释放一次，不会重复 delete。Qt 内置的机制已经帮我们解决了这个问题。

二、设置停靠位置

工具栏停靠位置的设置有两种方式。

第一种是在创建工具栏的同时指定停靠的位置
第二种是通过 QToolBar 类提供的 setAllowedAreas() 函数来设置。

（1）方式一

创建工具栏的同时指定其停靠的位置。在创建工具栏的同时，也可以设置工具栏的位置，其默认位置是在窗口的最上面；如上述代码，默认在最上面显示。工具栏允许停靠的区域由 QToolBar 类提供的 allowAreas() 函数决定，其中可以设置的位置包括：

Qt::LeftToolBarArea 停靠在左侧
Qt::RightToolBarArea 停靠在右侧
Qt::TopToolBarArea 停靠在顶部
Qt::BottomToolBarArea 停靠在底部
Qt::AllToolBarAreas 以上四个位置都可停靠

// 2. 设置停靠位置 -> 指定在右侧显示
QToolBar* toolBar1 = new QToolBar(this);
this->addToolBar(Qt::RightToolBarArea, toolBar1);

（2）方式二

使用 QToolBar 类提供的 setAllowedAreas()函数 设置停靠位置。

// 只允许停靠在左侧和右侧
QToolBar* toolBar2 = new QToolBar(this);
toolBar2->setAllowedAreas(Qt::LeftToolBarArea | Qt::RightToolBarArea);

说明：

在创建工具栏的同时指定其停靠的位置，指的是程序运行时工具栏默认所在的位置；
而使用 setAllowedAreas() 函数设置停靠位置，指的是工具栏允许其所能停靠的位置。

三、设置浮动和移动属性

设置工具栏的浮动属性可以通过 QToolBar 类提供的 setFloatable()函数来设置。

（1）setFloatable() 函数原型：void setFloatable (bool floatable) （2）参数

true：浮动
false：不浮动

（3）示例

设置工具栏的移动属性可以通过 QToolBar 类提供的 setMovable() 函数来设置。

（1）setMovable()函数的原型：void setMovable (bool movable) （2）参数

true：移动
false：不移动

说明：若设置工具栏为不移动状态，则设置其停靠位置的操作就不会生效，所以设置工具栏的移动属性类似于总开关的效果。（3）示例：

四、综合案例

QToolBar *toolBar = new QToolBar(this);
// 设置工具栏位置，默认在窗口上，此处设置在左处
addToolBar(Qt::LeftToolBarArea, toolBar);

toolBar->setAllowedAreas(Qt::LeftToolBarArea | Qt::RightToolBarArea);   // 设置工具栏停靠位置
toolBar->setFloatable(false); //浮动
toolBar->setMovable(true);

// 设置工具类内容
QAction* openAction = new QAction("open", this);
QAction* newAction = new QAction("new", this);

toolBar->addAction(openAction);
toolBar->addSeparator(); // 在 open 和 new 之间添加分割线
toolBar->addAction(newAction);

// 工具栏中也可以添加控件
QPushButton* button = new QPushButton("保存", this);
toolBar->addWidget(button);

运行如下：

3. 状态栏

状态栏是应用程序中输出简要信息的区域。

一般位于主窗口的最底部，一个窗口中最多只能有一个状态栏。在 Qt 中，状态栏是通过 QStatusBar 类来实现的。在状态栏中可以显示的消息类型有：

实时消息：如当前程序状态
永久消息：如程序版本号，机构名称
进度消息：如进度条提示，百分百提示

一、状态栏的创建

状态栏的创建是通过 QMainWindow 类提供的 statusBar() 函数来创建。

// 存在就获取，不存在就创建
QStatusBar* statusBar = this->statusBar();
this->setStatusBar(statusBar);

二、在状态栏中显示实时消息

在状态栏中显示实时消息是通过 showMessage() 函数来实现。

// 显示临时信息
statusBar->showMessage("这是一个状态信息", 3000);

通过 showMessage 可以在状态栏中显示一个文本。

此时这个文本存在的时间可以自定义，timeout 参数是一个单位为 ms 的时间。如果 timeout 为 0（不填），消息就会持久存在。

三、在状态栏中显示永久消息

在状态栏中可以显示永久消息，此处的永久消息是通过标签来显示的。

新增一条显示消息，新增一个进度条和按钮：

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    // 存在就获取，不存在就创建
    QStatusBar* statusBar = this->statusBar();
    this->setStatusBar(statusBar);

    // 给状态栏添加子控件 -- 永久信息
    QLabel* lab = new QLabel("这是一个 QLabel");
    statusBar->addWidget(lab);
	// 进度条
    QProgressBar* progreeBar = new QProgressBar();
    progreeBar->setRange(0, 100);
    progreeBar->setValue(50);
    statusBar->addWidget(progreeBar);

    QPushButton* button = new QPushButton("按钮");
    statusBar->addPermanentWidget(button);
}

4. 窗口布局

之前我们在 [QT 控件](【QT】控件 – 多元素类 | 容器类 | 布局类-CSDN博客)里已经讲过了大部分的布局类，现在我们来了解来自 QMainWindow 的窗口类布局，如下：

浮动窗口 – QDockWidget

在 Qt 中，浮动窗口也称之为铆接部件。浮动窗口是通过 *QDockWidget* 类来实现浮动的功能。浮动窗口一般是位于核心部件的周围，可以有多个。

一、浮动窗口的创建

浮动窗口的创建是通过 QDockWidget 类提供的构造方法 QDockWidget() 函数动态创建的。

// 给主窗口添加一个子窗口
QDockWidget* dockWidget =new QDockWidget();
// 使用addDockwidget方法，把浮动窗口加入到子窗口中
this->addDockWidget(Qt::LeftDockWidgetArea, dockWidget)

// 给浮动窗口设置标题
dockwidget->setwindowTitle("这是浮动窗口");

结果如下：

二、设置停靠的位置

浮动窗口是位于中心部件的周围。可以通过 QDockWidget类中提供 setAllowedAreas() 函数设置其允许停靠的位置。其中可以设置允许停靠的位置有：

Qt::LeftDockWidgetArea 停靠在左侧
Qt::RightDockWidgetArea 停靠在右侧
Qt::TopDockWidgetArea 停靠在顶部
Qt::BottomDockWidgetArea 停靠在底部
Qt::AllDockWidgetAreas 以上四个位置都可停靠

不能直接给浮动窗口添加子控件，而是需要创建出一个单独的 QWidget，把需要添加的控件加入到 QWidget 中，然后再把这个 QWidget 设置到 dockWidget 中。

示例如下：设置浮动窗口只允许在左边或者上边停靠：

// 给主窗口添加一个子窗口.
QDockWidget* dockWidget = new QDockWidget();
// 使用 addDockWidget 方法, 把浮动窗口加入到子窗口中.
this->addDockWidget(Qt::LeftDockWidgetArea, dockWidget);

// 浮动窗口也是可以设置标题的.
dockWidget->setWindowTitle("这是浮动窗口");

// 给浮动窗口内部, 添加一些其他的控件.
QWidget* container = new QWidget();
dockWidget->setWidget(container);

// 创建布局管理器, 把布局管理器设置到 QWidget 中
QVBoxLayout* layout = new QVBoxLayout;
container->setLayout(layout);

// 创建其他控件添加到 layout 中.
QLabel* label = new QLabel("这是一个 QLabel");
QPushButton* button = new QPushButton("这是按钮");
layout->addWidget(label);
layout->addWidget(button);

// 设置浮动窗口允许停靠的位置
dockWidget->setAllowedAreas(Qt::LeftDockWidgetArea | Qt::TopDockWidgetArea);

涉及函数 / 方法：**setFeatures()**设置窗体特性：Movable可移动、Closable 可关闭、Floatable 可浮动

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    QTextEdit *text = new QTextEdit(this);//新建文本编辑框QTextEdit类对象
    text->setText(tr("主窗口"));      //设置文本内容
    text->setAlignment(Qt::AlignCenter);  //文本编辑框TextEdit中文字的对齐方式为【文字居中】
    setCentralWidget(text);               //将此编辑框设为主窗口的中央窗体

    //停靠窗口1：可移动
    QDockWidget *dock = new QDockWidget(tr("窗口一"),this);//新建QDockWidget类对象
    dock->setFeatures(QDockWidget::DockWidgetMovable);          //窗体特性：Movable可移动、Closable可关闭、Floatable可浮动
    dock->setAllowedAreas(Qt::LeftDockWidgetArea | Qt::RightDockWidgetArea);//窗体可停靠区域：左侧停靠、右侧停靠

    QTextEdit *te1 = new QTextEdit(this);//新建文本编辑框QTextEdit类对象
    te1->setText(tr("Window1, The dock widget can be moved between docks by the user" ""));      //设置文本内容
    dock->setWidget(te1);
    addDockWidget(Qt::RightDockWidgetArea,dock);//窗体可停靠区域：右侧停靠

    //停靠窗口2：可关闭、可浮动
    dock = new QDockWidget(tr("窗口二"),this);        //新建QDockWidget类对象
    dock->setFeatures(QDockWidget::DockWidgetClosable | QDockWidget::DockWidgetFloatable);//窗体特性：Movable可移动、Closable可关闭、Floatable可浮动
    dock->setAllowedAreas(Qt::LeftDockWidgetArea | Qt::RightDockWidgetArea);              //窗体可停靠区域：左侧停靠、右侧停靠

    QTextEdit *te2 = new QTextEdit(this);//新建文本编辑框QTextEdit类对象
    te2->setText(tr("Window2, The dock widget can be detached from the main window,"" and floated as an independent window, and can be closed"));      //设置文本内容
    dock->setWidget(te2);
    addDockWidget(Qt::RightDockWidgetArea,dock);//窗体可停靠区域：右侧停靠

}

运行如下：

分割窗口 – Splitter

涉及函数/方法：setOpaqueResize()：设定分割窗口的分隔条是否为实时更新显示。true为实时更新显示，false为拖拽时显示灰色粗线条。

#include "mainwindow.h"

#include <QApplication>

#include <QSplitter>  //添加头文件
#include <QTextEdit>
#include <QFont>

int main(int argc, char *argv[])//这里是应用程序的入口。几乎所有使用Qt的情况下，main()函数只需在将控制转交给Qt库之前执行初始化，然后Qt库通过事件向程序告知用户的行为。//所有Qt程序必须有且只有一个main()函数。argc是命令行变量的数量，argv是命令行变量的数组。
{
    QApplication a(argc, argv); //a是创建的QApplication类的对象，用来处理命令行变量。所有被Qt识别的命令行参数都将从argv中移去，argc也因此减少

    QFont font("ZYSong18030",12);
    a.setFont(font);            //设置字体及大小

    //1.主分割窗口
    //（1.1）新建主分割窗口QSplitter类对象：水平布局的分割窗口
    QSplitter *splitterMain = new QSplitter(Qt::Horizontal,0);   //水平布局，0表示主窗口

    //（1.2）新建文本编辑框QTextEdit类对象，将其插入主分割窗口中
    QTextEdit *textLeft = new QTextEdit(QObject::tr("Left Widget"),splitterMain);   //插入主分割窗口中
    textLeft->setAlignment(Qt::AlignCenter); //文本编辑框TextEdit中文字的对齐方式为【文字居中】

    //2.右分割窗口
    //（2.1）新建右分割窗口QSplitter类对象：垂直布局的分割窗口
    QSplitter *splitterRight = new QSplitter(Qt::Vertical,splitterMain);   //垂直布局，并以splitterMain主分割窗口为父窗口
    splitterRight->setOpaqueResize(false);   //setOpaqueResize()：设定分割窗口的分隔条是否为实时更新显示。true为实时更新显示，false为拖拽时显示灰色粗线条

    //（2.2）新建文本编辑框QTextEdit类对象，将其插入右分割窗口中
    QTextEdit *textUp = new QTextEdit(QObject::tr("Top Widget"),splitterRight); //插入右分割窗口中
    textUp->setAlignment(Qt::AlignCenter);   //文本编辑框TextEdit中文字的对齐方式为【文字居中】

    //（2.3）新建文本编辑框QTextEdit类对象，将其插入右分割窗口中
    QTextEdit *textBottom = new QTextEdit(QObject::tr("Bottom Widget"),splitterRight);  //插入右分割窗口中
    textBottom->setAlignment(Qt::AlignCenter);//文本编辑框TextEdit中文字的对齐方式为【文字居中】

    splitterMain->setStretchFactor(1,1);//第一个参数表示插入时控件序号为1的控件（即第2个控件），第二个参数大于0表示该控件可伸缩
    splitterMain->setWindowTitle(QObject::tr("Splitter"));//设置窗口标题
    splitterMain->show();//显示窗口

    //    MainWindow w;
    //    w.show();

    return a.exec();//main()函数将控制权交给Qt，Qt完成事件处理工作，当应用程序退出的时候，exec()函数的值就会返回。
    //exec()函数中，Qt接收并处理用户和系统的事件，并且将他们传递给适当的窗口部件。
}

运行如下：