FTXUI::Dom 模块

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);