当前位置：首页 > news >正文

FTXUI::Screen 模块

news 来源：原创 2025/6/5 16:49:17

FTXUI::Screen

ftxui::Screen 是整个框架的基础所有的布局与 UI 元素都是在其基础上构建的.
它代表了一块屏幕, 你在这个屏幕上所编写的所有布局与组件最终都会被其渲染到终端上.

Example

#include <ftxui/screen/screen.hpp>  // 屏幕
#include <ftxui/screen/color.hpp>   // 颜色void main() {ftxui::Screen Screen = ftxui::Screen::Create(ftxui::Dimension::Full(),   // 宽度占满终端窗口ftxui::Dimension::Fixed(10) // 高度固定10个字符);// 设置变量的值为终端的 (10, 5) 位置上auto& Pixel = Screen.PixelAt(10, 5);// 设置一个字符 XPixel.character = U'X';// 设置字符的前景颜色和背景颜色Pixel.foreground_color = ftxui::Color::Red;Pixel.background_color = ftxui::Color::RGB(0, 255, 0);Pixel.bold = true;  // 设置让这个字符加粗Screen.Print();     // 打印 Pixel 到终端
}

如果坐标超出边界则会返回虚拟像素
注意 Screen 的单位是字符而不是像素

Screen 有两种显示方式

你可以使用 Screen.Print(); 进行打印显示
也可以将其转换成字符串进行输出显示 std::cout << Screen.ToString();

FTXUI::Dimension

ftxui::Dimension 在 FTXUI 中是用来控制组件或者屏幕尺寸的一个结构体
就是上段代码中用来控制字符占据终端宽高的一个功能, Dimension 共有三个函数可以使用

Dimension::Full() 占满整个终端
Dimension::Fit(element) 根据内容自动适配大小
Dimension::Fixed(n) 固定占据多少字符

这些函数需要在 ftxui::Screen::Create() 中设置

ftxui::Screen Screen screen = ftxui::Screen::Create(ftxui::Dimension::Full(),      // 宽度: 占满ftxui::Dimension::Fixed(10)    // 高度: 固定
);

ftxui::Screen::Create 提供了两种重载

ftxui::Screen::Create(尺寸) 宽高相同
ftxui::Screen::Create(宽度, 高度) 分别设置

渲染最终效果

ftxui::Render(Screen, element);
Screen.Print();

ftxui::Pixel

在 FTXUI 中屏幕是由多个 Pixel 组成的二维网格, 每个 Pixel 就代表了一个字符的单元格.
这些单元格包含了字符前景颜色背景颜色闪烁效果字符加粗······

// 设置宽高为 5 字符的屏幕
ftxui::Screen Screen = ftxui::Screen::Create(ftxui::Dimension::Fixed(5),ftxui::Dimension::Fixed(5),
);
// 获取坐标在 3.3 的像素
auto& pixel = Screen.PixelAt(3, 3);
// 设置这个区域显示的字符和颜色
pixel.character = U'X';
pixel.bold = true;
pixel.foreground_color = ftxui::Color::Red;
pixel.background_color = ftxui::Color::RGB(0, 255, 0);
// 打印输出
Screen.Print();

样式字段	效果说明
character	显示的宽字符
foreground_color	前景颜色
background_color	背景颜色
bold	加粗
dim	变暗（低亮度）
italic	斜体（部分终端支持）
underlined	下划线
underlined_double	双下划线
blink	闪烁（可能被终端禁用）
inverted	反色（前景与背景互换）
strikethrough	删除线

PixelAt(x, y) 会执行边界检查并返回指定坐标处像素的引用。如果超出边界，则返回一个虚拟像素引用
{: .prompt-info }

ftxui::Color

ftxui::Color 是用来设置终端文本的前景颜色和背景颜色的核心类, 它有三种颜色设置方案: 预定颜色 256模式 RGB模式

设置终端默认颜色: ftxui::Color::Default
设置系统预定颜色: ftxui::Color::Black
设置256颜色: ftxui::Color::DarkViolet 这里的 DarkViolet 是官方文档中的色码
设置RGB颜色: ftxui::Color::RGB(255, 128, 64)