#include <stddef.h>
#include <memory>
#include <string>
#include <vector>
auto screen = ScreenInteractive::Fullscreen();
int direction_index = 0;
int wrap_index = 0;
int justify_content_index = 0;
int align_items_index = 0;
int align_content_index = 0;
std::vector<std::string> directions = {
"Row",
"RowInversed",
"Column",
"ColumnInversed",
};
std::vector<std::string> wraps = {
"NoWrap",
"Wrap",
"WrapInversed",
};
std::vector<std::string> justify_content = {
"FlexStart", "FlexEnd", "Center", "Stretch",
"SpaceBetween", "SpaceAround", "SpaceEvenly",
};
std::vector<std::string> align_items = {
"FlexStart",
"FlexEnd",
"Center",
"Stretch",
};
std::vector<std::string> align_content = {
"FlexStart", "FlexEnd", "Center", "Stretch",
"SpaceBetween", "SpaceAround", "SpaceEvenly",
};
auto radiobox_direction = Radiobox(&directions, &direction_index);
auto radiobox_wrap = Radiobox(&wraps, &wrap_index);
auto radiobox_justify_content =
Radiobox(&justify_content, &justify_content_index);
auto radiobox_align_items = Radiobox(&align_items, &align_items_index);
auto radiobox_align_content = Radiobox(&align_content, &align_content_index);
bool element_xflex_grow = false;
bool element_yflex_grow = false;
bool group_xflex_grow = true;
bool group_yflex_grow = true;
auto checkbox_element_xflex_grow =
Checkbox("element |= xflex_grow", &element_xflex_grow);
auto checkbox_element_yflex_grow =
Checkbox("element |= yflex_grow", &element_yflex_grow);
auto checkbox_group_xflex_grow =
Checkbox("group |= xflex_grow", &group_xflex_grow);
auto checkbox_group_yflex_grow =
Checkbox("group |= yflex_grow", &group_yflex_grow);
auto make_box = [&](
size_t dimx,
size_t dimy,
size_t index) {
std::string title = std::to_string(dimx) + "x" + std::to_string(dimy);
auto element =
window(text(title) | hcenter | bold,
text(std::to_string(index)) | hcenter | dim) |
size(WIDTH, EQUAL, dimx) | size(HEIGHT, EQUAL, dimy) |
bgcolor(Color::HSV(index * 25, 255, 255)) |
if (element_xflex_grow) {
element = element | xflex_grow;
}
if (element_yflex_grow) {
element = element | yflex_grow;
}
return element;
};
auto content_renderer = Renderer([&] {
auto group = flexbox(
{
},
config);
group = group |
bgcolor(Color::Black);
group = group | notflex;
if (!group_xflex_grow) {
group = hbox(group, filler());
}
if (!group_yflex_grow) {
group = vbox(group, filler());
}
group = group | flex;
return group;
});
.
Set(FlexboxConfig::JustifyContent::Center)
.
Set(FlexboxConfig::AlignContent::Center);
int space_right = 10;
int space_bottom = 1;
content_renderer = ResizableSplitRight(
Renderer([&] { return flexbox({text("resizable")}, center); }),
content_renderer, &space_right);
content_renderer = ResizableSplitBottom(
Renderer([&] { return flexbox({text("resizable")}, center); }),
content_renderer, &space_bottom);
auto main_container = Container::Vertical({
Container::Horizontal({
radiobox_direction,
radiobox_wrap,
Container::Vertical({
checkbox_element_xflex_grow,
checkbox_element_yflex_grow,
checkbox_group_xflex_grow,
checkbox_group_yflex_grow,
}),
}),
Container::Horizontal({
radiobox_justify_content,
radiobox_align_items,
radiobox_align_content,
}),
content_renderer,
});
auto main_renderer = Renderer(main_container, [&] {
return vbox({
vbox({hbox({
window(text(
"FlexboxConfig::Direction"),
radiobox_direction->Render()),
window(text(
"FlexboxConfig::Wrap"), radiobox_wrap->Render()),
vbox({
checkbox_element_xflex_grow->Render(),
checkbox_element_yflex_grow->Render(),
checkbox_group_xflex_grow->Render(),
checkbox_group_yflex_grow->Render(),
})),
}),
hbox({
window(text(
"FlexboxConfig::JustifyContent"),
radiobox_justify_content->Render()),
window(text(
"FlexboxConfig::AlignItems"),
radiobox_align_items->Render()),
window(text(
"FlexboxConfig::AlignContent"),
radiobox_align_content->Render()),
})}),
content_renderer->Render() | flex |
border,
});
});
screen.Loop(main_renderer);
return 0;
}
Element make_box(int x, int y)
AlignContent align_content
Wrap
默认情况下,弹性项目将全部尝试适应一行。您可以通过此属性更改它,并允许项目根据需要换行。
JustifyContent justify_content
FlexboxConfig & Set(FlexboxConfig::Direction)
设置 flexbox 方向。
Element window(Element title, Element content, BorderStyle border)
绘制带有标题和边框的窗口。
Element color(const LinearGradient &gradient, Element child)
使用线性渐变效果设置元素的前景色。
Element bgcolor(const LinearGradient &gradient, Element child)
使用线性渐变效果设置元素的背景色。
Element border(Element child)
在元素周围绘制边框。
FlexboxConfig 是一个配置结构体,定义了弹性盒子容器的布局属性。
#include "ftxui/component/component_base.hpp" // 用于 ComponentBase