ftxui / component

目录

• Input
  • Filtered input
• Menu
• Toggle
• CheckBox
• RadioBox
• Dropdown
• Slider
• Renderer
• CatchEvent
• Collapsible
• Maybe
• Container
  • Horizontal
  • Vertical
  • Tab
• ResizableSplit
• Force a frame redraw.

ftxui::component 模块定义了生成响应用户事件（键盘、鼠标等）的交互式组件的逻辑。

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

ftxui::ScreenInteractive 定义了一个渲染组件的主循环。

ftxui::Component 是 ftxui::ComponentBase 的共享指针。后者定义了：

• ftxui::ComponentBase::Render()：如何渲染界面。
• ftxui::ComponentBase::OnEvent()：如何响应事件。
• ftxui::ComponentBase::Add()：在两个组件之间构建父子关系。组件树用于定义如何使用键盘进行导航。

ftxui::Element 用于渲染单个帧。

ftxui::Component 用于渲染动态用户界面，生成多个帧，并在事件发生时更新其状态。

组件库 (多种组件的集合)。(演示)

所有预定义组件都可以在 "ftxui/dom/component.hpp" 中找到

// 版权所有 2021 Arthur Sonzogni。保留所有权利。
// 此源代码的使用受 MIT 许可的约束，MIT 许可可在
// LICENSE 文件中找到。
#ifndef FTXUI_COMPONENT_HPP
#define FTXUI_COMPONENT_HPP
 
#include <functional>  // for function
#include <memory>      // for make_shared, shared_ptr
#include <utility>     // for forward
 
#include <ftxui/util/warn_windows_macro.hpp>
#include "ftxui/component/component_base.hpp"  // for Component, Components
#include "ftxui/component/component_options.hpp"  // for ButtonOption, CheckboxOption, MenuOption
#include "ftxui/dom/elements.hpp"  // for Element
#include "ftxui/util/ref.hpp"  // for ConstRef, Ref, ConstStringRef, ConstStringListRef, StringRef
 
namespace ftxui {
struct ButtonOption;
struct CheckboxOption;
struct Event;
struct InputOption;
struct MenuOption;
struct RadioboxOption;
struct MenuEntryOption;
 
template <class T, class... Args>
std::shared_ptr<T> Make(Args&&... args) {
  return std::make_shared<T>(std::forward<Args>(args)...);
}
 
// 用于装饰组件的管道运算符。
using ComponentDecorator = std::function<Component(Component)>;
using ElementDecorator = std::function<Element(Element)>;
Component operator|(Component component, ComponentDecorator decorator);
Component operator|(Component component, ElementDecorator decorator);
Component& operator|=(Component& component, ComponentDecorator decorator);
Component& operator|=(Component& component, ElementDecorator decorator);
 
namespace Container {
Component Vertical(Components children);
Component Vertical(Components children, int* selector);
Component Horizontal(Components children);
Component Horizontal(Components children, int* selector);
Component Tab(Components children, int* selector);
Component Stacked(Components children);
}  // namespace Container
 
Component Button(ButtonOption options);
Component Button(ConstStringRef label,
                 std::function<void()> on_click,
                 ButtonOption options = ButtonOption::Simple());
 
Component Checkbox(CheckboxOption options);
Component Checkbox(ConstStringRef label,
                   bool* checked,
                   CheckboxOption options = CheckboxOption::Simple());
 
Component Input(InputOption options = {});
Component Input(StringRef content, InputOption options = {});
Component Input(StringRef content,
                StringRef placeholder,
                InputOption options = {});
 
Component Menu(MenuOption options);
Component Menu(ConstStringListRef entries,
               int* selected_,
               MenuOption options = MenuOption::Vertical());
Component MenuEntry(MenuEntryOption options);
Component MenuEntry(ConstStringRef label, MenuEntryOption options = {});
 
Component Radiobox(RadioboxOption options);
Component Radiobox(ConstStringListRef entries,
                   int* selected_,
                   RadioboxOption options = {});
 
Component Dropdown(ConstStringListRef entries, int* selected);
Component Dropdown(DropdownOption options);
 
Component Toggle(ConstStringListRef entries, int* selected);
 
// 通用滑块构造函数：
template <typename T>
Component Slider(SliderOption<T> options);
 
// 不带“SliderOption”构造函数的简写：
Component Slider(ConstStringRef label,
                 Ref<int> value,
                 ConstRef<int> min = 0,
                 ConstRef<int> max = 100,
                 ConstRef<int> increment = 5);
Component Slider(ConstStringRef label,
                 Ref<float> value,
                 ConstRef<float> min = 0.f,
                 ConstRef<float> max = 100.f,
                 ConstRef<float> increment = 5.f);
Component Slider(ConstStringRef label,
                 Ref<long> value,
                 ConstRef<long> min = 0L,
                 ConstRef<long> max = 100L,
                 ConstRef<long> increment = 5L);
 
Component ResizableSplit(ResizableSplitOption options);
Component ResizableSplitLeft(Component main, Component back, int* main_size);
Component ResizableSplitRight(Component main, Component back, int* main_size);
Component ResizableSplitTop(Component main, Component back, int* main_size);
Component ResizableSplitBottom(Component main, Component back, int* main_size);
 
Component Renderer(Component child, std::function<Element()>);
Component Renderer(std::function<Element()>);
Component Renderer(std::function<Element(bool /* focused */)>);
ComponentDecorator Renderer(ElementDecorator);
 
Component CatchEvent(Component child, std::function<bool(Event)>);
ComponentDecorator CatchEvent(std::function<bool(Event)> on_event);
 
Component Maybe(Component, const bool* show);
Component Maybe(Component, std::function<bool()>);
ComponentDecorator Maybe(const bool* show);
ComponentDecorator Maybe(std::function<bool()>);
 
Component Modal(Component main, Component modal, const bool* show_modal);
ComponentDecorator Modal(Component modal, const bool* show_modal);
 
Component Collapsible(ConstStringRef label,
                      Component child,
                      Ref<bool> show = false);
 
Component Hoverable(Component component, bool* hover);
Component Hoverable(Component component,
                    std::function<void()> on_enter,
                    std::function<void()> on_leave);
Component Hoverable(Component component,  //
                    std::function<void(bool)> on_change);
ComponentDecorator Hoverable(bool* hover);
ComponentDecorator Hoverable(std::function<void()> on_enter,
                             std::function<void()> on_leave);
ComponentDecorator Hoverable(std::function<void(bool)> on_change);
 
Component Window(WindowOptions option);
 
}  // namespace ftxui
 
#endif /* end of include guard: FTXUI_COMPONENT_HPP */

Input

示例:

由以下生成: ftxui::Input() 来自 "ftxui/component/component.hpp"

Filtered input

可以使用 ftxui::CatchEvent 过滤输入组件接收到的字符。

std::string phone_number;
Component input = Input(&phone_number, "phone number");
 
// Filter out non-digit characters.
input |= CatchEvent([&](Event event) {
  return event.is_character() && !std::isdigit(event.character()[0]);
});
 
// Filter out characters past the 10th one.
input |= CatchEvent([&](Event event) {
  return event.is_character() && phone_number.size() >= 10;
});

Menu

定义一个菜单对象。它包含一个条目列表，其中一个被选中。

示例:

由以下生成: ftxui::Menu() 来自 "ftxui/component/component.hpp"

Toggle

一种特殊的菜单。条目水平显示。

示例:

由以下生成: ftxui::Toggle() 来自 "ftxui/component/component.hpp"

CheckBox

该组件定义了一个复选框。它是一个可以打开/关闭的单个条目。

示例:

由以下生成: ftxui::Checkbox() 来自 "ftxui/component/component.hpp"

RadioBox

一个单选按钮组件。这是一个条目列表，其中一个可以被选中。

Dropdown

下拉菜单是一种组件，当打开时，它会显示一个元素列表供用户选择。

示例:

由以下生成: ftxui::Dropdown() 来自 "ftxui/component/component.hpp"

Slider

表示一个滑块对象，它由一个带有分箱中间间隔的范围组成。它可以通过 ftxui::Slider() 创建。

Example:

Produced by: ftxui::Slider() from "ftxui/component/component.hpp"

Renderer

由以下生成: ftxui::Renderer() 来自 ftxui/component/component.hpp。该组件通过使用不同的函数渲染界面来装饰另一个组件。

示例:

auto inner = [...]
 
 
 
auto renderer = Renderer(inner, [&] {
 
  return inner->Render() | border
 
});

ftxui::Renderer 也支持组件装饰器模式:

auto component = [...]
 
component = component
 
  | Renderer([](Element e) { return e | border))
 
  | Renderer(bold)

作为简写，你也可以将一个组件与一个元素装饰器组合:

auto component = [...]
 
component = component | border | bold;

CatchEvent

由以下生成: ftxui::CatchEvent() 来自 ftxui/component/component.hpp。

该组件装饰其他组件，在底层组件之前捕获事件。

示例:

auto screen = ScreenInteractive::TerminalOutput();
 
 
 
auto renderer = Renderer([] {
 
 
 
  return text("My interface");
 
 
 
});
 
 
 
auto component = CatchEvent(renderer, [&](Event event) {
 
 
 
  if (event == Event::Character('q')) {
 
 
 
    screen.ExitLoopClosure()();
 
 
 
    return true;
 
 
 
  }
 
 
 
  return false;
 
 
 
});
 
 
 
screen.Loop(component);

ftxui::CatchEvent 也可以用作装饰器:

component = component
 
 
 
  | CatchEvent(handler_1)
 
 
 
  | CatchEvent(handler_2)
 
 
 
  | CatchEvent(handler_3)
 
 
 
  ;

Collapsible

对于其可见性可以通过用户切换打开或关闭的视觉元素很有用。本质上，这是 ftxui::Checkbox() 和 ftxui::Maybe() 组件的组合。

auto collapsible = Collapsible("Show more", inner_element);

Maybe

由以下生成: ftxui::Maybe() 来自 ftxui/component/component.hpp。

该组件可以通过布尔值或谓词显示/隐藏任何其他组件。

布尔值示例:

bool show = true;
 
 
 
auto component = Renderer([]{ return "Hello World!"; });
 
 
 
auto maybe_component = Maybe(component, &show)

谓词示例:

auto component = Renderer([]{ return "Hello World!"; });
 
 
 
auto maybe_component = Maybe(component, [&] { return time > 10; })

像往常一样，ftxui::Maybe 也可以用作装饰器:

component = component
 
 
 
  | Maybe(&a_boolean)
 
 
 
  | Maybe([&] { return time > 10; })
 
 
 
  ;

Container

Horizontal

由以下生成: ftxui::Container::Horizontal() 来自 "ftxui/component/component.hpp"。它水平显示组件列表并处理键盘/鼠标导航。

Vertical

由以下生成: ftxui::Container::Vertical() 来自 "ftxui/component/component.hpp"。它垂直显示组件列表并处理键盘/鼠标导航。

Tab

由以下生成: ftxui::Container::Tab() 来自 "ftxui/component/component.hpp"。它接受一个组件列表并只显示其中一个。这对于实现选项卡栏很有用。

Vertical:

Horizontal:

ResizableSplit

它定义了两个子组件之间的水平或垂直分隔。分隔的位置是可变的，可以通过鼠标控制。

有四种可能的分隔:

• ftxui::ResizableSplitLeft()
• ftxui::ResizableSplitRight()
• ftxui::ResizableSplitTop()
• ftxui::ResizableSplitBottom()

来自 "ftxui/component/component.hpp"

示例:

Force a frame redraw.

通常，ftxui::ScreenInteractive::Loop() 负责在处理完一组新事件（例如键盘、鼠标、窗口大小调整等）时绘制新帧。但是，你可能希望对 FTXUI 未知的任意事件作出反应。为了实现这一点，你必须通过线程使用 ftxui::ScreenInteractive::PostEvent（**这是线程安全的**）发布事件。你必须发布事件 ftxui::Event::Custom。

示例:

screen->PostEvent(Event::Custom);

如果你不需要处理新事件，可以使用:

screen->RequestAnimationFrame();

代替。