# 第 1 课：GUI 你好窗口

**本课目标**：用 FLTK 创建第一个 GUI 程序——一个窗口，里面写着欢迎语。理解 GUI 程序和命令行程序的不同。

**复习**：你会用 `std::cout` 在命令行输出文字。本课把"输出"搬到**窗口**里。

---

## 1. 这一课要搞懂什么

### 命令行 vs GUI

| | 命令行程序 | GUI 程序 |
|---|---|---|
| 样子 | 黑底白字 | 有窗口、按钮 |
| 运行方式 | 一口气跑完 | 一直等用户操作 |
| 输出 | `cout` 打印到终端 | 显示在窗口里的控件上 |
| 用户操作 | 键盘输入 | 鼠标点击、键盘 |

### 本课三个"新朋友"

| FLTK 类 | 比喻（小朋友版） | 作用 |
|---------|-----------------|------|
| `Fl_Window` | 画纸 | 程序的窗口框架 |
| `Fl_Box` | 便利贴 | 在窗口上显示文字 |
| `Fl::run()` | 不休息的保安 | 让窗口一直显示，等用户操作 |

### 你还认识一个老朋友的变身

- `new`：以前你可能没见过。在 FLTK 里，控件用 `new` 创建。可以简单理解为"变出一个控件来"。

---

## 2. 第一个 GUI 程序

保存为 `lesson_gui_1.cpp`：

```cpp
#include <FL/Fl.H>
#include <FL/Fl_Window.H>
#include <FL/Fl_Box.H>

int main() {
    // 创建窗口：宽 400，高 300，标题"抽卡世界"
    Fl_Window *window = new Fl_Window(400, 300, "抽卡世界");

    // 在窗口上放一个文字标签：位置(50,100)，宽300，高100
    Fl_Box *box = new Fl_Box(50, 100, 300, 100, "欢迎来到抽卡世界！");
    box->labelsize(24);  // 字号 24

    // 结束添加控件
    window->end();
    // 显示窗口
    window->show();
    // 进入事件循环（让窗口一直显示）
    return Fl::run();
}
```

配套 `CMakeLists.txt`：

```cmake
cmake_minimum_required(VERSION 3.14)
project(gacha1 LANGUAGES CXX)

set(CMAKE_CXX_STANDARD 17)

if(MSVC)
    add_compile_options("/utf-8")
endif()

find_package(FLTK CONFIG REQUIRED)

add_executable(gacha1 lesson_gui_1.cpp)
target_link_libraries(gacha1 PRIVATE fltk)
```

---

## 3. 代码逐行解释

```cpp
#include <FL/Fl.H>         // FLTK 核心
#include <FL/Fl_Window.H>  // 窗口
#include <FL/Fl_Box.H>     // 文字标签
```

以前的 `#include <iostream>` 是请命令行工具，这三个 `#include <FL/...>` 是请窗口工具。

```cpp
Fl_Window *window = new Fl_Window(400, 300, "抽卡世界");
```

- `Fl_Window` = 窗口
- `400, 300` = 宽 400 像素，高 300 像素
- `"抽卡世界"` = 窗口标题栏上显示的字
- `new` = 创建一个窗口（和以前 `int x = 5` 不同，窗口是"对象"）
- `*` = 指针（先记：FLTK 创建的控件都用 `*`）

```cpp
Fl_Box *box = new Fl_Box(50, 100, 300, 100, "欢迎来到抽卡世界！");
```

- `50, 100` = 文字在窗口中的位置：从左边数 50 像素，从上边数 100 像素
- `300, 100` = 文字区域的宽 300，高 100
- 最后一个参数 = 显示的文字内容

```cpp
box->labelsize(24);
```

`->` 读作"的"：`box` 的 `labelsize` 设为 24（字号）。

```cpp
window->end();   // 告诉窗口：控件加完了
window->show();  // 让窗口显示出来
return Fl::run(); // 进入"等待模式"，窗口一直显示直到用户关闭
```

---

## 4. 编译和运行

**Mac**：
```bash
cmake -B build && cmake --build build && ./build/gacha1
```

**Windows**（VS + vcpkg）：
```bash
cmake -B build -DCMAKE_TOOLCHAIN_FILE=C:/vcpkg/scripts/buildsystems/vcpkg.cmake && cmake --build build --config Release && build\Release\gacha1.exe
```

运行后应看到一个白色窗口，中间写着"欢迎来到抽卡世界！"。

---

## 5. 坐标系统

FLTK 窗口的坐标系：

```
(0,0) ──────────── X →
  │
  │    (50,100)
  │      ↓
  │   ┌──────────┐
  │   │  文字区域  │  宽 300
  │   │          │  高 100
  │   └──────────┘
  Y
  ↓
```

- X 从左到右增大
- Y 从上到下增大
- 原点 (0,0) 在左上角

---

## 6. 本课课堂小练习

1. 把窗口标题 `"抽卡世界"` 改成你自己起的名字。
2. 把欢迎语改成你喜欢的句子。
3. 试试把窗口改大（比如 600×400），把 `Box` 的位置也调整一下，让文字居中。

---

## 7. 本课课后作业（选做）

- 把 `labelsize(24)` 改成 36、12、8，看文字大小变化。试试极端值，看会发生什么。
- 在窗口上放**两个** `Fl_Box`，一个在上半部分，一个在下半部分，显示不同的文字。
- 思考题：和以前 `std::cout` 输出文字相比，GUI 方式有什么不同？（一个提示：GUI 的文字可以"一直显示"，不用 `\n` 刷屏。）

---

## 8. 常见小问题

- **窗口一闪就消失**：检查有没有 `return Fl::run();`，不是 `return 0;`。
- **编译报错找不到 FL**：检查 `CMakeLists.txt` 里的 `find_package(FLTK CONFIG REQUIRED)` 是否正确，以及 FLTK 是否已安装。
- **中文乱码**：确保源文件保存为 UTF-8 编码。Mac clang++ 一般默认支持。
- **窗口出来了但是空的**：检查 `window->show()` 和 `window->end()` 的顺序。`show()` 必须在 `end()` 之后（本课代码顺序已正确）。

---

## 9. 下一课预告

第 2 课学**按钮和回调**：在窗口上放一个"抽卡"按钮，点一下，文字会变——从"只看不动"到"能交互"。

---

*学完请在 `学习进度与状态-GUI.md` 里更新第 1 课的状态。*

**下一课文档**：`第02课-按钮与回调.md`