ftxui / component

Table of Contents

• Input
  • 过滤输入
• Menu
• Toggle
• CheckBox
• RadioBox
• Dropdown
• Slider
• Renderer
• CatchEvent
• Collapsible
• Maybe
• Container
  • Horizontal
  • Vertical
  • Tab
• ResizableSplit
• 强制重绘帧。

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" 中找到。

// Copyright 2021 Arthur Sonzogni. All rights reserved.
// Use of this source code is governed by the MIT license that can be found in
// the LICENSE file.
#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/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)...);
}
 
// Pipe operator to decorate components.
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);
 
// General slider constructor:
template <typename T>
Component Slider(SliderOption<T> options);
 
// Shorthand without the `SliderOption` constructor:
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/component/component.hpp" 中的 ftxui::Input() 生成。

过滤输入

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

std::string phone_number;
Component input = Input(&phone_number, "phone number");
 
// 过滤掉非数字字符。
input |= CatchEvent([&](Event event) {
  return event.is_character() && !std::isdigit(event.character()[0]);
});
 
// 过滤掉第10个字符之后的字符。
input |= CatchEvent([&](Event event) {
  return event.is_character() && phone_number.size() >= 10;
});

Menu

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

示例：

由 "ftxui/component/component.hpp" 中的 ftxui::Menu() 生成。

Toggle

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

示例：

由 "ftxui/component/component.hpp" 中的 ftxui::Toggle() 生成。

CheckBox

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

示例：

由 "ftxui/component/component.hpp" 中的 ftxui::Checkbox() 生成。

RadioBox

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

示例：

由 "ftxui/component/component.hpp" 中的 ftxui::Radiobox() 生成。

Dropdown

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

示例：

由 "ftxui/component/component.hpp" 中的 ftxui::Dropdown() 生成。

Slider

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

示例：

由 "ftxui/component/component.hpp" 中的 ftxui::Slider() 生成。

Renderer

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

示例：

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/component/component.hpp 中的 ftxui::CatchEvent() 生成。此组件装饰其他组件，在底层组件之前捕获事件。

示例：

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/component/component.hpp 中的 ftxui::Maybe() 生成。此组件可以通过布尔值或谓词来显示/隐藏任何其他组件。

布尔值示例：

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/component/component.hpp" 中的 ftxui::Container::Horizontal() 生成。它水平显示组件列表并处理键盘/鼠标导航。

Vertical

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

Tab

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

垂直：

水平：

ResizableSplit

它定义了两个子组件之间的水平或垂直分隔。分隔的位置是可变的，并且可以使用鼠标控制。 有四种可能的分隔：

• ftxui::ResizableSplitLeft()
• ftxui::ResizableSplitRight()
• ftxui::ResizableSplitTop()
• ftxui::ResizableSplitBottom() 来自 "ftxui/component/component.hpp"

示例：

强制重绘帧。

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

示例：

screen->PostEvent(Event::Custom);

如果您不需要处理新事件，可以使用：

screen->RequestAnimationFrame();

代替。