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

前提:确认环境就绪(我的环境)

  1. Qt VS Tools 已配置好 Qt 版本(如 Qt 6.8.3 MSVC2022 64-bit);
  2. VS2022 解决方案平台设为 x64,与 Qt 版本架构匹配。

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

  1. 打开 VS2022 → 点击「创建新项目」→ 搜索 Qt Widgets Application → 选择该模板 → 「下一步」;

  2. 配置项目信息:

    • 项目名称:自定义(如 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 设计界面

  1. 打开 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,                  // 父窗口(当前主窗口)
		"提示标题",            // 弹窗标题
		"这是点击按钮后弹出的提示框!"  // 弹窗内容
	);
}

步骤 4:编译运行

  1. VS 顶部「解决方案平台」选择 x64 → 配置选 Debug/Release;
  2. 点击「生成→生成解决方案」(F7),若无报错则编译成功;
  3. 点击「调试→开始执行(不调试)」(Ctrl+F5):
    • 弹出设计好的主窗口;
    • 点击「点击弹窗」按钮,触发高科技弹窗,验证界面与代码关联成功。

完毕!!!

相关推荐
znsoft3 小时前
MaClaw(码卡龙)技术拆解:一个 Go + React 的可自进化智能体平台
开发语言·react.js·golang
OH_TPC4 小时前
HarmonyOS APP开发---“动效君“UI动效素材库App,需要用到这个库
ui·华为·harmonyos·鸿蒙
凉茶钱5 小时前
红黑树:用“颜色”换“平衡”,set 与 map 的底层发动机
开发语言·c++·红黑树
高冷小鱼殿下5 小时前
内部类Lambda与枚举
java·开发语言
shelly聊外贸5 小时前
WhatsApp 聊天记录如何导出为 CSV?使用 Python 进行数据分析
开发语言·python·数据分析
octopus_c6 小时前
C++ 模板详解:函数模板、类模板、特化与分离编译
开发语言·c++·算法
椒颜皮皮虾྅7 小时前
让文档不止于文字:DeploySharp + PP-Structure,打通版面分析与表格重建
开发语言·学习·c#·.net·cuda
Eider19987 小时前
Python基础知识之并发相关-2
开发语言·前端·python
第九序言T7 小时前
Python 数据处理进阶(二十二)用 Pandas 做一次完整的用户行为分析
开发语言·python·数据分析·pandas
云和数据.ChenGuang7 小时前
再论深拷贝和浅拷贝
开发语言·人工智能·python·1024程序员节