vs2022+Qt插件初体验，创建带 UI 界面的 Qt 项目

原创于 2025-12-17 15:48:25 发布 · 127 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#qt #ui #开发语言

前提：确认环境就绪（我的环境）

Qt VS Tools 已配置好 Qt 版本（如 Qt 6.8.3 MSVC2022 64-bit）；
VS2022 解决方案平台设为 x64，与 Qt 版本架构匹配。

步骤 1：创建带 UI 界面的 Qt 项目

打开 VS2022 → 点击「创建新项目」→ 搜索 Qt Widgets Application → 选择该模板 → 「下一步」；
配置项目信息：
- 项目名称：自定义（如 QtUI_Demo）；
- 保存路径：无中文 / 空格；
- 解决方案名称：默认或自定义；

3.点击「创建」，进入 Qt 项目配置向导：

Qt Version：选择已配置的 Qt 版本（如 Qt 6.8.3 MSVC2022 64-bit）；
Base class：选择窗口基类（推荐 QMainWindow 或 QWidget，新手选 QMainWindow 更易扩展）；
勾选 Generate form（核心！会自动生成 .ui 界面文件）；
其他选项默认 → 点击「Finish」。

✅ 项目创建后，自动生成核心文件：

QtUI_Demo.ui：Qt Designer 可视化界面文件；
QtUI_Demo.h/QtUI_Demo.cpp：界面逻辑代码文件；
main.cpp：程序入口。

步骤 2：用 Qt Designer 设计界面

打开 Qt Designer：
- 方式 1：在 VS 解决方案资源管理器中，双击 QtUI_Demo.ui 文件 → 自动启动 Qt Designer；
- 方式 2：VS 顶部菜单 → 扩展 → VS Tools → Launch Qt Designer → 手动打开 QtUI_Demo.ui。

2.可视化设计界面（以添加按钮 / 标签为例）：

操作	步骤
拖放控件	左侧「Widget Box」中，找到「Push Button」「Label」，拖拽到右侧主窗口画布；
修改属性	选中控件 → 右侧「Property Editor」修改属性：- 按钮：`text` 改为「点击弹窗」，`objectName` 改为 `btnShowPopup`；- 标签：`text` 改为「Qt 可视化界面演示」，`font` 设为「微软雅黑，14 号」；
布局调整	选中主窗口 → 顶部菜单栏「布局」→ 选择「水平布局 / 垂直布局」→ 控件自动适配窗口大小；
保存界面	按 `Ctrl+S` 保存 `.ui` 文件，VS 会自动生成 `ui_mainwindow.h`（隐藏在「头文件→Generated Files」下）。

在项目文件中我是没有发现有自动生成的头文件(ui_QtUI_Demo.h)

倒是在编译文件中找到了它：

可能是qt的版本不同导致的吧。

步骤 3：关联界面控件与代码（信号槽）

1.在 QtUI_Demo.h 中声明槽函数：

private slots:
    void on_btnShowPopup_clicked();

2.在 mainwindow.cpp 中实现槽函数：

void QtUI_Demo::on_btnShowPopup_clicked()
{
	// 弹出普通提示框（信息类）
	QMessageBox::information(
		this,                  // 父窗口（当前主窗口）
		"提示标题",            // 弹窗标题
		"这是点击按钮后弹出的提示框！"  // 弹窗内容
	);
}