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

完毕!!!

相关推荐
blasit5 小时前
笔记:Qt C++建立子线程做一个socket TCP常连接通信
c++·qt·tcp/ip
郑州光合科技余经理5 天前
代码展示:PHP搭建海外版外卖系统源码解析
java·开发语言·前端·后端·系统架构·uni-app·php
feifeigo1235 天前
matlab画图工具
开发语言·matlab
dustcell.5 天前
haproxy七层代理
java·开发语言·前端
norlan_jame5 天前
C-PHY与D-PHY差异
c语言·开发语言
多恩Stone5 天前
【C++入门扫盲1】C++ 与 Python:类型、编译器/解释器与 CPU 的关系
开发语言·c++·人工智能·python·算法·3d·aigc
修炼前端秘籍的小帅5 天前
Stitch——Google热门的免费AI UI设计工具
前端·人工智能·ui
QQ4022054965 天前
Python+django+vue3预制菜半成品配菜平台
开发语言·python·django
遥遥江上月5 天前
Node.js + Stagehand + Python 部署
开发语言·python·node.js
王码码20355 天前
Flutter for OpenHarmony:socket_io_client 实时通信的事实标准(Node.js 后端的最佳拍档) 深度解析与鸿蒙适配指南
android·flutter·ui·华为·node.js·harmonyos