FTXUI 6.1.9
C++ functional terminal UI.
Loading...
Searching...
No Matches
flexbox_gallery.cpp
Go to the documentation of this file.
1// 版權所有 2020 Arthur Sonzogni. 保留所有權利。
2// 此原始碼的使用受 MIT 許可證約束,該許可證可在
3// LICENSE 文件中找到。
4#include <stddef.h> // for size_t
5#include <memory> // for shared_ptr, __shared_ptr_access, allocator
6#include <string> // for string, basic_string, to_string, operator+, char_traits
7#include <vector> // for vector
8
9#include "ftxui/component/captured_mouse.hpp" // for ftxui
10#include "ftxui/component/component.hpp" // for Radiobox, Vertical, Checkbox, Horizontal, Renderer, ResizableSplitBottom, ResizableSplitRight
11#include "ftxui/component/component_base.hpp" // for ComponentBase
12#include "ftxui/component/screen_interactive.hpp" // for ScreenInteractive
13#include "ftxui/dom/elements.hpp" // for text, window, operator|, vbox, hbox, Element, flexbox, bgcolor, filler, flex, size, border, hcenter, color, EQUAL, bold, dim, notflex, xflex_grow, yflex_grow, HEIGHT, WIDTH
14#include "ftxui/dom/flexbox_config.hpp" // for FlexboxConfig, FlexboxConfig::AlignContent, FlexboxConfig::JustifyContent, FlexboxConfig::AlignContent::Center, FlexboxConfig::AlignItems, FlexboxConfig::Direction, FlexboxConfig::JustifyContent::Center, FlexboxConfig::Wrap
15#include "ftxui/screen/color.hpp" // for Color, Color::Black
16
17using namespace ftxui;
18
19int main() {
20 auto screen = ScreenInteractive::Fullscreen();
21
22 int direction_index = 0;
23 int wrap_index = 0;
24 int justify_content_index = 0;
25 int align_items_index = 0;
26 int align_content_index = 0;
27
28 std::vector<std::string> directions = {
29 "Row",
30 "RowInversed",
31 "Column",
32 "ColumnInversed",
33 };
34
35 std::vector<std::string> wraps = {
36 "NoWrap",
37 "Wrap",
38 "WrapInversed",
39 };
40
41 std::vector<std::string> justify_content = {
42 "FlexStart", "FlexEnd", "Center", "Stretch",
43 "SpaceBetween", "SpaceAround", "SpaceEvenly",
44 };
45
46 std::vector<std::string> align_items = {
47 "FlexStart",
48 "FlexEnd",
49 "Center",
50 "Stretch",
51 };
52
53 std::vector<std::string> align_content = {
54 "FlexStart", "FlexEnd", "Center", "Stretch",
55 "SpaceBetween", "SpaceAround", "SpaceEvenly",
56 };
57
58 auto radiobox_direction = Radiobox(&directions, &direction_index);
59 auto radiobox_wrap = Radiobox(&wraps, &wrap_index);
60 auto radiobox_justify_content =
61 Radiobox(&justify_content, &justify_content_index);
62 auto radiobox_align_items = Radiobox(&align_items, &align_items_index);
63 auto radiobox_align_content = Radiobox(&align_content, &align_content_index);
64
65 bool element_xflex_grow = false;
66 bool element_yflex_grow = false;
67 bool group_xflex_grow = true;
68 bool group_yflex_grow = true;
69 auto checkbox_element_xflex_grow =
70 Checkbox("element |= xflex_grow", &element_xflex_grow);
71 auto checkbox_element_yflex_grow =
72 Checkbox("element |= yflex_grow", &element_yflex_grow);
73 auto checkbox_group_xflex_grow =
74 Checkbox("group |= xflex_grow", &group_xflex_grow);
75 auto checkbox_group_yflex_grow =
76 Checkbox("group |= yflex_grow", &group_yflex_grow);
77
78 auto make_box = [&](size_t dimx, size_t dimy, size_t index) {
79 std::string title = std::to_string(dimx) + "x" + std::to_string(dimy);
80 auto element = window(text(title) | hcenter | bold,
81 text(std::to_string(index)) | hcenter | dim) |
82 size(WIDTH, EQUAL, dimx) | size(HEIGHT, EQUAL, dimy) |
83 bgcolor(Color::HSV(index * 25, 255, 255)) |
85 if (element_xflex_grow) {
86 element = element | xflex_grow;
87 }
88 if (element_yflex_grow) {
89 element = element | yflex_grow;
90 }
91 return element;
92 };
93
94 auto content_renderer = Renderer([&] {
95 FlexboxConfig config;
96 config.direction = static_cast<FlexboxConfig::Direction>(direction_index);
97 config.wrap = static_cast<FlexboxConfig::Wrap>(wrap_index);
98 config.justify_content =
99 static_cast<FlexboxConfig::JustifyContent>(justify_content_index);
100 config.align_items =
101 static_cast<FlexboxConfig::AlignItems>(align_items_index);
102 config.align_content =
103 static_cast<FlexboxConfig::AlignContent>(align_content_index);
104
105 auto group = flexbox(
106 {
107 make_box(8, 4, 0),
108 make_box(9, 6, 1),
109 make_box(11, 6, 2),
110 make_box(10, 4, 3),
111 make_box(13, 7, 4),
112 make_box(12, 4, 5),
113 make_box(12, 5, 6),
114 make_box(10, 4, 7),
115 make_box(12, 4, 8),
116 make_box(10, 5, 9),
117 },
118 config);
119
120 group = group | bgcolor(Color::Black);
121
122 group = group | notflex;
123
124 if (!group_xflex_grow) {
125 group = hbox(group, filler());
126 }
127 if (!group_yflex_grow) {
128 group = vbox(group, filler());
129 }
130
131 group = group | flex;
132 return group;
133 });
134
135 auto center = FlexboxConfig()
138 int space_right = 10;
139 int space_bottom = 1;
140 content_renderer = ResizableSplitRight(
141 Renderer([&] { return flexbox({text("resizable")}, center); }),
142 content_renderer, &space_right);
143 content_renderer = ResizableSplitBottom(
144 Renderer([&] { return flexbox({text("resizable")}, center); }),
145 content_renderer, &space_bottom);
146
147 auto main_container = Container::Vertical({
148 Container::Horizontal({
149 radiobox_direction,
150 radiobox_wrap,
151 Container::Vertical({
152 checkbox_element_xflex_grow,
153 checkbox_element_yflex_grow,
154 checkbox_group_xflex_grow,
155 checkbox_group_yflex_grow,
156 }),
157 }),
158 Container::Horizontal({
159 radiobox_justify_content,
160 radiobox_align_items,
161 radiobox_align_content,
162 }),
163 content_renderer,
164 });
165
166 auto main_renderer = Renderer(main_container, [&] {
167 return vbox({
168 vbox({hbox({
169 window(text("FlexboxConfig::Direction"),
170 radiobox_direction->Render()),
171 window(text("FlexboxConfig::Wrap"), radiobox_wrap->Render()),
172 window(text("Misc:"),
173 vbox({
174 checkbox_element_xflex_grow->Render(),
175 checkbox_element_yflex_grow->Render(),
176 checkbox_group_xflex_grow->Render(),
177 checkbox_group_yflex_grow->Render(),
178 })),
179 }),
180 hbox({
181 window(text("FlexboxConfig::JustifyContent"),
182 radiobox_justify_content->Render()),
183 window(text("FlexboxConfig::AlignItems"),
184 radiobox_align_items->Render()),
185 window(text("FlexboxConfig::AlignContent"),
186 radiobox_align_content->Render()),
187 })}),
188 content_renderer->Render() | flex | border,
189 });
190 });
191
192 screen.Loop(main_renderer);
193
194 return 0;
195}
Element make_box(int x, int y)
static ScreenInteractive Fullscreen()
Component Checkbox(CheckboxOption options)
Component Radiobox(RadioboxOption options)
元素清單,只能選擇一個。
Component Renderer(Component child, std::function< Element()>)
回傳一個新的元件,類似於 |child|,但使用 |render| 作為 Component::Render() 事件。
Component ResizableSplitRight(Component main, Component back, int *main_size)
兩個元件之間的水平分割,可透過滑鼠設定。
Component ResizableSplitBottom(Component main, Component back, int *main_size)
兩個元件之間的垂直分割,可透過滑鼠設定。
virtual void Render(Screen &screen)
@ Center
項目沿交叉軸居中。
JustifyContent justify_content
FlexboxConfig & Set(FlexboxConfig::Direction)
設定 flexbox 方向。
Decorator bgcolor(Color)
使用背景顏色進行裝飾。
Element window(Element title, Element content, BorderStyle border=ROUNDED)
繪製帶有標題和邊框的視窗。
Element xflex_grow(Element)
在 X 軸上盡可能擴展。
Definition flex.cpp:164
Decorator size(WidthOrHeight, Constraint, int value)
限制元素的大小。
Element flex(Element)
使子元素按比例擴展以佔據容器中剩餘的空間。
Definition flex.cpp:140
Element center(Element)
水平與垂直置中一個元素。
Element text(std::wstring text)
顯示一段 Unicode 文字。
Definition text.cpp:160
Element yflex_grow(Element)
在 Y 軸上盡可能擴展。
Definition flex.cpp:170
Element notflex(Element)
使元素不可伸縮。
Definition flex.cpp:194
Element filler()
一個元素,它會按比例擴展以佔據容器中剩餘的空間。
Definition flex.cpp:97
Element border(Element)
在元素周圍繪製邊框。
Decorator color(Color)
使用前景顏色進行裝飾。
Element vbox(Elements)
一個垂直一個接一個顯示元素的容器。
Definition vbox.cpp:95
FlexboxConfig 是一個配置結構,用於定義彈性盒容器的佈局屬性。
static Color HSV(uint8_t hue, uint8_t saturation, uint8_t value)
從 HSV 表示建立一個顏色。 https://en.wikipedia.org/wiki/HSL_and_HSV
FTXUI 的 ftxui:: 命名空間
Definition animation.hpp:10
Element flexbox(Elements, FlexboxConfig config=FlexboxConfig())
一個容器,用於在行/列中顯示元素,並在滿時能夠換行到下一列/行。
Definition flexbox.cpp:249
Element hbox(Elements)
一個逐一水平顯示元素的容器。
Definition hbox.cpp:94