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 :选择窗口基类(推荐 QMainWindowQWidget,新手选 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):
    • 弹出设计好的主窗口;
    • 点击「点击弹窗」按钮,触发高科技弹窗,验证界面与代码关联成功。

完毕!!!

相关推荐
qq_120840937116 小时前
Three.js 工程向:GLTFLoader 管线、Draco/KTX2 与资源管理
开发语言·javascript·ecmascript
下地种菜小叶16 小时前
定时任务系统怎么设计?一次讲清任务注册、分布式调度、幂等执行与失败补偿
java·开发语言·数据库·oracle·rabbitmq
csbysj202017 小时前
业务代表模式
开发语言
sghuter17 小时前
AI重塑工程师:未来核心能力全景图
开发语言·perl·composer·symfony
浪客川17 小时前
【百例RUST - 013】泛型
开发语言·后端·rust
ai_coder_ai17 小时前
自动化脚本ui编程之帧布局(frame)
ui·autojs·自动化脚本·冰狐智能辅助·easyclick
iiiiyu17 小时前
常用API(SimpleDateFormat类 & Calendar类 & JDK8日期 时间 日期时间 & JDK8日期(时区) )
java·大数据·开发语言·数据结构·编程语言
故事和你9117 小时前
洛谷-数据结构1-4-图的基本应用2
开发语言·数据结构·算法·深度优先·动态规划·图论
qq_120840937117 小时前
Three.js 工程向:Clock、deltaTime 与固定步长主循环
开发语言·javascript·ecmascript
小菜同学爱学习17 小时前
夯实基础!MySQL数据类型进阶、约束详解与报错排查
开发语言·数据库·sql·mysql