xsl/chouka

Fork 0

Files

T

xsl a169ceb263 save code

2026-05-16 11:09:02 +08:00

5.4 KiB

Raw Blame History

第 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：

#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_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. 代码逐行解释

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

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

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

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

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

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

box->labelsize(24);

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

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

4. 编译和运行

Mac：

cmake -B build && cmake --build build && ./build/gacha1

Windows（VS + vcpkg）：

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. 本课课堂小练习

把窗口标题 "抽卡世界" 改成你自己起的名字。
把欢迎语改成你喜欢的句子。
试试把窗口改大（比如 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

5.4 KiB Raw Blame History Unescape Escape