ftxui / dom

Table of Contents

• text
• vtext
• paragraph
• border
• window
• separator
• gauge
• graph
• 顏色
  • 16色調色板
  • 256色調色板
  • TrueColor (真彩色)
• 線性漸層
• 樣式
• 佈局
• 表格
  • • 選取與樣式設定
    • 有顏色的邊框
• 畫布

此模組定義了一組分層的 ftxui::Element。元素管理佈局，並能響應終端尺寸的變化。請注意以下範例，其中此模組用於創建一個帶有多個操作符的簡單佈局：

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

範例：

namespace ftxui {
    ...
 
// Define the document
Element document = vbox({
  text("The window") | bold | color(Color::Blue),
  gauge(0.5)
  text("The footer")
});
 
// Add a border, by calling the `ftxui::border` decorator function.
document = border(document);
 
// Add another border, using the pipe operator.
document = document | border.
 
// Add another border, using the |= operator.
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 <cstdint>
#include <functional>
#include <memory>
 
#include <string_view>
#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/export.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 是一個列舉，表示可以應用於終端機 UI 元素的不同邊框樣式。
///
/// BorderStyle 是一個列舉，表示可以應用於終端機 UI 元素的不同邊框樣式。
/// 它用於定義元素周圍邊框的視覺外觀，例如視窗、框架或分隔符。
/// @ingroup dom
enum BorderStyle : uint8_t {
  LIGHT,
  DASHED,
  HEAVY,
  DOUBLE,
  ROUNDED,
  EMPTY,
};
 
// 將元素以管線方式傳入裝飾器。
// 例如，以下幾行是等價的：
// -> text("ftxui") | bold | underlined
// -> underlined(bold(text("FTXUI")))
FTXUI_EXPORT(DOM) Element operator|(Element, Decorator);
FTXUI_EXPORT(DOM) Element& operator|=(Element&, Decorator);
FTXUI_EXPORT(DOM) Elements operator|(Elements, Decorator);
FTXUI_EXPORT(DOM) Decorator operator|(Decorator, Decorator);
 
// --- 元件 ---
FTXUI_EXPORT(DOM) Element text(std::string_view text);
FTXUI_EXPORT(DOM) Element vtext(std::string_view text);
FTXUI_EXPORT(DOM) Element separator();
FTXUI_EXPORT(DOM) Element separatorLight();
FTXUI_EXPORT(DOM) Element separatorDashed();
FTXUI_EXPORT(DOM) Element separatorHeavy();
FTXUI_EXPORT(DOM) Element separatorDouble();
FTXUI_EXPORT(DOM) Element separatorEmpty();
FTXUI_EXPORT(DOM) Element separatorStyled(BorderStyle);
FTXUI_EXPORT(DOM) Element separator(Cell);
FTXUI_EXPORT(DOM) Element separatorCharacter(std::string_view);
FTXUI_EXPORT(DOM)
Element separatorHSelector(float left,
                           float right,
                           Color unselected_color,
                           Color selected_color);
FTXUI_EXPORT(DOM)
Element separatorVSelector(float up,
                           float down,
                           Color unselected_color,
                           Color selected_color);
FTXUI_EXPORT(DOM) Element gauge(float progress);
FTXUI_EXPORT(DOM) Element gaugeLeft(float progress);
FTXUI_EXPORT(DOM) Element gaugeRight(float progress);
FTXUI_EXPORT(DOM) Element gaugeUp(float progress);
FTXUI_EXPORT(DOM) Element gaugeDown(float progress);
FTXUI_EXPORT(DOM) Element gaugeDirection(float progress, Direction direction);
 
// charset[0] 是「空」字元，charset.back() 是「滿」字元；
// 中間的項目則用於為邊界儲存格加上陰影。
FTXUI_EXPORT(DOM)
Element gaugeCharset(float progress,
                      std::vector<std::string> charset,
                      Direction direction = Direction::Right);
FTXUI_EXPORT(DOM) Element border(Element);
FTXUI_EXPORT(DOM) Element borderLight(Element);
FTXUI_EXPORT(DOM) Element borderDashed(Element);
FTXUI_EXPORT(DOM) Element borderHeavy(Element);
FTXUI_EXPORT(DOM) Element borderDouble(Element);
FTXUI_EXPORT(DOM) Element borderRounded(Element);
FTXUI_EXPORT(DOM) Element borderEmpty(Element);
FTXUI_EXPORT(DOM) Decorator borderStyled(BorderStyle);
FTXUI_EXPORT(DOM) Decorator borderStyled(BorderStyle, Color);
FTXUI_EXPORT(DOM) Decorator borderStyled(Color);
FTXUI_EXPORT(DOM) Decorator borderWith(const Cell&);
FTXUI_EXPORT(DOM)
Element window(Element title, Element content, BorderStyle border = ROUNDED);
FTXUI_EXPORT(DOM) Element spinner(int charset_index, size_t image_index);
FTXUI_EXPORT(DOM) Element paragraph(std::string_view text);
FTXUI_EXPORT(DOM) Element paragraphAlignLeft(std::string_view text);
FTXUI_EXPORT(DOM) Element paragraphAlignRight(std::string_view text);
FTXUI_EXPORT(DOM) Element paragraphAlignCenter(std::string_view text);
FTXUI_EXPORT(DOM) Element paragraphAlignJustify(std::string_view text);
FTXUI_EXPORT(DOM) Element graph(GraphFunction);
FTXUI_EXPORT(DOM) Element emptyElement();
FTXUI_EXPORT(DOM) Element canvas(ConstRef<Canvas>);
FTXUI_EXPORT(DOM)
Element canvas(int width, int height, std::function<void(Canvas&)>);
FTXUI_EXPORT(DOM) Element canvas(std::function<void(Canvas&)>);
 
// -- 裝飾器 ---
FTXUI_EXPORT(DOM) Element bold(Element);
FTXUI_EXPORT(DOM) Element dim(Element);
FTXUI_EXPORT(DOM) Element italic(Element);
FTXUI_EXPORT(DOM) Element inverted(Element);
FTXUI_EXPORT(DOM) Element underlined(Element);
FTXUI_EXPORT(DOM) Element underlinedDouble(Element);
FTXUI_EXPORT(DOM) Element blink(Element);
FTXUI_EXPORT(DOM) Element strikethrough(Element);
FTXUI_EXPORT(DOM) Decorator color(Color);
FTXUI_EXPORT(DOM) Decorator bgcolor(Color);
FTXUI_EXPORT(DOM) Decorator color(const LinearGradient&);
FTXUI_EXPORT(DOM) Decorator bgcolor(const LinearGradient&);
FTXUI_EXPORT(DOM) Element color(Color, Element);
FTXUI_EXPORT(DOM) Element bgcolor(Color, Element);
FTXUI_EXPORT(DOM) Element color(const LinearGradient&, Element);
FTXUI_EXPORT(DOM) Element bgcolor(const LinearGradient&, Element);
FTXUI_EXPORT(DOM) Decorator focusPosition(int x, int y);
FTXUI_EXPORT(DOM) Decorator focusPositionRelative(float x, float y);
FTXUI_EXPORT(DOM) Element automerge(Element child);
FTXUI_EXPORT(DOM) Decorator hyperlink(std::string_view link);
FTXUI_EXPORT(DOM) Element hyperlink(std::string_view link, Element child);
FTXUI_EXPORT(DOM) Element selectionStyleReset(Element);
FTXUI_EXPORT(DOM) Decorator selectionColor(Color foreground);
FTXUI_EXPORT(DOM) Decorator selectionBackgroundColor(Color foreground);
FTXUI_EXPORT(DOM) Decorator selectionForegroundColor(Color foreground);
FTXUI_EXPORT(DOM) Decorator selectionStyle(std::function<void(Cell&)> style);
 
// --- 布局是
// 水平、垂直或堆疊排列的元素集合。
FTXUI_EXPORT(DOM) Element hbox(Elements);
FTXUI_EXPORT(DOM) Element vbox(Elements);
FTXUI_EXPORT(DOM) Element dbox(Elements);
FTXUI_EXPORT(DOM)
Element flexbox(Elements, FlexboxConfig config = FlexboxConfig());
FTXUI_EXPORT(DOM) Element gridbox(std::vector<Elements> lines);
 
FTXUI_EXPORT(DOM)
Element hflow(Elements);  // 輔助函式：預設使用列方向的 flexbox。
FTXUI_EXPORT(DOM)
Element vflow(Elements);  // 輔助函式：預設使用欄方向的 flexbox。
 
// -- 彈性 ---
// 定義當容器內未使用全部空間時，如何分配容器內
// 剩餘空間。
FTXUI_EXPORT(DOM) Element flex(Element);  // 若可能/需要，展開/最小化。
FTXUI_EXPORT(DOM) Element flex_grow(Element);    // 若可能，展開元素。
FTXUI_EXPORT(DOM) Element flex_shrink(Element);  // 若需要，最小化元素。
FTXUI_EXPORT(DOM) Decorator flex_factor(int grow, int shrink);
FTXUI_EXPORT(DOM) Decorator flex_grow_factor(int grow);
FTXUI_EXPORT(DOM) Decorator flex_shrink_factor(int shrink);
 
FTXUI_EXPORT(DOM)
Element xflex(Element);  // 若可能/需要，在 X 軸上展開/最小化。
FTXUI_EXPORT(DOM)
Element xflex_grow(Element);  // 若可能，在 X 軸上展開元素。
FTXUI_EXPORT(DOM)
Element xflex_shrink(Element);  // 若需要，在 X 軸上最小化元素。
FTXUI_EXPORT(DOM) Decorator xflex_factor(int grow, int shrink);
FTXUI_EXPORT(DOM) Decorator xflex_grow_factor(int grow);
FTXUI_EXPORT(DOM) Decorator xflex_shrink_factor(int shrink);
 
FTXUI_EXPORT(DOM)
Element yflex(Element);  // 若可能/需要，在 Y 軸上展開/最小化。
FTXUI_EXPORT(DOM)
Element yflex_grow(Element);  // 若可能，在 Y 軸上展開元素。
FTXUI_EXPORT(DOM)
Element yflex_shrink(Element);  // 若需要，在 Y 軸上最小化元素。
FTXUI_EXPORT(DOM) Decorator yflex_factor(int grow, int shrink);
FTXUI_EXPORT(DOM) Decorator yflex_grow_factor(int grow);
FTXUI_EXPORT(DOM) Decorator yflex_shrink_factor(int shrink);
 
FTXUI_EXPORT(DOM) Element notflex(Element);  // 重設彈性屬性。
FTXUI_EXPORT(DOM) Element filler();          // 一個空白的可展開元素。
 
// -- 大小覆寫；
enum WidthOrHeight : uint8_t { WIDTH, HEIGHT };
enum Constraint : uint8_t { LESS_THAN, EQUAL, GREATER_THAN };
FTXUI_EXPORT(DOM) Decorator size(WidthOrHeight, Constraint, int value);
 
// --- 畫格 ---
// 畫格是一個可捲動的區域。內部區域可能比外部區域大得多。
// 內部區域會被捲動，以使目前聚焦的元素
// 保持可見。
FTXUI_EXPORT(DOM) Element frame(Element);
FTXUI_EXPORT(DOM) Element xframe(Element);
FTXUI_EXPORT(DOM) Element yframe(Element);
FTXUI_EXPORT(DOM) Element focus(Element);
FTXUI_EXPORT(DOM) Element select(Element e);  // 已棄用 - focus 的別名。
 
// --- 光標 ---
// 這些與 `focus` 相似，但也會改變光標的形狀。
FTXUI_EXPORT(DOM) Element focusCursorBlock(Element);
FTXUI_EXPORT(DOM) Element focusCursorBlockBlinking(Element);
FTXUI_EXPORT(DOM) Element focusCursorBar(Element);
FTXUI_EXPORT(DOM) Element focusCursorBarBlinking(Element);
FTXUI_EXPORT(DOM) Element focusCursorUnderline(Element);
FTXUI_EXPORT(DOM) Element focusCursorUnderlineBlinking(Element);
 
// --- 雜項 ---
FTXUI_EXPORT(DOM) Element vscroll_indicator(Element);
FTXUI_EXPORT(DOM) Element hscroll_indicator(Element);
FTXUI_EXPORT(DOM) Decorator reflect(Box& box);
// 在繪製 |element| 之前先清除下方的像素。這在
// 與 dbox 搭配使用時很有用。
FTXUI_EXPORT(DOM) Element clear_under(Element element);
 
// --- 工具 --------------------------------------------------------------------
FTXUI_EXPORT(DOM) Element hcenter(Element);
FTXUI_EXPORT(DOM) Element vcenter(Element);
FTXUI_EXPORT(DOM) Element center(Element);
FTXUI_EXPORT(DOM) Element align_right(Element);
FTXUI_EXPORT(DOM) Element nothing(Element element);
 
namespace Dimension {
FTXUI_EXPORT(DOM) Dimensions Fit(Element&, bool extend_beyond_screen = false);
}  // namespace Dimension
 
}  // namespace ftxui
 
// 使容器能夠接受任意數量的子元素作為輸入。
#include "ftxui/dom/take_any_args.hpp"
 
// 包含使用 wstring 的舊定義。
#include "ftxui/dom/deprecated.hpp"
#endif  // FTXUI_DOM_ELEMENTS_HPP

text

最簡單的元件。它顯示一段文字。

text("I am a piece of 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

您可以使用 pipe 運算符實現相同的行為。

程式碼：

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(Cell);
}

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

分隔線有多種樣式，如下所示：

namespace ftxui {
    Element separator(void);
    Element separatorLight();
    Element separatorHeavy();
    Element separatorDouble();
    Element separatorEmpty();
    Element separatorStyled(BorderStyle);
    Element separator(Cell);
    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))

終端機輸出：

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

量表（gauge）可以以多種方向顯示，如下所示：

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

顏色

大多數終端控制台都可以顯示彩色文本和彩色背景。FTXUI 支援所有調色板：

Decorator color(Color);
Decorator bgcolor(Color);

顏色 圖庫：

16色調色板

大多數終端都支援以下顏色：

• Default
• Black
• GrayDark
• GrayLight
• White
• Blue
• BlueLight
• Cyan
• CyanLight
• Green
• GreenLight
• Magenta
• MagentaLight
• Red
• RedLight
• Yellow
• YellowLight

使用管線運算子（pipe operator）搭配上述顏色的範例：

text("Blue foreground") | color(Color::Blue);
text("Blue background") | bgcolor(Color::Blue);
text("Black on white") | color(Color::Black) | bgcolor(Color::White);

256色調色板

在支援 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);

線性漸層

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

見 demo。

樣式

除了彩色文本和彩色背景之外。許多終端還支援文本效果，例如：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")))

或者，使用 pipe 運算符將其鏈接到您的元素上：

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

佈局

使元素可以透過以下方式排列：

• 水平 使用 ftxui::hbox
• 垂直 使用 ftxui::vbox
• 在網格內部 使用 ftxui::gridbox
• 沿一個方向換行 使用 ftxui::flexbox。

使用 ftxui::hbox、ftxui::vbox 與 ftxui::filler 的範例。

使用 ftxui::gridbox 的範例：

使用 flexbox 的範例：

查看此 範例 以及相關的 demo。

元素也可以使用 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                          │
└────┘└───────────────────────────────┘└───────────────────────────────┘

表格

讓你可以輕鬆地將資料格式化成整齊的表格視覺形式。

基本範例：

auto table = Table({
  {"Planet", "Radius", "Mass"},
  {"Mercury", "2440", "0.330"},
  {"Venus", "6052", "4.87"},
  {"Earth", "6371", "5.97"},
  {"Mars", "3390", "0.642"},
});
 
table.SelectAll().Border(LIGHT);
table.SelectRow(0).Decorate(bold);
table.SelectRow(0).SeparatorVertical(LIGHT);
table.SelectRow(0).Border(DOUBLE);
 
auto document = table.Render();

程式碼範例：

選取與樣式設定

你可以選取表格的部分內容，並套用裝飾器或邊框到它們身上。選取方法包括：

ftxui::TableSelection::SelectAll();
ftxui::TableSelection::SelectCell(column, row);
ftxui::TableSelection::SelectRow(row_index);
ftxui::TableSelection::SelectRows(row_min, row_max);
ftxui::TableSelection::SelectColumn(column_index);
ftxui::TableSelection::SelectColumns(column_min, column_max);
ftxui::TableSelection::SelectRectangle(column_min, column_max, row_min, row_max);

完成選取之後，你可以套用：

ftxui::TableSelection::Decorate(Decorator); // Apply a decorator to the whole selection (cells and borders).
ftxui::TableSelection::DecorateCells(Decorator); // Apply a decorator only to the cells.
ftxui::TableSelection::Border(BorderStyle); // Add a border around the selection.
ftxui::TableSelection::Separator(BorderStyle); // 

有顏色的邊框

你也可以將裝飾器專門套用於邊框與分隔線：

// Apply a red border to the whole table.
table.SelectAll().Border(LIGHT, color(Color::Red));
 
// Apply a blue separator to the first row.
table.SelectRow(0).SeparatorVertical(LIGHT, color(Color::Blue));

以下方法可用於細緻的邊框裝飾：

ftxui::TableSelection::DecorateBorder(Decorator); // Apply a decorator to all borders of the selection.
ftxui::TableSelection::DecorateBorderLeft(Decorator); // Apply a decorator to the left border of the selection.
ftxui::TableSelection::DecorateBorderRight(Decorator); // Apply a decorator to the right border of the selection.
ftxui::TableSelection::DecorateBorderTop(Decorator); // Apply a decorator to the top border of the selection.
ftxui::TableSelection::DecorateBorderBottom(Decorator); // Apply a decorator to the bottom border of the selection.
ftxui::TableSelection::DecorateSeparator(Decorator); // Apply a decorator to all separators of the selection.
ftxui::TableSelection::DecorateSeparatorVertical(Decorator); // Apply a decorator to all vertical separators of the selection.
ftxui::TableSelection::DecorateSeparatorHorizontal(Decorator); // Apply a decorator to all horizontal separators of the selection.

畫布

詳見 API <ftxui/dom/canvas.hpp>

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

繪圖可以在 ftxui::Canvas 上執行，使用盲文、區塊或簡單字元：

簡單的 範例：

複雜的範例：