DOM 模块定义了分层的 FTXUI::Element 树，可用于构建复杂的终端界面，支持响应终端尺寸变化。
namespace ftxui {
...
// 定义文档 定义布局盒子
Element document = vbox({
// 设置文本 设置加粗 设置文本颜色
text("The window") | bold | color(Color::Blue),
// 设置进度条
gauge(0.5)
// 设置文本
text("The footer")
});
// 添加边框 调用 ftxui::border 修饰函数
document = border(document);
// 添加边框 使用管道操作符
document = document | border;
// 添加边框 使用 |= 运算符
document |= border;
...
}
Text
显示一个文本
text("你好 我是一段文本");
显示效果:
你好我是一段文本
vtext
与 Text 功能相同, 但文本是垂直显示
vtext("HELLO");
显示效果:
H
E
L
L
O
paragraph
类似 Text 用于显示大段文本，自动换行，单行字数取决于容器宽度
paragraph("A very long text");
![[paragraph.gif]]
其它方案
namespace ftxui {
Element paragraph(std::string text);
Element paragraphAlignLeft(std::string text);
Element paragraphAlignRight(std::string text);
Element paragraphAlignCenter(std::string text);
Element paragraphAlignJustify(std::string text);
}
border
在元素周围添加一个边框
border(text("The element"))
显示效果:
┌───────────┐
│The element│
└───────────┘
管道操作符用法:
text("The element") | border
{: .prompt-tip }
其它方案
namespace ftxui {
Element border(Element);
Element borderLight(Element);
Element borderHeavy(Element);
Element borderDouble(Element);
Element borderRounded(Element);
Element borderEmpty(Element);
Decorator borderStyled(BorderStyle);
Decorator borderWith(Pixel);
}
window
Window 作用和 border 相同, 但在边框上有一个额外的标题，就像窗口标题一样
window("The window", text("The element"))
显示效果:
┌The window─┐
│The element│
└───────────┘
separator
分割线, 用于显示垂直或水平分割线, 将容器的内容一分为二
border(
hbox({
text("Left"),
separator(),
text("Right")
})
)
显示效果:
┌────┬─────┐
│left│right│
└────┴─────┘
其它方案
namespace ftxui {
Element separator(void);
Element separatorLight();
Element separatorHeavy();
Element separatorDouble();
Element separatorEmpty();
Element separatorStyled(BorderStyle);
Element separator(Pixel);
Element separatorCharacter(std::string);
Element separatorHSelector(float left,
float right,
Color background,
Color foreground);
Element separatorVSelector(float up,
float down,
Color background,
Color foreground);
}
gauge
用于显示一个进度条 0.0~1.0
border(gauge(0.5))
显示效果:
┌────────────────────────────────────────────────────────────────────────────┐
│██████████████████████████████████████ │
└────────────────────────────────────────────────────────────────────────────┘
其它方案:
namespace {
Element gauge(float ratio);
Element gaugeLeft(float ratio);
Element gaugeRight(float ratio);
Element gaugeUp(float ratio);
Element gaugeDown(float ratio);
Element gaugeDirection(float ratio, GaugeDirection);
}
graph
显示动态图表，需配合 GraphFunction 回调
Element graph(GraphFunction);
Colors
用于设置颜色 彩色文本 彩色背景
Decorator color(Color);
Decorator bgcolor(Color);
支持以下几种颜色方案
Palette16
- Default
- Black
- GrayDark
- GrayLight
- White
- Blue
- BlueLight
- Cyan
- CyanLight
- Green
- GreenLight
- Magenta
- MagentaLight
- Red
- RedLight
- Yellow
- YellowLight
text("Blue foreground") | color(Color::Blue);
text("Blue background") | bgcolor(Color::Blue);
text("Black on white") | color(Color::Black) | bgcolor(Color::White);
Palette256
text("HotPink") | color(Color::HotPink);
TrueColor
在支持 trueColor 的终端上,可以直接使用 24 位 RGB 色彩空间:
使用下面的构造函数指定颜色的 RGB 或 HSV 值:
有两个构造函数:
ftxui::Color::RGB(uint8_t red, uint8_t green, uint8_t blue);
ftxui::Color::HSV(uint8_t hue, uint8_t saturation, uint8_t value);
LinearGradient
渐变色，可以用于前景/背景色
Decorator color(const LinearGradient&);
Decorator bgcolor(const LinearGradient&);
ftxui::LinearGradient由一个角度的程度和颜色停止列表来定义。
auto gradient = LinearGradient()
.Angle(45)
.AddStop(0.0, Color::Red)
.AddStop(0.5, Color::Green)
.AddStop(1.0, Color::Blue);
也可以使用简化的构造函数:
LinearGradient(Color::Red, Color::Blue);
LinearGradient(45, Color::Red, Color::Blue);
Style
除了彩色文字和彩色背景。许多终端支持文本效果,例如:bold,italic,dim,underlined,inverted,blink. . .
Element bold(Element);
Element italic(Element);
Element dim(Element);
Element inverted(Element);
Element underlined(Element);
Element underlinedDouble(Element);
Element strikethrough(Element);
Element blink(Element);
Decorator color(Color);
Decorator bgcolor(Color);
Decorator colorgrad(LinearGradient);
Decorator bgcolorgrad(LinearGradient);
显示效果:
![[Style.png]]
要使用这些效果,只需将元素与所需的效果包装:
underlined(bold(text("This text is bold and underlined")))
或者,使用管道操作员将其链在元件上:
text("This text is bold") | bold | underlined
Layout
允许元素通过以下方式排列:
- 水平
ftxui::hbox - 垂直
ftxui::vbox - 网格
ftxui::gridbox. . .
代码示例: ftxui::hbox ftxui::vbox ftxui::filler
![[Pasted image 20250609165748.png]]
代码示例: ftxui::gridbox
![[Pasted image 20250609165841.png]]
代码示例: ftxui::flexbox
![[Pasted image 20250609165920.png]]
元素也可以使用 ftxui::flex 实现自适应
hbox({
text("left") | border ,
text("middle") | border | flex,
text("right") | border,
});
显示效果:
┌────┐┌─────────────────────────────────────────────────────┐┌─────┐
│left││middle ││right│
└────┘└─────────────────────────────────────────────────────┘└─────┘
hbox({
text("left") | border ,
text("middle") | border | flex,
text("right") | border | flex,
});
显示效果:
┌────┐┌───────────────────────────────┐┌───────────────────────────────┐
│left││middle ││right │
└────┘└───────────────────────────────┘└───────────────────────────────┘
Table
用于实现表格 让数据更加整洁
gridbox({
{ text("ID") | border, text("Name") | border, text("Age") | border },
{ text("1") | border, text("Alice") | border, text("23") | border },
{ text("2") | border, text("Bob") | border, text("30") | border },
});
Canvas
用于绘制矢量图形
auto c = Canvas(100, 100);
c.DrawPointLine(10, 10, 80, 10, Color::Red);
auto element = canvas(c);
