FTXUI 笔记（四）——dom模块

前面已经通过阅读Node源码、分析Node树渲染过程、Text部件、Bold装饰器、HBox布局管理器、以及自定义ListView部件了解如何设计自己想要的UI界面，接下来这一章节就介绍一下FTXUI中已经为我们设计好的各种element类型。

Layout布局

FTXUI预定义了多种布局类型。

hbox 水平布局

Element hbox(Elements);

例：

#include "ftxui/dom/elements.hpp"
using namespace ftxui;
int main(void) {
  auto document = hbox({
      text("left"),
      separator(),
      text("middle"),
      separator(),
      text("right"),
  });
  auto screen = Screen::Create(Dimension::Fit(document));//适应dom渲染尺寸
  Render(screen, document);
  screen.Print();
  return 0;
}

效果：

left│middle│right

vbox 垂直布局

Element vbox(Elements);

例：

#include "ftxui/dom/elements.hpp"
using namespace ftxui;
int main(void) {
  auto document = vbox({
      text("left"),
      separator(),
      text("middle"),
      separator(),
      text("right"),
  });
  auto screen = Screen::Create(Dimension::Fit(document));
  Render(screen, document);
  screen.Print();
  return 0;
}

效果：

left
──────
middle
──────
right

gridbox网格布局

Element gridbox(std::vector<Elements> lines);

例：

#include <vector>
#include "ftxui/dom/elements.hpp"
#include "ftxui/dom/node.hpp"
using namespace ftxui;
int main(void) {
  auto document = gridbox({
      {
          text("north-west") | border,
          text("north") | border,
          text("north-east") | border,
      },
      {
          text("center-west") | border,
          gridbox({
              {
                  text("center-north-west") | border,
                  text("center-north-east") | border,
              },
              {
                  text("center-south-west") | border,
                  text("center-south-east") | border,
              },
          }),
          text("center-east") | border,
      },
      {
          text("south-west") | border,
          text("south") | border,
          text("south-east") | border,
      },
  });
  auto screen = Screen::Create(Dimension::Full());
  Render(screen, document);
  screen.Print();
  return 0;
}

效果：

╭───────────╮╭────────────────────────────────────╮╭───────────╮
│north-west ││north                               ││north-east │
╰───────────╯╰────────────────────────────────────╯╰───────────╯
╭───────────╮╭─────────────────╮╭─────────────────╮╭───────────╮
│center-west││center-north-west││center-north-east││center-east│
│           │╰─────────────────╯╰─────────────────╯│           │
│           │╭─────────────────╮╭─────────────────╮│           │
│           ││center-south-west││center-south-east││           │
╰───────────╯╰─────────────────╯╰─────────────────╯╰───────────╯
╭───────────╮╭────────────────────────────────────╮╭───────────╮
│south-west ││south                               ││south-east │
╰───────────╯╰────────────────────────────────────╯╰───────────╯

flexbox 流式布局

Element flexbox(Elements, FlexboxConfig config = FlexboxConfig());

例：

#include "ftxui/dom/elements.hpp"
#include "ftxui/dom/node.hpp"
using namespace ftxui;
int main(void) {
  auto document = flexbox({
      text("north-west") | border,
      text("north") | border,
      text("north-east") | border,
  });
  auto screen = Screen::Create(Dimension::Full());
  Render(screen, document);
  screen.Print();
  return 0;
}

效果：优先从左往右排布，然后横向不足则从上往下

╭──────────╮╭─────╮
│north-west││north│
╰──────────╯╰─────╯
╭──────────╮
│north-east│
╰──────────╯

hflow

Element hflow(Elements);

例：

#include "ftxui/dom/elements.hpp"
#include "ftxui/dom/node.hpp"
using namespace ftxui;
int main(void) {
  auto document = hflow({
      text("north-west") | border,
      text("north") | border,
      text("north-east") | border,
  });
  auto screen = Screen::Create(Dimension::Fit(document));
  Render(screen, document);
  screen.Print();
  return 0;
}

效果：优先从左往右排布，然后横向不足则从上往下

╭──────────╮╭─────╮
│north-west││north│
╰──────────╯╰─────╯
╭──────────╮
│north-east│
╰──────────╯

vflow

Element vflow(Elements);

例：

#include "ftxui/dom/elements.hpp"
#include "ftxui/dom/node.hpp"
using namespace ftxui;
int main(void) {
  auto document = vflow({
      text("north-west") | border,
      text("north") | border,
      text("north-east") | border,
  });
  auto screen = Screen::Create(Dimension::Fit(document));
  Render(screen, document);
  screen.Print();
  return 0;
}

效果：优先从上往下排布，然后纵向不足则从左往右

╭──────────╮╭──────────╮
│north-west││north-east│
╰──────────╯╰──────────╯
╭─────╮
│north│
╰─────╯

布局属性

flex

如果可能/需要，让Element的空间Expand展开或Minimize收缩。

Element flex(Element);

例：

#include "ftxui/dom/elements.hpp"
#include "ftxui/dom/node.hpp"
#include "ftxui/screen/screen.hpp"
using namespace ftxui;
int main(void) {
  auto document = hbox({
      text("left") | border | flex,
      text("middle") | border | flex,
      text("right") | border | flex,
  });
  auto screen = Screen::Create(Dimension::Full(), Dimension::Full());
  Render(screen, document);
  screen.Print();
  return 0;
}

效果：

╭──────────────────────────────╮╭────────────────────────────────╮╭────────────────────────────────╮
│left                          ││middle                          ││right                           │
│                              ││                                ││                                │
│                              ││                                ││                                │
│                              ││                                ││                                │
│                              ││                                ││                                │
│                              ││                                ││                                │
│                              ││                                ││                                │
│                              ││                                ││                                │
╰──────────────────────────────╯╰────────────────────────────────╯╰────────────────────────────────╯

flex_grow

如果可能，让Element的空间Expand展开

Element flex_grow(Element);

例：

#include "ftxui/dom/elements.hpp"
#include "ftxui/dom/node.hpp"
#include "ftxui/screen/screen.hpp"
using namespace ftxui;
int main(void) {
  auto document = hbox({
      text("left") | border | flex_grow,
      text("middle") | border | flex_grow,
      text("right") | border | flex_grow,
  });
  auto screen = Screen::Create(Dimension::Full(), Dimension::Full());
  Render(screen, document);
  screen.Print();
  return 0;
}

效果：

╭──────────────────────────────╮╭────────────────────────────────╮╭────────────────────────────────╮
│left                          ││middle                          ││right                           │
│                              ││                                ││                                │
│                              ││                                ││                                │
│                              ││                                ││                                │
│                              ││                                ││                                │
│                              ││                                ││                                │
│                              ││                                ││                                │
│                              ││                                ││                                │
╰──────────────────────────────╯╰────────────────────────────────╯╰────────────────────────────────╯

flex_shrink

如果可能，让Element的空间Minimize收缩。

Element flex_shrink(Element);

例：

#include "ftxui/dom/elements.hpp"
#include "ftxui/dom/node.hpp"
#include "ftxui/screen/screen.hpp"
using namespace ftxui;
int main(void) {
  auto document = hbox({
      text("left") | border | flex_shrink,
      text("middle") | border | flex_shrink,
      text("right") | border | flex_shrink,
  });
  auto screen = Screen::Create(Dimension::Full(), Dimension::Full());
  Render(screen, document);
  screen.Print();
  return 0;
}

效果：

╭────╮╭──────╮╭─────╮
│left││middle││right│
│    ││      ││     │
│    ││      ││     │
│    ││      ││     │
│    ││      ││     │
│    ││      ││     │
│    ││      ││     │
│    ││      ││     │
╰────╯╰──────╯╰─────╯

x轴布局属性

xflex

沿着x方向尽量Expand展开或Minimize收缩

xflex_grow

沿着x方向尽量Expand展开

xflex_shrink

沿着x方向尽量Minimize收缩

y轴布局属性

yflex

沿着y方向尽量Expand展开或Minimize收缩

yflex_grow

沿着y方向尽量Expand展开

yflex_shrink

沿着y方向尽量Minimize收缩

notflex 恢复布局

用于恢复元素默认的flex属性。

占位符元素

占位符元素不属于装饰器，它是用来配合布局使用的，他可以作为一个独立的元素用例占用布局的剩余空间。

Element filler();

例：

#include "ftxui/dom/elements.hpp"
#include "ftxui/dom/node.hpp"
#include "ftxui/screen/screen.hpp"
using namespace ftxui;
int main(void) {
  auto document = hbox({
      text("left") | border,
      filler(),
      text("middle") | border,
      filler(),
      text("right") | border,
  });
  auto screen = Screen::Create(Dimension::Full(), Dimension::Full());
  Render(screen, document);
  screen.Print();
  return 0;
}

效果：

╭────╮                                       ╭──────╮                                        ╭─────╮
│left│                                       │middle│                                        │right│
│    │                                       │      │                                        │     │
│    │                                       │      │                                        │     │
│    │                                       │      │                                        │     │
│    │                                       │      │                                        │     │
│    │                                       │      │                                        │     │
│    │                                       │      │                                        │     │
│    │                                       │      │                                        │     │
╰────╯                                       ╰──────╯                                        ╰─────╯