FTXUI 笔记（四）——dom模块

已于 2022-12-11 20:28:49 修改
阅读量974 收藏 2
点赞数
分类专栏： FTXUI教程 文章标签： c++
于 2022-12-11 20:19:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a499957739/article/details/128266100
版权

前面已经通过阅读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│
│    │                                       │      │                                        │     │
│    │                                       │      │                                        │     │
│    │                                       │      │                                        │     │
│    │                                       │      │                                        │     │
│    │                                       │      │                                        │     │
│    │                                       │      │                                        │     │
│    │                                       │      │                                        │     │
╰────╯                                       ╰──────╯                                        ╰─────╯
永不做码农
关注
专栏目录
matlab simulink笔记04——switch模块
python_AI_fans的博客
05-17 3万+
Switch 模块 Switch模块是-.个选择开关模块,可根据判断条件选择多个输入端口中的某个进行输出。图所示为CommonlyUsedBlocks中具有3个输入端口.1个输出端口的Switch模块图标。模块的3个端口中,第1个和第3个端口为输出端口提供输出值,输出端口输出第1个输人口还是第3个输人口的值由第2个输人口的值和条件关系共同决定。参数对话框中的条件关系选择对第2个端口进行条件判断,如果判断为真，则输出口输出第1个端口的信号;否则输出第3个输人端口的信号。对第2个端口进行判断的条件关系有3种
FTXUI：C ++功能终端用户界面
01-28
FTXUI：C ++功能终端用户界面
使用c++的ftxui库绘制一个界面，反映CPU的占用率，左边是CPU总占用率的饼图，右边是每个CPU占用率的柱状图...
weixin_42609225的博客
01-26 489
首先，需要安装ftxui库，在终端中输入：pip install ftxui。 然后可以使用ftxui库中的各种组件来构建界面。可以使用ftxui.Pie绘制饼图，使用ftxui.Bar绘制柱状图。 需要注意的是，需要使用系统调用或第三方库来获取CPU占用率的信息。 以下是一个简单的示例代码： import ftxui from ftxui import Pie, Bar def get_cpu...
FTXUI：C++终端UI库入门指南
最新发布
gitblog_00114的博客
08-08 408
FTXUI：C++终端UI库入门指南 FTXUI:computer: C++ Functional Terminal User Interface. :heart:项目地址:https://gitcode.com/gh_mirrors/ft/FTXUI 项目介绍 FTXUI（Functional Terminal User Interface）是一个用C++编写的轻量级、功能丰富的命令行界面库。...
探索FTXUI：一款现代化、跨平台的C++ GUI库
gitblog_00028的博客
03-20 2262
探索FTXUI：一款现代化、跨平台的C++ GUI库 FTXUI:computer: C++ Functional Terminal User Interface. :heart:项目地址:https://gitcode.com/gh_mirrors/ft/FTXUI 如果你在寻找一个高效、简洁且易于使用的C++图形用户界面（GUI）库，那么FTXUI可能正是你需要的答案。这个开源项目由Arth...
【FTXUI】书写终端应用——TUI
m0_60525264的博客
07-19 1058
FTXUI中文手册
FTXUI 笔记（一）——screen模块
a499957739的博客
12-07 528
FTXUI
web前端学习笔记——DOM
Minnor的博客
05-26 715
关于DOM操作，我们主要针对于元素的操作，主要有 创建、增、删、改、查、属性操作、事件操作。
python学习笔记（五）——模块导入
12-22
模块是一个包含所有你定义的函数和变量的文件，其后缀名是.py。模块可以被别的程序引入，以使用该模块中的函数等功能。这也是使用 python 标准库的方法。 1、模块的定义与分类 在python中模块实际上就是一个以 .py ...
Python 笔记源码——内含python后端&机器学习等.zip
04-17
Python 笔记源码——内含python后端&机器学习等.zip Python 笔记源码——内含python后端&机器学习等.zip Python 笔记源码——内含python后端&机器学习等.zip Python 笔记源码——内含python后端&机器学习等.zip ...
matlab simulink笔记05 —— 积分模块
热门推荐
python_AI_fans的博客
05-17 1万+
1.连续积分模块：integrator 例子见：matlab simulink笔记06 —— 利用simulink求解微分方程/simulink框图与控制系统框图的区别
FTXUI基础笔记（hello world）
zhangrelay的专栏
07-15 1198
ftxui/dom是主要模块。ftxuiComponentBaseAdd()构造两个组件之间的父子关系。程序如下，构建单个框架，需要创建一个ftxuiElement，并将其显示在ftxuiScreen上。ftxuiComponent是指向ftxuiComponentBase的共享指针。ftxui/screen定义了一个ftxuiScreen，一个ftxuiPixel的网格。ftxuiComponentBaseRender()如何渲染界面。...
FTXUI 笔记（五）——dom模块
a499957739的博客
12-11 737
FTXUI
FTXUI 笔记（三）——dom模块
a499957739的博客
12-09 499
FTXUI
FTXUI 笔记（二）——screen模块
a499957739的博客
12-08 361
FTXUI
【C++】开源：FTXUI终端界面库配置使用
DevFrank的博客
12-25 1263
FTXUI终端界面库配置使用
FTXUI按键和ROS2 CLI组合使用笔记（turtlesim+teleop）
zhangrelay的专栏
07-17 867
由定义的基本目录$XDG_CONFIG_HOME被认为比由定义的任何基本目录更重要$XDG_CONFIG_DIRS。可以在$XDG_CONFIG_HOME/subdir/filename中创建用户特定版本的配置文件，同时考虑$XDG_CONFIG_HOMEif$XDG_CONFIG_HOME未设置的默认值。可以在$XDG_DATA_HOME/subdir/filename中创建用户特定版本的数据文件，同时考虑$XDG_DATA_HOMEif$XDG_DATA_HOME未设置的默认值。...
FTXUI编译和使用（不含ROS1/2）Linux手机或平板版本
zhangrelay的专栏
07-13 955
电脑端编译和使用参考：FTXUI编译和使用（不含ROS1/2）linux手机类似：cmake ..make效果如下：ssh端效果vnc桌面效果： 过程如下：需要cmake / g++ 升级到对应新版cmake>=3.11，g++>=9.4！phablet@ubuntu-phablet:~/Downloads/FTXUI/build$ cmake .. -- The CXX compiler identification is GNU 9.4.0 -- Detecting CXX compiler ABI
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值