save code
This commit is contained in:
Feast
+237
-155
@@ -1,99 +1,223 @@
|
||||
# 第 4 课：十连抽
|
||||
|
||||
**本课目标**：加一个"十连抽"按钮，用 `for` 循环一口气抽 10 次，所有结果一起显示。学会在 GUI 里用循环 + 字符串拼接。
|
||||
|
||||
**复习**：第 3 课单抽；命令行时期你已掌握 `for` 循环和 `string`。
|
||||
> **本课目标**：再加一个 "十连抽" 按钮，用 `for` 循环一口气抽 10 次，全部结果一起显示。学会在 GUI 里用循环 + 字符串拼接。
|
||||
>
|
||||
> **预计时间**：40 分钟
|
||||
>
|
||||
> **学完之后**：你能写出 "一个动作做很多次" 的 GUI 回调，并把多行结果拼成一个字符串显示。
|
||||
|
||||
---
|
||||
|
||||
## 1. 这一课要搞懂什么
|
||||
## 0. 上课前先理理
|
||||
|
||||
### 命令行 vs GUI 的多抽
|
||||
|
||||
**命令行时代（第 6 课）**：
|
||||
**命令行**（你以前的代码）：
|
||||
```cpp
|
||||
for (int i = 1; i <= 10; i++) {
|
||||
int r = rand() % 100;
|
||||
cout << "第" << i << "抽：";
|
||||
// ... 判断稀有度 ...
|
||||
cout << "第" << i << "抽：" << ... << "\n";
|
||||
}
|
||||
```
|
||||
每轮 `cout` 一行，10 行自动排队显示。
|
||||
每轮 `cout` 一行，10 行自动排队。
|
||||
|
||||
**GUI**：你不能在循环里反复 `result_box->label(...)`——每次 `label` 都会把上一次的内容**完全覆盖**，最后只会显示最后一抽。
|
||||
|
||||
### 💡 GUI 的套路：先攒后贴
|
||||
|
||||
**GUI 时代（本课）**：
|
||||
```cpp
|
||||
for (int i = 1; i <= 10; i++) {
|
||||
int r = rand() % 100;
|
||||
// 不能直接 "cout" → 要把结果攒起来，最后一次性 label
|
||||
}
|
||||
```
|
||||
GUi 的 `label()` 每次都会覆盖旧内容。所以需要**先把 10 行拼成一个大字符串，再一次性显示**。
|
||||
|
||||
### 核心技巧：字符串拼接
|
||||
|
||||
```cpp
|
||||
std::string result = ""; // 空字符串
|
||||
result += "第1抽：普通\n"; // 追加一行
|
||||
result += "第2抽：稀有\n"; // 再追加
|
||||
// ... 最后 label(result.c_str())
|
||||
循环 10 次：
|
||||
把这一抽的结果用 += 拼到一个大字符串后面
|
||||
循环结束后：
|
||||
把大字符串一次性贴到 label
|
||||
```
|
||||
|
||||
`+=` 像胶水，把一段段文字粘在一起。`\n` 是换行。
|
||||
像写信：先在纸上写完 10 行再寄出，而不是每写一行就寄一封。
|
||||
|
||||
### 这一课认识 2 个新朋友
|
||||
|
||||
| 名字 | 干什么 |
|
||||
|-------------------|---------------------------------------------|
|
||||
| `std::string` 拼接 | 用 `+` 和 `+=` 把多段字符串粘起来 |
|
||||
| `std::to_string` | 把数字转成字符串（拼接时用） |
|
||||
| `align()` | 让多行文字左上对齐（看起来像列表） |
|
||||
|
||||
---
|
||||
|
||||
## 2. 程序结构
|
||||
## 1. 起步：先编译看上一课的状态
|
||||
|
||||
- 保留"单抽"按钮（第 3 课功能）
|
||||
- 新增"十连抽"按钮 → 调用新的回调函数 `draw_ten_callback`
|
||||
- 两个按钮共用一个结果框
|
||||
骨架已经是第 3 课的样子。先编译一次：
|
||||
|
||||
## 3. 完整示例程序
|
||||
```bash
|
||||
cmake -B build -DLESSON=4
|
||||
cmake --build build && ./build/gacha4
|
||||
```
|
||||
|
||||
保存为 `lesson_gui_4.cpp`：
|
||||
### ✅ 检查点 1
|
||||
- [ ] 程序行为和第 3 课一模一样：单抽按钮工作正常
|
||||
- [ ] 标题是 "抽卡世界 - 第3课"（一会儿要改）
|
||||
|
||||
> 💡 接下来 4 步：先**重新布局**腾出地方，再加按钮，再写循环回调。
|
||||
|
||||
---
|
||||
|
||||
## 2. 步骤 1：重新布局——为十连抽腾出空间
|
||||
|
||||
十连抽的结果有 10 行，原来的 80 像素高的 `result_box` 装不下。先把控件挪一挪。
|
||||
|
||||
### 🤔 先想一下
|
||||
- 窗口要加多高才能装得下 10 行字 + 两个按钮 + 一行信息？
|
||||
- 把两个按钮一左一右排，单抽按钮的 X 应该是多少？
|
||||
|
||||
### ✏️ 改 5 处坐标
|
||||
|
||||
**(1) 窗口**：
|
||||
```cpp
|
||||
Fl_Window *window = new Fl_Window(420, 480, "抽卡世界 - 第4课");
|
||||
```
|
||||
（宽 420，高 480，标题改了）
|
||||
|
||||
**(2) 单抽按钮挪到左边**：
|
||||
```cpp
|
||||
Fl_Button *btn = new Fl_Button(50, 20, 140, 50, "抽一张");
|
||||
```
|
||||
|
||||
**(3) `result_box` 改成大区域**（替换原来那行）：
|
||||
```cpp
|
||||
result_box = new Fl_Box(30, 120, 360, 330, "点击按钮开始抽卡！");
|
||||
result_box->labelsize(20);
|
||||
```
|
||||
（去掉 `labelfont(FL_BOLD)` 那行）
|
||||
|
||||
**(4) `info_box` 挪到 result_box 上方**：
|
||||
```cpp
|
||||
info_box = new Fl_Box(30, 80, 360, 30, "");
|
||||
info_box->labelsize(14);
|
||||
```
|
||||
|
||||
### ▶️ 编译运行
|
||||
|
||||
### ✅ 检查点 2
|
||||
- [ ] 窗口明显变高变宽
|
||||
- [ ] 单抽按钮在左侧
|
||||
- [ ] 中间一大块空白等着放结果
|
||||
- [ ] 点单抽按钮还能用
|
||||
|
||||
---
|
||||
|
||||
## 3. 步骤 2：加十连抽按钮（先连个空回调）
|
||||
|
||||
### ✏️ 改 2 处
|
||||
|
||||
**(1) 在所有函数之外（紧挨 `draw_one_callback` 下面）加一个空回调**（替换对应 TODO）：
|
||||
|
||||
```cpp
|
||||
#include <FL/Fl.H>
|
||||
#include <FL/Fl_Window.H>
|
||||
#include <FL/Fl_Button.H>
|
||||
#include <FL/Fl_Box.H>
|
||||
#include <cstdlib>
|
||||
#include <ctime>
|
||||
#include <string> // for std::string
|
||||
|
||||
// 全局变量
|
||||
Fl_Box *result_box;
|
||||
Fl_Box *info_box;
|
||||
|
||||
// 单抽回调
|
||||
void draw_one_callback(Fl_Widget *w, void *data) {
|
||||
int r = std::rand() % 100;
|
||||
|
||||
char info[50];
|
||||
std::sprintf(info, "单抽 | 点数：%d", r);
|
||||
info_box->label(info);
|
||||
|
||||
if (r < 70) {
|
||||
result_box->label("☆ 普通卡 ☆");
|
||||
result_box->labelcolor(fl_rgb_color(128, 128, 128));
|
||||
} else if (r < 95) {
|
||||
result_box->label("★ 稀有卡 ★");
|
||||
result_box->labelcolor(FL_BLUE);
|
||||
} else {
|
||||
result_box->label("★★★ 超稀有卡！！ ★★★");
|
||||
result_box->labelcolor(FL_RED);
|
||||
}
|
||||
}
|
||||
|
||||
// 十连抽回调
|
||||
void draw_ten_callback(Fl_Widget *w, void *data) {
|
||||
std::string all = ""; // 攒结果的字符串
|
||||
int rare_count = 0; // 统计稀有数量
|
||||
result_box->label("十连抽按钮通了！");
|
||||
result_box->labelcolor(FL_BLACK);
|
||||
}
|
||||
```
|
||||
|
||||
**(2) 在 `main` 里、单抽按钮下面加十连抽按钮**（替换对应 TODO）：
|
||||
|
||||
```cpp
|
||||
Fl_Button *btn10 = new Fl_Button(230, 20, 140, 50, "十连抽");
|
||||
btn10->labelsize(18);
|
||||
btn10->callback(draw_ten_callback);
|
||||
```
|
||||
|
||||
### ▶️ 编译运行
|
||||
|
||||
### ✅ 检查点 3
|
||||
- [ ] 窗口顶部有两个按钮
|
||||
- [ ] 点十连抽 → 文字变 "十连抽按钮通了！"（虽然还没真的抽 10 次）
|
||||
- [ ] 点单抽 → 跟以前一样正常工作
|
||||
|
||||
🎉 这是 **GUI 开发的好习惯**：先把按钮接通，再往回调里塞真正的逻辑。
|
||||
|
||||
---
|
||||
|
||||
## 4. 步骤 3：用 `for` 循环 + 字符串拼接 ⭐核心⭐
|
||||
|
||||
现在把 `draw_ten_callback` 改成真正的十连抽。
|
||||
|
||||
### 🤔 先想一下
|
||||
- 你要把 10 行结果拼成一个长字符串，怎么开头？怎么换行？
|
||||
- 第 `i` 抽的开头要拼 "第3抽：" 这种，`i` 是 `int`，怎么变成字符串？
|
||||
|
||||
### ✏️ 改 2 处
|
||||
|
||||
**(1) 顶上加 include**（替换对应 TODO）：
|
||||
|
||||
```cpp
|
||||
#include <string>
|
||||
```
|
||||
|
||||
**(2) 把 `draw_ten_callback` 函数体整体替换成**：
|
||||
|
||||
```cpp
|
||||
void draw_ten_callback(Fl_Widget *w, void *data) {
|
||||
std::string all = ""; // 攒结果的大字符串
|
||||
|
||||
for (int i = 1; i <= 10; i++) {
|
||||
int r = std::rand() % 100;
|
||||
all += "第" + std::to_string(i) + "抽：";
|
||||
|
||||
if (r < 70) {
|
||||
all += "普通";
|
||||
} else if (r < 95) {
|
||||
all += "★稀有★";
|
||||
} else {
|
||||
all += "★★★超稀有★★★";
|
||||
}
|
||||
all += "\n"; // 这一抽的尾巴换一行
|
||||
}
|
||||
|
||||
result_box->labelsize(16);
|
||||
result_box->label(all.c_str()); // .c_str() 把 std::string 转成 const char*
|
||||
result_box->labelcolor(FL_BLACK);
|
||||
}
|
||||
```
|
||||
|
||||
### 💡 新工具速记
|
||||
|
||||
| 写法 | 干什么 |
|
||||
|------|--------|
|
||||
| `std::to_string(i)` | 把整数 `i` 变字符串 |
|
||||
| `s += "..."` | 在字符串末尾拼一段（像粘胶水） |
|
||||
| `"\n"` | 字符串里的换行符 |
|
||||
| `s.c_str()` | `std::string` → C 字符串（FLTK 需要这种） |
|
||||
|
||||
### ▶️ 编译运行
|
||||
|
||||
### ✅ 检查点 4
|
||||
- [ ] 点十连抽 → 看到 10 行 "第N抽：xxx"
|
||||
- [ ] 但是文字**居中显示**，结果看起来挤一起或者只显示中间几行 —— 别急，下一步修
|
||||
|
||||
---
|
||||
|
||||
## 5. 步骤 4：让十连结果左上对齐 + 加统计
|
||||
|
||||
### ✏️ 改 2 处
|
||||
|
||||
**(1) 在 `main` 里、`result_box` 创建之后**加一行（替换对应 TODO）：
|
||||
|
||||
```cpp
|
||||
result_box->align(FL_ALIGN_TOP | FL_ALIGN_LEFT);
|
||||
```
|
||||
|
||||
`|` 表示"同时用这两个"。
|
||||
|
||||
**(2) 在 `draw_ten_callback` 里加稀有度计数**。改进版函数体（替换上一步的 `draw_ten_callback`）：
|
||||
|
||||
```cpp
|
||||
void draw_ten_callback(Fl_Widget *w, void *data) {
|
||||
std::string all = "";
|
||||
int rare_count = 0;
|
||||
int super_count = 0;
|
||||
|
||||
for (int i = 1; i <= 10; i++) {
|
||||
int r = std::rand() % 100;
|
||||
|
||||
all += "第" + std::to_string(i) + "抽：";
|
||||
|
||||
if (r < 70) {
|
||||
@@ -105,16 +229,14 @@ void draw_ten_callback(Fl_Widget *w, void *data) {
|
||||
all += "★★★超稀有★★★";
|
||||
super_count++;
|
||||
}
|
||||
|
||||
all += "\n"; // 换行
|
||||
all += "\n";
|
||||
}
|
||||
|
||||
// 用 sprintf 做统计信息
|
||||
// 在 info_box 上显示统计
|
||||
char stats[100];
|
||||
std::sprintf(stats, "十连抽结果 | 稀有：%d 超稀有：%d",
|
||||
rare_count, super_count);
|
||||
info_box->label(stats);
|
||||
// 统计信息变颜色：有超稀有时红色，否则蓝色
|
||||
if (super_count > 0) {
|
||||
info_box->labelcolor(FL_RED);
|
||||
} else if (rare_count > 0) {
|
||||
@@ -123,105 +245,65 @@ void draw_ten_callback(Fl_Widget *w, void *data) {
|
||||
info_box->labelcolor(fl_rgb_color(128, 128, 128));
|
||||
}
|
||||
|
||||
result_box->labelsize(16); // 十连字多，用小一点的字
|
||||
result_box->labelsize(16);
|
||||
result_box->label(all.c_str());
|
||||
result_box->labelcolor(FL_BLACK);
|
||||
}
|
||||
```
|
||||
|
||||
int main() {
|
||||
std::srand(std::time(nullptr));
|
||||
### ▶️ 编译运行
|
||||
|
||||
// 窗口加高，容纳十连抽的内容
|
||||
Fl_Window *window = new Fl_Window(420, 480, "抽卡世界 - 第4课");
|
||||
### ✅ 检查点 5
|
||||
- [ ] 点十连抽 → 10 行从左上开始整齐排列
|
||||
- [ ] 顶上信息栏出现统计 "十连抽结果 | 稀有：X 超稀有：Y"
|
||||
- [ ] 出超稀有时统计变红色，只出稀有变蓝色，全普通变灰色
|
||||
|
||||
// 单抽按钮
|
||||
Fl_Button *btn1 = new Fl_Button(50, 20, 140, 50, "🎴 抽一张");
|
||||
btn1->labelsize(18);
|
||||
btn1->callback(draw_one_callback);
|
||||
🎉 **第 4 课通关！**
|
||||
|
||||
// 十连抽按钮
|
||||
Fl_Button *btn10 = new Fl_Button(230, 20, 140, 50, "🎴🎴 十连抽");
|
||||
btn10->labelsize(18);
|
||||
btn10->callback(draw_ten_callback);
|
||||
---
|
||||
|
||||
// 信息行
|
||||
info_box = new Fl_Box(30, 80, 360, 30, "");
|
||||
info_box->labelsize(14);
|
||||
## 6. 玩一玩
|
||||
|
||||
// 结果区域（加大高度）
|
||||
result_box = new Fl_Box(30, 120, 360, 330, "点击按钮开始抽卡！");
|
||||
result_box->labelsize(20);
|
||||
result_box->align(FL_ALIGN_TOP | FL_ALIGN_LEFT); // 左上对齐
|
||||
1. 把循环改成 `i <= 5`，变成 "五连抽"，再把按钮文字改成 "五连抽"。
|
||||
2. 在超稀有那行结果前加 `>>> `，让它一眼显眼：`all += ">>> ★★★超稀有★★★ <<<";`。
|
||||
3. 把单抽点完后清空 `info_box` 的统计——在 `draw_one_callback` 末尾加 `info_box->labelcolor(FL_BLACK);`。
|
||||
4. **思考题**：如果不写 `result_box->labelsize(16);`，第 4 步十连结果会怎样？为什么单抽要在自己回调里也 `labelsize(28)`？
|
||||
|
||||
window->end();
|
||||
window->show();
|
||||
return Fl::run();
|
||||
}
|
||||
---
|
||||
|
||||
## 7. 课后挑战（选做）
|
||||
|
||||
- **A. 拆出辅助函数**：单抽和十连抽都在写"判断 `r` 落在哪档"，**封装一个函数** `std::string get_rarity_name(int r)`，让两个回调都调用它。这是旧课程"函数"知识的 GUI 应用！
|
||||
- **B. 自适应窗口**：在 `window->end();` 前加 `window->resizable(window);`，运行后拖窗口边角试试。
|
||||
- **C. 重置按钮**：再加一个按钮 "清空"，点了让 `result_box` 和 `info_box` 都变回初始文字。
|
||||
|
||||
---
|
||||
|
||||
## 8. 卡住了？常见小问题
|
||||
|
||||
| 现象 | 多半是 |
|
||||
|------|-------|
|
||||
| 十连只显示最后一抽 | 在循环里直接 `result_box->label(...)`，应该先拼字符串、循环结束后再 `label` |
|
||||
| 编译报 `to_string` 未声明 | 忘了 `#include <string>` |
|
||||
| 编译报 `c_str()` 未声明 | 那个变量不是 `std::string`（可能写成了 `char[]`） |
|
||||
| 多行文字挤一起看不清 | `result_box->align(FL_ALIGN_TOP | FL_ALIGN_LEFT)` 没加 |
|
||||
| 结果显示一半被切掉 | `result_box` 不够高，或 `labelsize` 太大 |
|
||||
|
||||
---
|
||||
|
||||
## 9. 偷看老师答案
|
||||
|
||||
```bash
|
||||
cmake -B build -DLESSON=4 -DUSE_SOLUTION=ON
|
||||
cmake --build build && ./build/gacha4
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. 新知识点
|
||||
## 10. 下一课预告
|
||||
|
||||
### `std::to_string(i)` —— 数字变字符串
|
||||
第 5 课给每档稀有度配上**具体的卡片名字**（小火龙、冰霜之狼、雷霆神龙……），用**数组**存。还会把界面分区，整齐好看。
|
||||
|
||||
```cpp
|
||||
all += "第" + std::to_string(i) + "抽：";
|
||||
```
|
||||
> 📝 学完记得在 `学习进度与状态-GUI.md` 里把第 4 课打勾。
|
||||
|
||||
`std::to_string(5)` 变成 `"5"`。在旧课程里你用 `cout << i`，GUI 里需要用 `to_string` 把数字变成字符串后才能用 `+` 拼接。
|
||||
|
||||
> 需要 `#include <string>`
|
||||
|
||||
### `align()` —— 文字对齐方式
|
||||
|
||||
```cpp
|
||||
result_box->align(FL_ALIGN_TOP | FL_ALIGN_LEFT);
|
||||
```
|
||||
|
||||
`FL_ALIGN_TOP` = 靠上，`FL_ALIGN_LEFT` = 靠左，`|` 表示"同时用"。
|
||||
|
||||
### `.c_str()` —— 从 `std::string` 到 C 字符串
|
||||
|
||||
```cpp
|
||||
result_box->label(all.c_str());
|
||||
```
|
||||
|
||||
FLTK 的 `label()` 需要 C 风格字符串（`const char*`），`.c_str()` 把 `std::string` 转换过去。
|
||||
|
||||
---
|
||||
|
||||
## 5. 本课课堂小练习
|
||||
|
||||
1. 把十连抽改成"五连抽"：改循环次数，改按钮文字。
|
||||
2. 在十连抽的结果中，把"超稀有"那行用特殊符号标出来（比如加 `>>>` 或 `!!!`）。
|
||||
3. 加一个"重置"按钮，清空结果显示区。
|
||||
|
||||
---
|
||||
|
||||
## 6. 本课课后作业（选做）
|
||||
|
||||
- 让单抽和十连抽**共用**一个判断稀有度的代码，不重复写两遍（提示：写一个函数返回稀有度名字，回调里调用它）。这是旧课程第 8 课"函数"的 GUI 版应用！
|
||||
- 让窗口可以调整大小——试试 `window->resizable(window)` 的效果。
|
||||
- 十连抽结果显示不下怎么办？试试把窗口再调大一点，把 `result_box` 也调大。
|
||||
|
||||
---
|
||||
|
||||
## 7. 常见小问题
|
||||
|
||||
- **十连抽结果只显示最后一行**：检查是否在循环里反复调用了 `result_box->label()`（应该先拼完再统一 label）。
|
||||
- **`to_string` 报错**：需要 `#include <string>`。
|
||||
- **`.c_str()` 不认识的报错**：确认变量是 `std::string` 类型。
|
||||
- **中文在十连结果中乱码**：确认文件保存为 UTF-8。
|
||||
|
||||
---
|
||||
|
||||
## 8. 下一课预告
|
||||
|
||||
第 5 课给每档稀有度配上**具体的卡片名字**（皮卡丘、喷火龙…），用数组存储。还要学会让界面更整齐漂亮。
|
||||
|
||||
---
|
||||
|
||||
*学完请在 `学习进度与状态-GUI.md` 里更新第 4 课的状态。*
|
||||
|
||||
**下一课文档**：`第05课-卡片名字与布局.md`
|
||||
**下一课**：`第05课-卡片名字与布局.md`
|
||||
|
||||
Reference in New Issue
Block a user