西宁做网站的工作室网站建设上传图片不显示
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)
官方预定颜色查看 这里有官方预定的大部分颜色表