FTXUI 笔记（四）——Element元素显示

原创已于 2025-04-16 20:17:32 修改 · 1.1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

FTXUI教程

于 2022-12-11 20:21:32 首次发布

本文介绍了UI元素的样式设置方法，包括文本显示部件、段落文本显示部件、分隔符显示部件等，并详细说明了如何自定义边框样式及创建不同方向的进度条显示部件。

文章目录

文本显示部件
- text 横向单行文本
- vtext 纵向单行文本
分隔符显示部件
- separator 默认分隔符
- separatorHSelector 水平分隔符
- separatorVSelector 垂直分隔符
进度条显示部件
- Element gauge(float progress);默认进度条(从左到右)
- Element gaugeLeft(float progress);创建一个从右到左的进度条
- Element gaugeRight(float progress);创建一个从左到右的进度条
- Element gaugeUp(float progress);创建一个从下到上的进度条
- Element gaugeDown(float progress);创建一个从上到下的进度条
- Element gaugeDirection(float progress, GaugeDirection);通过指定方向创建进度条
边框显示部件
- border 默认边框
- borderStyled 自定义边框
- borderWith 自定义边框
window 组合部件
Spinner部件
Paragraph 段落文本显示部件
graph部件
emptyElement 空元素
canvas 画布
装饰器
- 样式
布局容器
- hbox 水平布局
- vbox 垂直布局
- dbox 堆叠布局
- gridbox 网格布局
- hflow 水平流式布局
- vflow 垂直流式布局
- flexbox 自定义流式布局
Flexibility 布局属性
- x 轴布局属性
- y 轴布局属性
- notflex 恢复布局
- filler 占位符
Frame 帧
center 文本显示对齐
Cursor 设置光标样式

文本显示部件

text 横向单行文本

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

    while (true)
    {
        auto text = ftxui::text("Hello world!");

        ftxui::Screen screen = ftxui::Screen::Create(ftxui::Dimension::Full());
        Render(screen, text);
        screen.Print();
        usleep(100000);
    }

在这里插入图片描述

vtext 纵向单行文本

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

    while (true)
    {
        auto vtext = ftxui::vtext("Hello world!");

        ftxui::Screen screen = ftxui::Screen::Create(ftxui::Dimension::Full());
        Render(screen, vtext);
        screen.Print();
        usleep(100000);
    }

在这里插入图片描述

分隔符显示部件

separator 默认分隔符

separator
分隔符“│”，用于显示分隔符，默认显示粗细程度较轻。
separatorLight
分隔符(“│”)，显示的分隔符粗细程度较轻。
separatorDashed
分隔符(“╏”)，显示的分隔符为虚线。
separatorHeavy
分隔符(“┃”)，显示的分隔符粗细程度较重。
separatorDouble
分隔符(“║”)，用于显示一个双条的分隔符。
separatorEmpty
分隔符(“ ”)，用于显示一个空的分隔符。
separatorStyled(BorderStyle)
自定义样式的分隔符，通过特定样式类型创建的分隔符。

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

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

Element separator(Pixel);

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

Element separatorCharacter(std::string);

使用示例： 使用水平布局容器，默认分隔符显示为纵向。

    while (true)
    {
        auto view = ftxui::hbox({
            ftxui::text("Text 1"),
            ftxui::separator(),
            ftxui::text("Text 2")
        });
        ftxui::Screen screen = ftxui::Screen::Create(ftxui::Dimension::Full());
        Render(screen, view);
        screen.Print();
        usleep(100000);
    }

在这里插入图片描述
使用示例： 使用垂直布局容器，默认分隔符显示为横向。

    while (true)
    {
        auto view = ftxui::vbox({
            ftxui::text("Text 1"),
            ftxui::separator(),
            ftxui::text("Text 2")
        });
        ftxui::Screen screen = ftxui::Screen::Create(ftxui::Dimension::Full());
        Render(screen, view);
        screen.Print();
        usleep(100000);
    }

在这里插入图片描述

separatorHSelector 水平分隔符

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

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

使用示例：使用垂直布局容器，应该使用separatorHSelector水平分隔符

    while (true)
    {
        auto view = ftxui::hbox({
            ftxui::text("Text 1"),
            ftxui::separatorVSelector(0,1, ftxui::Color::White, ftxui::Color::Blue), // 设置0~1列显示特定颜色样式
            ftxui::text("Text 2")
        });
        ftxui::Screen screen = ftxui::Screen::Create(ftxui::Dimension::Full());
        Render(screen, view);
        screen.Print();
        usleep(100000);
    }

在这里插入图片描述

separatorVSelector 垂直分隔符

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

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

使用示例：使用水平布局容器，应该使用separatorVSelector垂直分隔符

    while (true)
    {
        auto view = ftxui::hbox({
            ftxui::text("Text 1"),
            ftxui::separatorVSelector(0,1, ftxui::Color::White, ftxui::Color::Blue), // 设置0~1行显示特定颜色样式
            ftxui::text("Text 2")
        });
        ftxui::Screen screen = ftxui::Screen::Create(ftxui::Dimension::Full());
        Render(screen, view);
        screen.Print();
        usleep(100000);
    }

在这里插入图片描述

进度条显示部件

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 };
border(gaugeDirection(0.5, ftxui::Direction::Up));
 ┌─┐
 │ │
 │ │
 │ │
 │ │
 │█│
 │█│
 │█│
 │█│
 └─┘

边框显示部件

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

border 默认边框

Element border(Element); // 默认边框（“│”）
Element borderLight(Element); // 细边框（“│”）
Element borderDashed(Element);//虚线边框（"╏"）
Element borderHeavy(Element); // 粗边框（"┃"）
Element borderDouble(Element); // 双边框（"║"）
Element borderRounded(Element); // 圆角边框, 四个角为圆角
Element borderEmpty(Element); // 空边框, 用空格填充的边框

borderStyled 自定义边框

enum BorderStyle {
  LIGHT,// 细边框
  DASHED,// 虚线边框
  HEAVY,// 粗边框
  DOUBLE,// 双边框
  ROUNDED,// 圆角边框
  EMPTY,// 空格边框
};
Decorator borderStyled(BorderStyle);            // 通过指定自定义边线创建自定义边框
Decorator borderStyled(BorderStyle, Color); // 通过指定自定义边线和颜色创建自定义边框
Decorator borderStyled(Color);                      // 通过指定自定义颜色创建自定义边框

borderWith 自定义边框

Decorator borderWith(const Pixel&); // 通过指定自定义Pixel创建自定义边框。

window 组合部件

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

Element window(Element title, Element content);

使用示例：

    while (true)
    {
        auto window = ftxui::window(ftxui::text("Title"), ftxui::text("content..."));
        ftxui::Screen screen = ftxui::Screen::Create(ftxui::Dimension::Full());
        Render(screen, window);
        screen.Print();
        usleep(100000);
    }

在这里插入图片描述

Spinner部件

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

Element spinner(int charset_index, size_t image_index);// 参数1设置动画索引, 参数2设置动画帧索引

使用示例：

    while (true)
    {
        static int progress = 0;
        progress++;
        progress = progress % 4;
        
        auto spinner = ftxui::spinner(1, progress);
        
        ftxui::Screen screen = ftxui::Screen::Create(ftxui::Dimension::Full());
        Render(screen, spinner);
        screen.Print();
        usleep(100000);
    }

在这里插入图片描述

Paragraph 段落文本显示部件

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

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

使用示例：显示一段文本，自动进行内容换行和对齐。

    while (true)
    {
        auto paragraph = ftxui::paragraph("Words are the harbor of the soul and the bridge connecting us to the world. In the world of words, we can feel the vicissitudes of history and appreciate the beauty of life.");

        ftxui::Screen screen = ftxui::Screen::Create(ftxui::Dimension::Full());
        Render(screen, paragraph);
        screen.Print();
        usleep(100000);
    }

在这里插入图片描述

graph部件

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

Element graph(GraphFunction);

GraphFunction是需要自定义的算法：

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

emptyElement 空元素

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

Element emptyElement();

canvas 画布

canvas画布用来绘制一个图形。

Element canvas(ConstRef<Canvas>);//从一个已有的画布构建一个新的画布
Element canvas(int width, int height, std::function<void(Canvas&)>);// 创建一个指定宽高的画布
Element canvas(std::function<void(Canvas&)>);// 创建一个指定的画布

使用示例：

    while (true)
    {
        auto callback = [](ftxui::Canvas &canvas) {
            canvas.DrawPointLine(0,0, 20,30, ftxui::Color::Red);
            canvas.DrawPointCircle(40,40, 10, ftxui::Color::Blue);
            canvas.DrawText(10, 20, "this canvas text!");
        };
        auto canvas = ftxui::canvas(100, 80, callback);

        ftxui::Screen screen = ftxui::Screen::Create(ftxui::Dimension::Full());
        Render(screen, canvas);
        screen.Print();
        usleep(100000);
    }

在这里插入图片描述

装饰器

样式

bold 字体加粗

Element bold(Element);//加粗

dim 字体暗淡

Element dim(Element);//暗淡

italic 斜体

Element italic(Element);//斜体

inverted 字体和背景翻转

Element inverted(Element);//字体和背景反转

underlined 下划线

Element underlined(Element);//下划线

underlinedDouble 双下划线

Element underlinedDouble(Element);//双下划线

blink 闪烁

Element blink(Element);//闪烁

strikethrough 删除线

Element strikethrough(Element);//删除线

color 字体颜色

Decorator color(Color);//设置前景色(文本颜色)

bgcolor 背景颜色

Decorator bgcolor(Color);//设置背景色(背景颜色)

color 字体颜色渐变

Decorator color(const LinearGradient&);//设置渐变的前景色(文本颜色)

bgcolor 背景颜色渐变

Decorator bgcolor(const LinearGradient&);设置渐变的背景色(背景颜色)

使用示例：

    while (true)
    {
        auto normal_text = ftxui::text("normal text");
        auto bold_text = ftxui::text("bold text") | ftxui::bold;
        auto dim_text = ftxui::text("dim text") | ftxui::dim;
        auto italic_text = ftxui::text("italic text") | ftxui::italic;
        auto inverted_text = ftxui::text("inverted text") | ftxui::inverted;
        auto underlined_text = ftxui::text("underlined text") | ftxui::underlined;
        auto underlinedDouble_text = ftxui::text("underlinedDouble text") | ftxui::underlinedDouble;
        auto blink_text = ftxui::text("blink text") | ftxui::blink;
        auto strikethrough_text = ftxui::text("strikethrough text") | ftxui::strikethrough;
        auto color_text = ftxui::text("color text") | ftxui::color(ftxui::Color::Green);
        auto bgcolor_text = ftxui::text("bgcolor text") | ftxui::bgcolor(ftxui::Color::Red);
        auto LinearGradient_color_text = ftxui::text("LinearGradient color text") | ftxui::color(ftxui::LinearGradient(ftxui::Color::Green, ftxui::Color::Red));
        auto LinearGradient_bgcolor_text = ftxui::text("LinearGradient bgcolor text") | ftxui::bgcolor(ftxui::LinearGradient(ftxui::Color::Green, ftxui::Color::Red));
        auto focusPosition_text = ftxui::text("focusPosition text") | ftxui::focusPosition(0,0);
        auto focusPositionRelative_text = ftxui::text("focusPositionRelative text") | ftxui::focusPositionRelative(0,0);
        auto automerge_text = ftxui::text("automerge text") | ftxui::automerge;
        auto hyperlink_text = ftxui::text("hyperlink text") | ftxui::hyperlink("https://www.baidu.com");
        auto selectionStyleReset_text = ftxui::text("selectionStyleReset") | ftxui::selectionStyleReset;
        auto selectionColor_text = ftxui::text("selectionColor") | ftxui::selectionColor(ftxui::Color::Red);
        auto selectionBackgroundColor_text = ftxui::text("selectionBackgroundColor") | ftxui::selectionBackgroundColor(ftxui::Color::Red);
        auto selectionForegroundColor_text = ftxui::text("selectionForegroundColor") | ftxui::selectionForegroundColor(ftxui::Color::Red);
        auto style = [](ftxui::Pixel& pixel){
        };
        auto selectionStyle_text = ftxui::text("selectionStyle") | ftxui::selectionStyle(style);

        auto view = ftxui::vbox({
            normal_text,
            bold_text,
            dim_text,
            italic_text,
            inverted_text,
            underlined_text,
            underlinedDouble_text,
            blink_text,
            strikethrough_text,
            color_text,
            bgcolor_text,
            LinearGradient_color_text,
            LinearGradient_bgcolor_text,
            focusPosition_text,
            focusPositionRelative_text,
            automerge_text,
            hyperlink_text,
            selectionStyleReset_text,
            selectionColor_text,
            selectionBackgroundColor_text,
            selectionForegroundColor_text,
            selectionStyle_text
        });
        ftxui::Screen screen = ftxui::Screen::Create(ftxui::Dimension::Full());
        Render(screen, view);
        screen.Print();
        usleep(100000);
    }

在这里插入图片描述

其他样式

Decorator focusPosition(int x, int y);//焦点位置
Decorator focusPositionRelative(float x, float y);//焦点位置
Element automerge(Element child);//自动合并子节点元素
Decorator hyperlink(std::string link);//设置超链接
Element selectionStyleReset(Element);//设置选中元素的样式
Decorator selectionColor(Color foreground);//设置选中颜色
Decorator selectionBackgroundColor(Color foreground);//设置选中背景色
Decorator selectionForegroundColor(Color foreground);//设置选中前景色
Decorator selectionStyle(std::function<void(Pixel&)> style);//设置选中自定义样式

布局容器

hbox 水平布局

Element hbox(Elements);// 水平布局

使用示例：元素会按照从左往右顺序水平排列

    while (true)
    {
        auto normal_text = ftxui::border(ftxui::text("normal text"));
        auto bold_text = ftxui::border(ftxui::text("bold text") | ftxui::bold);
        auto dim_text = ftxui::border(ftxui::text("dim text") | ftxui::dim);
        auto view = ftxui::hbox({
            normal_text,
            bold_text,
            dim_text,
        });
        ftxui::Screen screen = ftxui::Screen::Create(ftxui::Dimension::Full());
        Render(screen, view);
        screen.Print();
        usleep(100000);
    }

在这里插入图片描述

vbox 垂直布局

Element vbox(Elements);// 垂直布局

使用示例：元素会按照从上往下顺序垂直排列

    while (true)
    {
        auto normal_text = ftxui::border(ftxui::text("normal text"));
        auto bold_text = ftxui::border(ftxui::text("bold text") | ftxui::bold);
        auto dim_text = ftxui::border(ftxui::text("dim text") | ftxui::dim);
        auto view = ftxui::vbox({
            normal_text,
            bold_text,
            dim_text,
        });
        ftxui::Screen screen = ftxui::Screen::Create(ftxui::Dimension::Full());
        Render(screen, view);
        screen.Print();
        usleep(100000);
    }

在这里插入图片描述

dbox 堆叠布局

Element dbox(Elements);// 堆叠布局

使用示例：内层元素内容被外层元素内容覆盖，元素会按照从内往外顺序堆叠。

    while (true)
    {
        auto normal_text = ftxui::border(ftxui::text("AAAAAAAA"));
        auto bold_text = ftxui::border(ftxui::text("BBBBB") | ftxui::bold);
        auto dim_text = ftxui::border(ftxui::text("CCC") | ftxui::dim);
        auto view = ftxui::dbox({
            normal_text,
            bold_text,
            dim_text,
        });
        ftxui::Screen screen = ftxui::Screen::Create(ftxui::Dimension::Full());
        Render(screen, view);
        screen.Print();
        usleep(100000);
    }

在这里插入图片描述

gridbox 网格布局

Element gridbox(std::vector<Elements> lines); // 网格布局

使用示例：元素会按照二维数组进行网格排列

    while (true)
    {
        auto normal_text = ftxui::border(ftxui::text("AAAAAAAA"));
        auto bold_text = ftxui::border(ftxui::text("BBBBB") | ftxui::bold);
        auto empty_element = ftxui::emptyElement();
        auto dim_text = ftxui::border(ftxui::text("CCC") | ftxui::dim);
        auto view = ftxui::gridbox({
            {normal_text, bold_text},
            {empty_element,dim_text},
        });
        ftxui::Screen screen = ftxui::Screen::Create(ftxui::Dimension::Full());
        Render(screen, view);
        screen.Print();
        usleep(100000);
    }

在这里插入图片描述

hflow 水平流式布局

Element hflow(Elements);  // 水平流式布局

使用实例：元素会按照从左到右，从上到下的顺序进行流式布局排列

    while (true)
    {
        auto A_text = ftxui::border(ftxui::text("AAAAAAAA"));
        auto B_text = ftxui::border(ftxui::text("BBBBBBBB") | ftxui::bold);
        auto C_text = ftxui::border(ftxui::text("CCCCCCCC") | ftxui::dim);
        auto D_text = ftxui::border(ftxui::text("DDDDDDDD") | ftxui::italic);
        auto view = ftxui::hflow({
           A_text, B_text, C_text, D_text,
        });
        ftxui::Screen screen = ftxui::Screen::Create(ftxui::Dimension::Full());
        Render(screen, view);
        screen.Print();
        usleep(100000);
    }

在这里插入图片描述

vflow 垂直流式布局

Element vflow(Elements);  // 垂直流式布局

使用示例：元素会按照从上到下，从左到右的顺序进行流式布局排列

    while (true)
    {
        auto A_text = ftxui::border(ftxui::text("AAAAAAAA"));
        auto B_text = ftxui::border(ftxui::text("BBBBBBBB") | ftxui::bold);
        auto C_text = ftxui::border(ftxui::text("CCCCCCCC") | ftxui::dim);
        auto D_text = ftxui::border(ftxui::text("DDDDDDDD") | ftxui::italic);
        auto view = ftxui::vflow({
           A_text, B_text, C_text, D_text,
        });
        ftxui::Screen screen = ftxui::Screen::Create(ftxui::Dimension::Full());
        Render(screen, view);
        screen.Print();
        usleep(100000);
    }

在这里插入图片描述

flexbox 自定义流式布局

Element flexbox(Elements, FlexboxConfig config = FlexboxConfig());// 流式布局

使用示例：元素会按照从右到左，从下到上的自定义排列

    while (true)
    {
        auto A_text = ftxui::border(ftxui::text("AAAAAAAA"));
        auto B_text = ftxui::border(ftxui::text("BBBBBBBB") | ftxui::bold);
        auto C_text = ftxui::border(ftxui::text("CCCCCCCC") | ftxui::dim);
        auto D_text = ftxui::border(ftxui::text("DDDDDDDD") | ftxui::italic);
        ftxui::FlexboxConfig flexboxConfig = ftxui::FlexboxConfig()
                .Set(ftxui::FlexboxConfig::Direction::RowInversed)//设置流式布局方向:从右到左
                .Set(ftxui::FlexboxConfig::Wrap::WrapInversed)//设置流式布局Wrap属性:从下到上
                .Set(ftxui::FlexboxConfig::JustifyContent::FlexStart)
                .Set(ftxui::FlexboxConfig::AlignItems::FlexStart)
                .Set(ftxui::FlexboxConfig::AlignContent::FlexStart)
                .SetGap(0, 0);
        auto view = ftxui::flexbox({
           A_text, B_text, C_text, D_text,
        }, flexboxConfig);
        ftxui::Screen screen = ftxui::Screen::Create(ftxui::Dimension::Full());
        Render(screen, view);
        screen.Print();
        usleep(100000);
    }

在这里插入图片描述

Flexibility 布局属性

定义当容器内剩余空间未被全部使用时如何共享剩余空间。

flex 展开或收缩空间

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

Element flex(Element);

使用示例：

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

效果：

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

flex_grow 展开空间

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

Element flex_grow(Element);

使用示例：

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

效果：

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

flex_shrink 收缩空间

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

Element flex_shrink(Element);

使用示例：

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

效果：

╭────╮╭──────╮╭─────╮
│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属性。

filler 占位符

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

Element filler();

使用示例：

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

效果：

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

Frame 帧

frame是一个可滚动的区域。其内部区域可能大于外部区域。滚动内部区域是为了使焦点元素可见。

Element frame(Element);
Element xframe(Element);
Element yframe(Element);
Element focus(Element);
Element select(Element e);  // 废弃 - 属于 focus 的别名

使用示例：

    while (true)
    {
        auto text = ftxui::border(ftxui::text("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."));
        auto frame_view = ftxui::yframe(text);
        ftxui::Screen screen = ftxui::Screen::Create(ftxui::Dimension::Full());
        Render(screen, frame_view);
        screen.Print();
        usleep(100000);
    }

在这里插入图片描述

center 文本显示对齐

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

Cursor 设置光标样式

这些类似于“焦点”，但也会改变光标的形状。

Element focusCursorBlock(Element);
Element focusCursorBlockBlinking(Element);
Element focusCursorBar(Element);
Element focusCursorBarBlinking(Element);
Element focusCursorUnderline(Element);
Element focusCursorUnderlineBlinking(Element);

标签

#c++