254 lines
7.9 KiB
Markdown
254 lines
7.9 KiB
Markdown
# 第 1 课：GUI 你好窗口
|
||
|
||
> **本课目标**：从一个空空的程序开始，**自己一步一步**让屏幕上弹出一个写着 "欢迎来到抽卡世界！" 的窗口。
|
||
>
|
||
> **预计时间**：30~40 分钟
|
||
>
|
||
> **学完之后**：你能解释什么是窗口、控件、事件循环，并能凭记忆写出 5~6 行让窗口出现的代码。
|
||
|
||
---
|
||
|
||
## 0. 上课前先理理
|
||
|
||
### 命令行程序 vs GUI 程序
|
||
|
||
| | 命令行（以前的你） | GUI（现在的你） |
|
||
|---------|-----------------------------|----------------------------------|
|
||
| 长什么样 | 黑底白字一行行 | 有窗口、按钮、彩色文字 |
|
||
| 怎么跑 | 一口气从上跑到下，跑完就退出 | 启动后 **一直在等** 你点鼠标 |
|
||
| 怎么输出 | `std::cout << ...` | 把文字 "贴" 在窗口上的便利贴上 |
|
||
|
||
### 这一课会认识 3 个新朋友
|
||
|
||
| 名字 | 比喻 | 干什么用 |
|
||
|---------------|------------------|-------------------------------------|
|
||
| `Fl_Window` | **画纸** | 程序的窗口本体 |
|
||
| `Fl_Box` | **便利贴** | 贴在画纸上的一段文字 |
|
||
| `Fl::run()` | **不下班的保安** | 让窗口一直待着，等你操作 |
|
||
|
||
> 💡 还会顺带认识两个 C++ 新写法：`new` 和 `->`。先不用搞懂原理，跟着写就行。
|
||
|
||
---
|
||
|
||
## 1. 起步：打开起步骨架，先编译一次
|
||
|
||
打开 `lesson_gui_1.cpp`。你会看到一个全是 TODO 的骨架。
|
||
|
||
先在终端里编译一下，确认环境没问题：
|
||
|
||
**Mac / Linux：**
|
||
```bash
|
||
cmake -B build -DLESSON=1
|
||
cmake --build build
|
||
./build/gacha1
|
||
```
|
||
|
||
**Windows：**
|
||
```bash
|
||
cmake -B build -DLESSON=1 -DCMAKE_TOOLCHAIN_FILE=C:/vcpkg/scripts/buildsystems/vcpkg.cmake
|
||
cmake --build build --config Release
|
||
build\Release\gacha1.exe
|
||
```
|
||
|
||
> 💡 第一次 `cmake -B build -DLESSON=1` 之后，**后面每次只要改了 `.cpp`，运行前两行就够**：
|
||
> ```bash
|
||
> cmake --build build && ./build/gacha1
|
||
> ```
|
||
|
||
### ✅ 检查点 1
|
||
- [ ] 编译没报错
|
||
- [ ] 运行后……什么都没发生？**对的**！程序进了 `main`，立刻就 `return 0` 退出了。我们接下来一步步让它"活"起来。
|
||
|
||
---
|
||
|
||
## 2. 步骤 1：变出一个空窗口
|
||
|
||
### 🤔 先想一下
|
||
- 一个窗口至少要告诉电脑哪些信息？（提示：长什么样、叫什么）
|
||
- 程序跑完 `main` 就结束了——那窗口怎么能"一直待着"呢？
|
||
|
||
### ✏️ 在 `main` 里加这 3 件事
|
||
|
||
**(1) 创建窗口对象**：替换掉 `// TODO（步骤 1）：在这里创建一个窗口对象 window` 那一行：
|
||
|
||
```cpp
|
||
Fl_Window *window = new Fl_Window(400, 300, "抽卡世界");
|
||
```
|
||
|
||
读法：用 `new` "变出" 一个 `Fl_Window`，宽 400、高 300，标题叫 "抽卡世界"。`window` 是它的名字。
|
||
|
||
**(2) 显示窗口**：替换掉 `// TODO（步骤 1）：告诉窗口"控件加完了"…` 那一行：
|
||
|
||
```cpp
|
||
window->end();
|
||
window->show();
|
||
```
|
||
|
||
读法：`->` 念 "的"。`window` 的 `end()` 表示"控件加完啦"，`window` 的 `show()` 是"露面"。
|
||
|
||
**(3) 让程序"待住"不退出**：把最后的 `return 0;` 改成：
|
||
|
||
```cpp
|
||
return Fl::run();
|
||
```
|
||
|
||
`Fl::run()` 就是那个不下班的保安——它会卡在这里，直到你关闭窗口才返回。
|
||
|
||
### ▶️ 编译运行
|
||
|
||
```bash
|
||
cmake --build build && ./build/gacha1
|
||
```
|
||
|
||
### ✅ 检查点 2
|
||
- [ ] 屏幕上出现一个 400×300 的空白窗口
|
||
- [ ] 窗口标题栏写着 "抽卡世界"
|
||
- [ ] 关闭窗口，程序退出，终端回到提示符
|
||
|
||
🎉 你的第一个 GUI 程序！但里面空空的，下一步贴张便利贴上去。
|
||
|
||
> ❓ 如果没出来：是不是忘了把 `return 0;` 改成 `return Fl::run();`？
|
||
|
||
---
|
||
|
||
## 3. 步骤 2：在窗口里贴一张便利贴
|
||
|
||
### 🤔 先想一下
|
||
- 贴在窗口里的文字，应该放在窗口的哪个位置？怎么告诉电脑这个位置？
|
||
- 文字框本身也是一个"东西"，那它要不要 `new` 出来？
|
||
|
||
### ✏️ 改两个地方
|
||
|
||
**(1) 顶上的 include 区**：把 `// TODO（步骤 2）`：还需要再 `#include 一个头文件` 这行替换成：
|
||
|
||
```cpp
|
||
#include <FL/Fl_Box.H>
|
||
```
|
||
|
||
便利贴在 FLTK 里叫 `Fl_Box`，要先告诉编译器去哪儿找。
|
||
|
||
**(2) 在 `window->end();` **之前**插入这一行**（替换掉对应的 TODO）：
|
||
|
||
```cpp
|
||
Fl_Box *box = new Fl_Box(50, 100, 300, 100, "欢迎来到抽卡世界！");
|
||
```
|
||
|
||
读法：变出一个 `Fl_Box`，位置 (50, 100)，宽 300、高 100，文字是 "欢迎来到抽卡世界！"。
|
||
|
||
### 📐 坐标到底怎么数？
|
||
|
||
FLTK 的坐标系——和你以前数学课上的不一样，Y 是 **向下** 增大的：
|
||
|
||
```
|
||
(0,0) ──────────── X →
|
||
│
|
||
│ (50,100)
|
||
│ ↓
|
||
│ ┌──────────┐
|
||
│ │ 便利贴 │ 宽 300
|
||
│ │ │ 高 100
|
||
│ └──────────┘
|
||
Y
|
||
↓
|
||
```
|
||
|
||
- X 从左到右增大
|
||
- Y 从上到下增大
|
||
- 原点 (0,0) 在窗口左上角
|
||
|
||
### ▶️ 编译运行
|
||
|
||
```bash
|
||
cmake --build build && ./build/gacha1
|
||
```
|
||
|
||
### ✅ 检查点 3
|
||
- [ ] 窗口里出现了 "欢迎来到抽卡世界！"
|
||
- [ ] 文字大概在窗口中间偏上的位置
|
||
|
||
> ❓ 文字看起来很小？没事，下一步搞定字号。
|
||
|
||
---
|
||
|
||
## 4. 步骤 3：让字大起来
|
||
|
||
### ✏️ 在 `new Fl_Box(...)` 那行的**下一行**加：
|
||
|
||
```cpp
|
||
box->labelsize(24);
|
||
```
|
||
|
||
意思是：`box` 的 `labelsize`（标签字号）设为 24。
|
||
|
||
### ▶️ 编译运行
|
||
|
||
```bash
|
||
cmake --build build && ./build/gacha1
|
||
```
|
||
|
||
### ✅ 检查点 4
|
||
- [ ] 文字明显变大了
|
||
- [ ] 整个窗口看起来终于像个迎宾画面了
|
||
|
||
🎉 **第 1 课通关！** 你刚刚自己写出了一个完整 GUI 程序。
|
||
|
||
---
|
||
|
||
## 5. 玩一玩：改一改看会发生什么
|
||
|
||
每改一个，记得 **保存 → 编译 → 运行**：
|
||
|
||
1. 把 `400, 300` 改成 `600, 400`。窗口变大了吗？
|
||
2. 把 `labelsize(24)` 改成 `36`、`12`、`80`。极端值会怎样？
|
||
3. 把 `(50, 100, 300, 100)` 里的 `50` 改成 `0`。文字跑哪儿去了？
|
||
4. 把窗口标题 `"抽卡世界"` 改成你自己起的名字。
|
||
5. **思考题**：怎么让文字 **正好居中**？窗口宽 400，文字框宽 300——X 应该填几？
|
||
|
||
> 💡 想到答案再往下看：宽 400 减宽 300 等于 100，两边各留 50，所以 X = 50。本课的代码刚好就是居中的。
|
||
|
||
---
|
||
|
||
## 6. 课后挑战（选做）
|
||
|
||
完成以上后还想多玩？挑一个：
|
||
|
||
- **A. 双便利贴**：在窗口的上、下半部分各放一个 `Fl_Box`，写不同的话。
|
||
- **B. 给画纸刷色**：在 `window->end()` 前面加 `window->color(fl_rgb_color(255, 240, 200));`，看看效果。（需要 `#include <FL/fl_draw.H>` 或加在已有头文件里编译试一下，错了就回滚——这就是学编程）
|
||
- **C. 思考题**：以前 `std::cout` 一打印就显示，再换一行又能继续打印。GUI 的 `Fl_Box` 行为有什么不一样？
|
||
|
||
---
|
||
|
||
## 7. 卡住了？常见小问题
|
||
|
||
| 现象 | 多半是 |
|
||
|------|-------|
|
||
| 窗口闪一下就消失 | `return 0;` 没改成 `return Fl::run();` |
|
||
| 编译报 "找不到 `Fl_Box`" | 忘了 `#include <FL/Fl_Box.H>` |
|
||
| 编译报 "找不到 `FL/Fl.H`" | FLTK 没装好；Mac 跑一下 `brew install fltk cmake` |
|
||
| 窗口出来但是全黑/全空白 | `window->show()` 是不是写在 `window->end()` 前面了？顺序反了 |
|
||
| 中文变方框 | 文件没存成 UTF-8 编码 |
|
||
|
||
---
|
||
|
||
## 8. 偷看老师答案
|
||
|
||
写不出来、或者想对一下？
|
||
|
||
```bash
|
||
cmake -B build -DLESSON=1 -DUSE_SOLUTION=ON
|
||
cmake --build build && ./build/gacha1
|
||
```
|
||
|
||
源文件路径：`solutions/lesson_gui_1.cpp`。
|
||
**但请尽量自己先动手——卡住 5 分钟以上再看**。
|
||
|
||
---
|
||
|
||
## 9. 下一课预告
|
||
|
||
第 2 课：加一个 **按钮**，点一下让窗口里的字变样子。你将第一次见到"用户操作 → 程序响应"的 GUI 核心套路：**回调函数**。
|
||
|
||
> 📝 学完记得在 `学习进度与状态-GUI.md` 里把第 1 课打勾。
|
||
|
||
**下一课**：`第02课-按钮与回调.md`
|