FTXUI 笔记（五）——dom模块

江阳夏

2023-12-01

样式

可以通过修饰元素来改变元素的默认显示样式。有两种使用方法：
1、通过创建样式时传入元素内容。

  auto document = hbox({
      text("left"),
      bold(text("middle")),
      text("right"),
  });

2、通过” | “操作符来实现修改元素样式。

  auto document = hbox({
      text("left"),
      text("middle") | bold,
      text("right"),
  });

默认样式

bold 加粗显示
dim 暗淡显示
inverted 前景色背景色翻转显示
underlined 下划线显示
blink 闪烁显示

color 自定义前景色

显示指定颜色，使用方法：

  auto document = hbox({
      text("left"),
      text("middle") | color(Color(0x00, 0xFF, 0x00)),
      text("right"),
  });

bgcolor 自定义背景色

显示指定背景颜色，使用方法：

  auto document = hbox({
      text("left"),
      text("middle") | bgcolor(Color(0x00, 0xFF, 0x00)),
      text("right"),
  });

文本显示部件

text 横向单行文本

横向显示文本内容，默认左对齐。

vtext 纵向单行文本

纵向显示文本内容，默认上对齐。

文本显示对齐

Element hcenter(Element); // 水平居中
Element vcenter(Element); // 垂直居中
Element center(Element); // 水平垂直居中
Element align_right(Element); // 右对齐
Element nothing(Element element); // 默认对齐

段落文本显示部件

该部件可以显示一个段落的文本内容，有自动换行功能。

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);  // 自动调整文本对齐

分隔符显示部件

默认分隔符

separator 分隔符“|”，用于显示分隔符，默认显示一个细的分隔符。
separatorEmpty 分隔符(“ ”)，用于显示一个空的分隔符。
separatorLight 分隔符(“|”)，显示的分隔符粗细程度较轻。
separatorHeavy 分隔符(“|”)，显示的分隔符粗细程度较重。
separatorDouble 分隔符(“||”)，用于显示一个双条的分隔符。

separatorStyled 通过自定义样式创建以上类型的分隔符。

enum BorderStyle { LIGHT, HEAVY, DOUBLE, ROUNDED, EMPTY }; //样式类型
Element separatorStyled(BorderStyle); // 构造函数

separator(Pixel) 自定义Pixel的分隔符，分隔符会显示自定义的Pixel像素内容。

Element separator(Pixel); // 构造函数

separatorCharacter 特定字符串的分隔符，分隔符会显示一个特定字符串。

Element separatorCharacter(std::string); // 构造函数

水平分隔符

separatorHSelector 水平分隔符，用于显示一个横向分隔符

Element separatorHSelector(float left,
                           float right,
                           Color unselected_color,
                           Color selected_color);

垂直分隔符

separatorVSelector 垂直分隔符，用于显示一个纵向分隔符

Element separatorVSelector(float up,
                           float down,
                           Color unselected_color,
                           Color selected_color);

边框显示部件

用于在元素外围显示一个边框，包裹内部元素。

默认边框

Element border(Element); // 默认边框
Element borderLight(Element); // 细边框
Element borderHeavy(Element); // 粗边框
Element borderDouble(Element); // 双边框
Element borderRounded(Element); // 圆角边框, 四个角为圆角
Element borderEmpty(Element); // 空边框, 用空格填充的边框
Decorator borderStyled(BorderStyle); // 自定义类型边框

自定义边框样式

通过指定自定义Pixel创建自定义边框。

Decorator borderWith(const Pixel&);

元素+边框显示部件

在边框的上边缘会显示一个自定义的元素。

Element window(Element title, Element content);

进度条显示部件

Element gauge(float progress)

显示横向进度条

// border(gauge(0.5))
┌──────────────────────────────────────────────────────────────────────────┐
│█████████████████████████████████████                                     │
└──────────────────────────────────────────────────────────────────────────┘

Element gaugeLeft(float progress);

创建一个从右到左的进度条

 // border(gaugeLeft(0.5))
 ┌──────────────────────────────────────────────────────────────────────────┐
 │                                     █████████████████████████████████████│
 └──────────────────────────────────────────────────────────────────────────┘

Element gaugeRight(float progress);

创建一个从左到右的进度条

// border(gaugeRight(0.5))
 ┌──────────────────────────────────────────────────────────────────────────┐
 │█████████████████████████████████████                                     │
 └──────────────────────────────────────────────────────────────────────────┘

Element gaugeUp(float progress);

创建一个从下到上的进度条

// border(gaugeUp(0.5))
 ┌─┐
 │ │
 │ │
 │ │
 │ │
 │█│
 │█│
 │█│
 │█│
 └─┘

Element gaugeDown(float progress);

创建一个从上到下的进度条

// border(gaugeDown(0.5))
  ┌─┐
  │█│
  │█│
  │█│
  │█│
  │ │
  │ │
  │ │
  │ │
  └─┘

Element gaugeDirection(float progress, GaugeDirection);

通过指定方向创建进度条

enum class GaugeDirection { Left, Up, Right, Down };

Spinner部件

用于显示一个加载的部件，例如请求网络是的旋转进度。

Element spinner(int charset_index, size_t image_index);

graph部件

用于绘制一个自定义图形的部件。通过构造绘图算法来绘制一个自定义图形的部件。

Element graph(GraphFunction);

GraphFunction是需要自定义的算法：

using GraphFunction = std::function<std::vector<int>(int, int)>;

emptyElement 空元素

这是一个大小为0x0的元素，不显示任何内容。