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

完毕!!!

相关推荐
千里马-horse13 小时前
gRPC -- Java 基础教程
java·开发语言·grpc
甲方大人请饶命13 小时前
Java-面向对象进阶(qqbb知识点)
java·开发语言
ChoSeitaku13 小时前
07_static_JavaBean_继承_super/this
java·开发语言
hbugs00113 小时前
EVE-NG桥接外网的5种方式
开发语言·网络·php·eve-ng·rstp·流量洞察
wjs202414 小时前
Lua 字符串
开发语言
三品吉他手会点灯14 小时前
C语言学习笔记 - 33.数据类型 - printf函数的详细用法
c语言·开发语言·笔记·学习·算法
知行合一。。。14 小时前
Python--05--面向对象(继承,多态)
android·开发语言·python
csbysj202014 小时前
Vue3 样式绑定
开发语言
:12114 小时前
java继承
java·开发语言
ZC跨境爬虫14 小时前
跟着 MDN 学 HTML day_61:(构建反馈表单的结构化挑战)
前端·javascript·ui·html·音视频