Skip to content

Commit 732a0e7

Browse files
sudoevolvesudoevolve
committed
0.09
1 parent d46042b commit 732a0e7

15 files changed

Lines changed: 537 additions & 112 deletions

‎docs/Qt/00-目录.md‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,8 @@
1212
- 08-绘制基础-QPainter画图与自定义控件.md
1313
- 09-线程与任务-不卡UI的正确姿势.md
1414
- 10-网络与JSON-请求接口与解析数据.md
15-
- 11-QML入门-快速搭界面（不使用QtQuick.Controls）.md
16-
- 12-综合练习-做一个小型桌面工具.md
17-
- 13-Qt常用类型与自定义函数-QStringQColor等.md
15+
- 11-综合练习-做一个小型桌面工具.md
16+
- 12-Qt常用类型与自定义函数-QStringQColor等.md
1817

1918
## 01 从这里开始
2019

‎docs/Qt/10-网络与JSON-请求接口与解析数据.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -172,4 +172,4 @@ QString parseName() {
172172
- QNetworkAccessManager 管请求；QNetworkReply 带响应
173173
- JSON 用 QJsonDocument 解析，取字段要做默认值和类型判断
174174

175-
下一篇：见 [11-QML入门-快速搭界面（不使用QtQuick.Controls）](11-QML入门-快速搭界面（不使用QtQuick.Controls）.md)
175+
下一篇：见 [11-综合练习-做一个小型桌面工具](11-综合练习-做一个小型桌面工具.md)

docs/Qt/12-综合练习-做一个小型桌面工具.md renamed to docs/Qt/11-综合练习-做一个小型桌面工具.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# 12-综合练习：做一个小型桌面工具（番茄钟）
1+
# 11-综合练习：做一个小型桌面工具（番茄钟）
22

33
目录页：见 [Qt 教程目录](00-目录.md)
44

@@ -150,3 +150,4 @@ onTimeout:
150150
- 你已经能用 Qt 写一个“可用的小工具”：输入 → 逻辑 → UI 更新
151151
- 项目拆成 State/Logic/UI 会更好改、更不乱
152152
- 下一个提升方向：把数据保存到本地、加入托盘、加入更复杂的界面与动画
153+

docs/Qt/13-Qt常用类型与自定义函数-QStringQColor等.md renamed to docs/Qt/12-Qt常用类型与自定义函数-QStringQColor等.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# 13-Qt 常用类型与自定义函数：QString / QColor 等
1+
# 12-Qt 常用类型与自定义函数：QString / QColor 等
22

33
目录页：见 [Qt 教程目录](00-目录.md)
44

@@ -210,3 +210,4 @@ QColor darken(const QColor& c, int percent) {
210210
- 自定义函数：输入用 `const T&`，输出按值返回，写起来像 Qt 一样稳
211211
212212
下一篇：你可以回到目录继续扩展主题（例如 QDateTime/QUrl/QVariant 这些也很常用）。
213+

‎docs/assets/javascripts/theme-palette.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -257,15 +257,17 @@
257257
saveConfig({ primary, accent });
258258
}
259259

260+
panel.addEventListener("click", (e) => {
261+
e.stopPropagation();
262+
});
263+
260264
overlay.addEventListener("click", (e) => {
261-
const t = e.target;
262-
if (!(t instanceof Node)) return;
263-
if (t === overlay) closePanel();
264-
if (t instanceof Element && t.closest(".theme-palette-close")) closePanel();
265-
}, { capture: true });
265+
if (e.target === overlay) closePanel();
266+
});
266267

267268
close.addEventListener("click", (e) => {
268269
e.preventDefault();
270+
e.stopPropagation();
269271
closePanel();
270272
});
271273
document.addEventListener("keydown", (e) => {

‎docs/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
- **[C++ 基础](cpp/00-目录.md)**: 从零开始学习 C++ 语言核心特性。
88
- **[Qt 开发](Qt/00-目录.md)**: 掌握 Qt 框架，开发跨平台桌面应用。
9-
- **[QML 组件](qml/00-QML单页组件规范.md)**: 现代化的 UI 开发与组件规范。
9+
- **[QML](qml/00-目录.md)**: 现代化的 UI 开发与组件库。
1010

1111
## 关于本项目
1212

‎docs/qml/00-QML单页组件规范.md‎

Lines changed: 0 additions & 90 deletions
This file was deleted.

‎docs/qml/00-目录.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# QML 教程目录
2+
3+
按顺序学即可：先把“QML 的直觉”跑通，再看组件规范，最后按需取用组件库。
4+
5+
## QML 入门
6+
7+
- [01-创建 QML 项目：从 Qt Creator 到跑起来](01-创建QML项目-从QtCreator到跑起来.md)
8+
- [02-QML 入门：快速搭界面（不使用 QtQuick.Controls）](02-QML入门-快速搭界面（不使用QtQuick.Controls）.md)
9+
- [03-MD3 主题与配色体系：用 Theme 管理颜色、字体、圆角](03-MD3主题与配色体系-用Theme管理颜色字体圆角.md)
10+
- [04-接入 md3.Core 组件库：从源码集成到 QML import](04-接入md3.Core组件库-从源码集成到QML导入.md)
11+
12+
## 组件规范
13+
14+
- [QML 单页小组件规范（qtcraft）](00-QML单页组件规范.md)
15+
16+
## 组件库
17+
18+
- [SplitText](components/SplitText/SplitText.md)

‎docs/qml/01-创建QML项目-从QtCreator到跑起来.md‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
# 01-创建 QML 项目：从 Qt Creator 到跑起来
2+
3+
目录页：见 [QML 教程目录](00-目录.md)
4+
5+
## 目标
6+
7+
- 在 Qt Creator 里创建一个“能跑起来”的 QML 项目
8+
- 看懂 QML 项目的最小骨架：CMakeLists / main.cpp / main.qml
9+
- 按本教程约束：不使用 `QtQuick.Controls` 也能做出最小界面
10+
11+
## 先决知识（建议）
12+
13+
- 已安装 Qt 与 Qt Creator（见 Qt 01 章）
14+
- 能在 Qt Creator 里创建并运行工程（见 Qt 02 章）
15+
16+
---
17+
18+
## 1. 在 Qt Creator 里创建项目（推荐：Qt 6 + CMake）
19+
20+
1. File → New File or Project…
21+
2. 选择 Application → Qt → Qt Quick Application（或类似名字）
22+
3. 选择构建系统：优先选 CMake
23+
4. 选择 Kit：优先选一个能跑起来的（通常是 Desktop Qt 6.x.x MinGW/MSVC）
24+
5. Finish
25+
26+
你创建完后，第一次点击 Run（运行）时，Qt Creator 会自动：
27+
- 配置（configure）
28+
- 编译（build）
29+
- 运行（run）
30+
31+
---
32+
33+
## 2. 认识最小工程骨架：你只需要抓住 3 个文件
34+
35+
不同模板会略有差异，但你一定能找到这三块：
36+
37+
- `CMakeLists.txt`：告诉构建系统怎么编译、怎么把 QML 打包进程序
38+
- `main.cpp`：程序入口，创建应用与 QML 引擎并加载 QML
39+
- `main.qml`：你的界面从这里开始
40+
41+
---
42+
43+
## 3. 把模板改成“不用 QtQuick.Controls 也能跑”
44+
45+
Qt Creator 的默认 Qt Quick 模板经常会带 `QtQuick.Controls`。但你的教程明确禁止使用它，所以你可以直接把 `main.qml` 改成下面这个最小版本：
46+
47+
```qml
48+
import QtQuick 2.15
49+
import QtQuick.Window 2.15
50+
51+
Window {
52+
width: 360
53+
height: 240
54+
visible: true
55+
title: "QtCraft QML"
56+
57+
Rectangle {
58+
anchors.fill: parent
59+
color: "#121212"
60+
61+
Rectangle {
62+
anchors.centerIn: parent
63+
width: 240
64+
height: 80
65+
radius: 14
66+
color: "#6750A4"
67+
68+
Text {
69+
anchors.centerIn: parent
70+
text: "Hello QML"
71+
color: "#ffffff"
72+
font.pixelSize: 20
73+
}
74+
75+
MouseArea {
76+
anchors.fill: parent
77+
onClicked: parent.color = parent.color === "#6750A4" ? "#1E88E5" : "#6750A4"
78+
}
79+
}
80+
}
81+
}
82+
```
83+
84+
到这里你就已经能做到：
85+
- 一个窗口
86+
- 一块区域
87+
- 点击后改变颜色（交互）
88+
89+
这已经足够支撑你继续学 QML 的“树结构 + 属性绑定”的直觉。
90+
91+
---
92+
93+
## 4. 如果你运行失败，优先排这三类问题
94+
95+
### 4.1 Kit 不可用 / 编译器找不到
96+
97+
表现：
98+
- “No valid kits found”
99+
- 或者 CMake/编译器路径报错
100+
101+
处理：
102+
- 回到 Qt Creator 的 Kits 设置，确保 Qt 版本与编译器都装齐（见 Qt 02 章）
103+
104+
### 4.2 QML 版本/模块导入失败
105+
106+
表现：
107+
- QML 报 “module 'QtQuick.Window' is not installed”
108+
109+
处理：
110+
- 你的 Qt 安装里可能没装 Qt Quick/QML 相关组件，回安装器补装
111+
- 确认你用的是 Qt 6 的 Desktop Kit
112+
113+
### 4.3 QML 没加载到 / 运行后“什么都没有”
114+
115+
表现：
116+
- 程序启动了但空白窗口或直接退出
117+
118+
处理：
119+
- 确认 `main.qml` 确实在工程里，并且引擎加载路径正确
120+
- 最快自检：先用一个明确的背景色（比如上面例子里的 `"#121212"`）确认 QML 生效
121+
122+
---
123+
124+
## 小练习
125+
126+
### 练习 1：改标题与尺寸
127+
128+
- 题目：把窗口标题改成你项目名，把宽高改成 800x600
129+
- 约束：禁止 QtQuick.Controls
130+
- 目标：熟悉“改 QML 立即看到效果”
131+
132+
### 练习 2：加一个计数器
133+
134+
- 题目：点击一次 count + 1，并把 count 显示出来
135+
- 约束：禁止 QtQuick.Controls
136+
- 提示：用 `property int count: 0`
137+
- 目标：练“状态驱动 UI”
138+
139+
---
140+
141+
## 小结
142+
143+
- QML 项目最关键三块：CMakeLists / main.cpp / main.qml
144+
- Qt Creator 模板可能自带 Controls，但你可以用 Window + Rectangle + Text + MouseArea 完成最小 UI
145+
- 能跑起来以后再学“绑定、状态、动画、组件化”会轻松很多
146+
147+
下一篇：见 [02-QML入门-快速搭界面（不使用QtQuick.Controls）](02-QML入门-快速搭界面（不使用QtQuick.Controls）.md)
148+

docs/Qt/11-QML入门-快速搭界面（不使用QtQuick.Controls）.md renamed to docs/qml/02-QML入门-快速搭界面（不使用QtQuick.Controls）.md

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
# 11-QML 入门：快速搭界面（不使用 QtQuick.Controls）
1+
# 02-QML 入门：快速搭界面（不使用 QtQuick.Controls）
22

3-
目录页：见 [Qt 教程目录](00-目录.md)
3+
目录页：见 [QML 教程目录](00-目录.md)
44

55
## 目标
66

@@ -10,7 +10,7 @@
1010

1111
## 先决知识（可选）
1212

13-
- 你已经能跑起来 Qt 工程（见 02 章）
13+
- 你已经能跑起来 QML 工程（见 QML 01 章）
1414

1515
---
1616

@@ -202,4 +202,5 @@ SimpleButton {
202202
- 绑定让界面自动跟随状态变化，动画让变化更丝滑
203203
- 不用 QtQuick.Controls 也能组合出可复用组件（Rectangle + Text + MouseArea）
204204

205-
下一篇：见 [12-综合练习-做一个小型桌面工具](12-综合练习-做一个小型桌面工具.md)
205+
下一篇：见 [00-QML单页组件规范](00-QML单页组件规范.md)
206+

0 commit comments

Comments
 (0)