ftxui / dom

Table of Contents

• text
• vtext
• paragraph
• border
• window
• separator
• gauge
• graph
• Colors
  • Palette16
  • Palette256
  • TrueColor
• LinearGradient
• Style
• Layout
• Table
• Canvas

此模块定义了一组分层的 ftxui::Element。元素管理布局并可以响应终端尺寸变化。请注意以下示例，其中此模块用于创建包含许多操作符的简单布局：

Example 部分提供了一系列示例。

示例：

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
 
...
}

元素列表

所有元素都已包含在内，可以通过包含相应的头文件来访问：

#include <ftxui/dom/elements.hpp>

// Copyright 2020 Arthur Sonzogni. All rights reserved.
// Use of this source code is governed by the MIT license that can be found in
// the LICENSE file.
#ifndef FTXUI_DOM_ELEMENTS_HPP
#define FTXUI_DOM_ELEMENTS_HPP
 
#include <functional>
#include <memory>
 
#include "ftxui/dom/canvas.hpp"
#include "ftxui/dom/direction.hpp"
#include "ftxui/dom/flexbox_config.hpp"
#include "ftxui/dom/linear_gradient.hpp"
#include "ftxui/dom/node.hpp"
#include "ftxui/screen/box.hpp"
#include "ftxui/screen/color.hpp"
#include "ftxui/screen/terminal.hpp"
#include "ftxui/util/ref.hpp"
 
namespace ftxui {
class Node;
using Element = std::shared_ptr<Node>;
using Elements = std::vector<Element>;
using Decorator = std::function<Element(Element)>;
using GraphFunction = std::function<std::vector<int>(int, int)>;
 
/// @brief BorderStyle is an enumeration that represents the different styles
/// of borders that can be applied to elements in the terminal UI.
///
/// BorderStyle is an enumeration that represents the different styles of
/// borders that can be applied to elements in the terminal UI.
/// It is used to define the visual appearance of borders around elements,
/// such as windows, frames, or separators.
/// @ingroup dom
enum BorderStyle {
  LIGHT,
  DASHED,
  HEAVY,
  DOUBLE,
  ROUNDED,
  EMPTY,
};
 
// Pipe elements into decorator togethers.
// For instance the next lines are equivalents:
// -> text("ftxui") | bold | underlined
// -> underlined(bold(text("FTXUI")))
Element operator|(Element, Decorator);
Element& operator|=(Element&, Decorator);
Elements operator|(Elements, Decorator);
Decorator operator|(Decorator, Decorator);
 
// --- Widget ---
Element text(std::string text);
Element vtext(std::string text);
Element separator();
Element separatorLight();
Element separatorDashed();
Element separatorHeavy();
Element separatorDouble();
Element separatorEmpty();
Element separatorStyled(BorderStyle);
Element separator(Pixel);
Element separatorCharacter(std::string);
Element separatorHSelector(float left,
                           float right,
                           Color unselected_color,
                           Color selected_color);
Element separatorVSelector(float up,
                           float down,
                           Color unselected_color,
                           Color selected_color);
Element gauge(float progress);
Element gaugeLeft(float progress);
Element gaugeRight(float progress);
Element gaugeUp(float progress);
Element gaugeDown(float progress);
Element gaugeDirection(float progress, Direction direction);
Element border(Element);
Element borderLight(Element);
Element borderDashed(Element);
Element borderHeavy(Element);
Element borderDouble(Element);
Element borderRounded(Element);
Element borderEmpty(Element);
Decorator borderStyled(BorderStyle);
Decorator borderStyled(BorderStyle, Color);
Decorator borderStyled(Color);
Decorator borderWith(const Pixel&);
Element window(Element title, Element content, BorderStyle border = ROUNDED);
Element spinner(int charset_index, size_t image_index);
Element paragraph(const std::string& text);
Element paragraphAlignLeft(const std::string& text);
Element paragraphAlignRight(const std::string& text);
Element paragraphAlignCenter(const std::string& text);
Element paragraphAlignJustify(const std::string& text);
Element graph(GraphFunction);
Element emptyElement();
Element canvas(ConstRef<Canvas>);
Element canvas(int width, int height, std::function<void(Canvas&)>);
Element canvas(std::function<void(Canvas&)>);
 
// -- Decorator ---
Element bold(Element);
Element dim(Element);
Element italic(Element);
Element inverted(Element);
Element underlined(Element);
Element underlinedDouble(Element);
Element blink(Element);
Element strikethrough(Element);
Decorator color(Color);
Decorator bgcolor(Color);
Decorator color(const LinearGradient&);
Decorator bgcolor(const LinearGradient&);
Element color(Color, Element);
Element bgcolor(Color, Element);
Element color(const LinearGradient&, Element);
Element bgcolor(const LinearGradient&, Element);
Decorator focusPosition(int x, int y);
Decorator focusPositionRelative(float x, float y);
Element automerge(Element child);
Decorator hyperlink(std::string link);
Element hyperlink(std::string link, Element child);
Element selectionStyleReset(Element);
Decorator selectionColor(Color foreground);
Decorator selectionBackgroundColor(Color foreground);
Decorator selectionForegroundColor(Color foreground);
Decorator selectionStyle(std::function<void(Pixel&)> style);
 
// --- Layout is
// Horizontal, Vertical or stacked set of elements.
Element hbox(Elements);
Element vbox(Elements);
Element dbox(Elements);
Element flexbox(Elements, FlexboxConfig config = FlexboxConfig());
Element gridbox(std::vector<Elements> lines);
 
Element hflow(Elements);  // Helper: default flexbox with row direction.
Element vflow(Elements);  // Helper: default flexbox with column direction.
 
// -- Flexibility ---
// Define how to share the remaining space when not all of it is used inside a
// container.
Element flex(Element);         // Expand/Minimize if possible/needed.
Element flex_grow(Element);    // Expand element if possible.
Element flex_shrink(Element);  // Minimize element if needed.
 
Element xflex(Element);         // Expand/Minimize if possible/needed on X axis.
Element xflex_grow(Element);    // Expand element if possible on X axis.
Element xflex_shrink(Element);  // Minimize element if needed on X axis.
 
Element yflex(Element);         // Expand/Minimize if possible/needed on Y axis.
Element yflex_grow(Element);    // Expand element if possible on Y axis.
Element yflex_shrink(Element);  // Minimize element if needed on Y axis.
 
Element notflex(Element);  // Reset the flex attribute.
Element filler();          // A blank expandable element.
 
// -- Size override;
enum WidthOrHeight { WIDTH, HEIGHT };
enum Constraint { LESS_THAN, EQUAL, GREATER_THAN };
Decorator size(WidthOrHeight, Constraint, int value);
 
// --- Frame ---
// A frame is a scrollable area. The internal area is potentially larger than
// the external one. The internal area is scrolled in order to make visible the
// focused element.
Element frame(Element);
Element xframe(Element);
Element yframe(Element);
Element focus(Element);
Element select(Element e);  // Deprecated - Alias for focus.
 
// --- Cursor ---
// Those are similar to `focus`, but also change the shape of the cursor.
Element focusCursorBlock(Element);
Element focusCursorBlockBlinking(Element);
Element focusCursorBar(Element);
Element focusCursorBarBlinking(Element);
Element focusCursorUnderline(Element);
Element focusCursorUnderlineBlinking(Element);
 
// --- Misc ---
Element vscroll_indicator(Element);
Element hscroll_indicator(Element);
Decorator reflect(Box& box);
// Before drawing the |element| clear the pixel below. This is useful in
// combinaison with dbox.
Element clear_under(Element element);
 
// --- Util --------------------------------------------------------------------
Element hcenter(Element);
Element vcenter(Element);
Element center(Element);
Element align_right(Element);
Element nothing(Element element);
 
namespace Dimension {
Dimensions Fit(Element&, bool extend_beyond_screen = false);
}  // namespace Dimension
 
}  // namespace ftxui
 
// Make container able to take any number of children as input.
#include "ftxui/dom/take_any_args.hpp"
 
// Include old definitions using wstring.
#include "ftxui/dom/deprecated.hpp"
#endif  // FTXUI_DOM_ELEMENTS_HPP

text

最简单的控件。它显示文本。

text("I am a piece of text");

我是一段文本。

vtext

与 ftxui::text 相同，但垂直显示。

代码：

vtext("HELLO");

终端输出：

H
E
L
L
O

paragraph

类似于 ftxui::text，但单个单词会根据其容器的宽度换行到多行。

示例代码：

paragraph("A very long text")

有关更详细的示例，请参阅 详细示例。Paragraph 还包括许多其他变体，如下所示：

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│
└───────────┘

‍[!note] 您可以使用管道操作符实现相同的行为。

代码：

text("The element") | border

Border 也有多种样式，如下所示：

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

ftxui::window 是一个 ftxui::border，但带有一个额外的标题。要在元素周围添加窗口，请将其包装并指定一个字符串作为标题。 代码：

window("The window", text("The element"))

终端输出：

┌The window─┐
│The element│
└───────────┘

separator

显示垂直/水平线，以视觉上将容器内容一分为二。

代码：

border(
  hbox({
    text("Left"), 
    separator(),
    text("Right")
  })
)

终端输出：

┌────┬─────┐
│left│right│
└────┴─────┘

Separators 有多种类型，如下所示：

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

这是一个表示进度比率的视觉元素。

代码：

border(gauge(0.5))

终端输出：

┌────────────────────────────────────────────────────────────────────────────┐
│██████████████████████████████████████                                      │
└────────────────────────────────────────────────────────────────────────────┘

Gauges 可以以多种方向显示，如下所示：

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

参见：

Element graph(GraphFunction);

Colors

大多数终端控制台可以显示彩色文本和彩色背景。FTXUI 支持所有调色板：

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

在支持 256 色的终端上。

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

FTXUI 支持线性渐变。可以在前景色或背景色上使用。

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

示例

要使用这些效果，只需用您想要的效果包装您的元素：

underlined(bold(text("This text is bold and underlined")))

或者，使用管道操作符将其链接到您的元素上：

text("This text is bold") | bold | underlined

Layout

使元素能够以以下方式排列：

• 水平 使用 ftxui::hbox
• 垂直 使用 ftxui::vbox
• 在网格内 使用 ftxui::gridbox
• 沿一个方向换行 使用 ftxui::flexbox。

使用 ftxui::hbox、ftxui::vbox 和 ftxui::filler 的 示例：

使用 ftxui::gridbox 的 示例：

使用 flexbox 的 示例：

查看此 示例 和相关的 演示。

元素也可以使用 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

能够轻松地将数据格式化为整洁的表格形式。

代码示例：

Canvas

参见 API <ftxui/dom/canvas.hpp>

auto c = Canvas(100, 100);
c.DrawPointLine(10, 10, 80, 10, Color::Red);
auto element = canvas(c);

可以在 ftxui::Canvas 上进行绘图，使用盲文、块或简单字符：

简单 示例：

复杂 示例：