Files
FTXUI/zh-CH/examples_2component_2homescreen_8cpp-example.html
2025-12-13 19:38:34 +00:00

874 lines
72 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!-- HTML header for doxygen 1.9.8-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=11"/>
<meta name="generator" content="Doxygen 1.12.0"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>FTXUI: examples/component/homescreen.cpp</title>
<link href="tabs.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="dynsections.js"></script>
<script type="text/javascript" src="doxygen-awesome-fragment-copy-button.js"></script>
<script type="text/javascript" src="doxygen-awesome-paragraph-link.js"></script>
<script type="text/javascript" src="doxygen-awesome-interactive-toc.js"></script>
<script type="text/javascript" src="doxygen-awesome-tabs.js"></script>
<script type="module">
DoxygenAwesomeFragmentCopyButton.init()
DoxygenAwesomeParagraphLink.init()
DoxygenAwesomeInteractiveToc.init()
DoxygenAwesomeTabs.init()
await new Promise(r => window.addEventListener('DOMContentLoaded', r));
// Remove title when a img[alt='title-img'] is present.
// Find an image with the alt "img-title".
const img = document.querySelector("img[alt='title-img']");
const header = document.querySelector(".headertitle");
if (img && header) {
// Hide the header title progressively.
header.style.display = "none";
// Show progressively the image.
img.style.maxHeight = "40vh";
img.style.maxWidth = "100%";
img.style.objectFit = "contain";
}
// In the "examples.html" page. Turn every link with text
// "examples/<...>
//
// Add a "demo" link toward.
// https://arthursonzogni.github.io/FTXUI/examples/?file=<...>
const examples = document.querySelectorAll("a")
examples.forEach((example) => {
if (!example.textContent.startsWith("examples/")) {
return;
}
// Remove the ".cpp" extension from the example name.
const exampleName = example.textContent.replace("examples/", "").replace(".cpp", "");
const a = document.createElement("a");
a.textContent = "[demo]";
a.href = "https://arthursonzogni.github.io/FTXUI/examples/?file=" + exampleName;
a.style.marginRight= "1em";
a.style.fontWeight = "bold";
example.parentElement.insertBefore(a, example)
});
// If the current URL ends with -example.html, we can add a link to the demo
// as well using the div.title textContent.
const url = new URL(window.location.href);
if (url.pathname.endsWith("-example.html")) {
// Get the title text.
const title = document.querySelector("div.title").textContent;
const example = title.replace("examples/", "").replace(".cpp", "");
// Create a link to the demo.
const a = document.createElement("a");
a.textContent = "[demo]";
a.href = "https://arthursonzogni.github.io/FTXUI/examples/?file=" + example;
a.style.marginLeft = "1em";
a.style.fontWeight = "bold";
a.style.display = "inline-block";
// Insert the link after the title.
const titleDiv = document.querySelector("div.title");
if (titleDiv) {
titleDiv.insertBefore(a, titleDiv.nextSibling);
}
}
</script>
<script type="module">
// Click on the navtree, except for the main page where this is already done
// automatically.
let delay = 0;
while(true) {
const navtree = document.querySelector("div.item.selected");
if (!navtree) {
delay *= 2;
delay += 1;
await new Promise(resolve => setTimeout(resolve, delay));
continue;
}
// Include only selected navtree items.
console.log("navtree.textContent", navtree.textContent);
if (!navtree.textContent.includes("Getting Started") &&
!navtree.textContent.includes("Installation") &&
!navtree.textContent.includes("ftxui / screen") &&
!navtree.textContent.includes("ftxui / dom") &&
!navtree.textContent.includes("ftxui / component") &&
!navtree.textContent.includes("Reference")) {
break;
}
// Find the first link inside the navtree.
const link = navtree.querySelector("a");
if (link) {
// Simulate a click on the link.
link.click();
break;
}
}
</script>
<link href="navtree.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="navtreedata.js"></script>
<script type="text/javascript" src="navtree.js"></script>
<script type="text/javascript" src="resize.js"></script>
<script type="text/javascript" src="cookie.js"></script>
<link href="search/search.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="search/searchdata.js"></script>
<script type="text/javascript" src="search/search.js"></script>
<link href="doxygen.css" rel="stylesheet" type="text/css" />
<link href="doxygen-awesome.css" rel="stylesheet" type="text/css"/>
<link href="stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="top"><!-- do not remove this div, it is closed by doxygen! -->
<div id="titlearea">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr id="projectrow">
<td id="projectalign">
<div id="projectname">FTXUI<span id="projectnumber">&#160;6.1.9</span>
</div>
<div id="projectbrief">C++ functional terminal UI.</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- end header part -->
<!-- 制作者 Doxygen 1.12.0 -->
<script type="text/javascript">
/* @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&amp;dn=expat.txt MIT */
var searchBox = new SearchBox("searchBox", "search/",'.html');
/* @license-end */
</script>
<script type="text/javascript">
/* @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&amp;dn=expat.txt MIT */
$(function() { codefold.init(0); });
/* @license-end */
</script>
<script type="text/javascript" src="menudata.js"></script>
<script type="text/javascript" src="menu.js"></script>
<script type="text/javascript">
/* @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&amp;dn=expat.txt MIT */
$(function() {
initMenu('',true,false,'search.php','搜索',true);
$(function() { init_search(); });
});
/* @license-end */
</script>
<div id="main-nav"></div>
</div><!-- top -->
<div id="side-nav" class="ui-resizable side-nav-resizable">
<div id="nav-tree">
<div id="nav-tree-contents">
<div id="nav-sync" class="sync"></div>
</div>
</div>
<div id="splitbar" style="-moz-user-select:none;"
class="ui-resizable-handle">
</div>
</div>
<script type="text/javascript">
/* @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&amp;dn=expat.txt MIT */
$(function(){initNavTree('examples_2component_2homescreen_8cpp-example.html',''); initResizable(true); });
/* @license-end */
</script>
<div id="doc-content">
<!-- window showing the filter options -->
<div id="MSearchSelectWindow"
onmouseover="return searchBox.OnSearchSelectShow()"
onmouseout="return searchBox.OnSearchSelectHide()"
onkeydown="return searchBox.OnSearchSelectKey(event)">
</div>
<!-- iframe showing the search results (closed by default) -->
<div id="MSearchResultsWindow">
<div id="MSearchResults">
<div class="SRPage">
<div id="SRIndex">
<div id="SRResults"></div>
<div class="SRStatus" id="Loading">载入中...</div>
<div class="SRStatus" id="Searching">搜索中...</div>
<div class="SRStatus" id="NoMatches">未找到</div>
</div>
</div>
</div>
</div>
<div class="header">
<div class="headertitle"><div class="title">examples/component/homescreen.cpp</div></div>
</div><!--header-->
<div class="contents">
<div class="fragment"><div class="line"><span class="comment">// 版权所有 2020 Arthur Sonzogni。保留所有权利。</span></div>
<div class="line"><span class="comment">// 本源代码的使用受 MIT 许可协议的约束,该协议可在</span></div>
<div class="line"><span class="comment">// LICENSE 文件中找到。</span></div>
<div class="line"><span class="preprocessor">#include &lt;stddef.h&gt;</span> <span class="comment">// for size_t</span></div>
<div class="line"><span class="preprocessor">#include &lt;array&gt;</span> <span class="comment">// for array</span></div>
<div class="line"><span class="preprocessor">#include &lt;atomic&gt;</span> <span class="comment">// for atomic</span></div>
<div class="line"><span class="preprocessor">#include &lt;chrono&gt;</span> <span class="comment">// for operator&quot;&quot;s, chrono_literals</span></div>
<div class="line"><span class="preprocessor">#include &lt;cmath&gt;</span> <span class="comment">// for sin</span></div>
<div class="line"><span class="preprocessor">#include &lt;<a class="code" href="loop_8hpp.html">ftxui/component/loop.hpp</a>&gt;</span></div>
<div class="line"><span class="preprocessor">#include &lt;functional&gt;</span> <span class="comment">// for ref, reference_wrapper, function</span></div>
<div class="line"><span class="preprocessor">#include &lt;memory&gt;</span> <span class="comment">// for allocator, shared_ptr, __shared_ptr_access</span></div>
<div class="line"><span class="preprocessor">#include &lt;string&gt;</span> <span class="comment">// for string, basic_string, char_traits, operator+, to_string</span></div>
<div class="line"><span class="preprocessor">#include &lt;thread&gt;</span> <span class="comment">// for sleep_for, thread</span></div>
<div class="line"><span class="preprocessor">#include &lt;utility&gt;</span> <span class="comment">// for move</span></div>
<div class="line"><span class="preprocessor">#include &lt;vector&gt;</span> <span class="comment">// for vector</span></div>
<div class="line"> </div>
<div class="line"><span class="preprocessor">#include &quot;../dom/color_info_sorted_2d.ipp&quot;</span> <span class="comment">// for ColorInfoSorted2D</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component_8hpp.html">ftxui/component/component.hpp</a>&quot;</span> <span class="comment">// for Checkbox, Renderer, Horizontal, Vertical, Input, Menu, Radiobox, ResizableSplitLeft, Tab</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__base_8hpp.html">ftxui/component/component_base.hpp</a>&quot;</span> <span class="comment">// for ComponentBase, Component</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="component__options_8hpp.html">ftxui/component/component_options.hpp</a>&quot;</span> <span class="comment">// for MenuOption, InputOption</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="event_8hpp.html">ftxui/component/event.hpp</a>&quot;</span> <span class="comment">// for Event, Event::Custom</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="screen__interactive_8hpp.html">ftxui/component/screen_interactive.hpp</a>&quot;</span> <span class="comment">// for Component, ScreenInteractive</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="elements_8hpp.html">ftxui/dom/elements.hpp</a>&quot;</span> <span class="comment">// for text, color, operator|, bgcolor, filler, Element, vbox, size, hbox, separator, flex, window, graph, EQUAL, paragraph, WIDTH, hcenter, Elements, bold, vscroll_indicator, HEIGHT, flexbox, hflow, border, frame, flex_grow, gauge, paragraphAlignCenter, paragraphAlignJustify, paragraphAlignLeft, paragraphAlignRight, dim, spinner, LESS_THAN, center, yframe, GREATER_THAN</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="flexbox__config_8hpp.html">ftxui/dom/flexbox_config.hpp</a>&quot;</span> <span class="comment">// for FlexboxConfig</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="color_8hpp.html">ftxui/screen/color.hpp</a>&quot;</span> <span class="comment">// for Color, Color::BlueLight, Color::RedLight, Color::Black, Color::Blue, Color::Cyan, Color::CyanLight, Color::GrayDark, Color::GrayLight, Color::Green, Color::GreenLight, Color::Magenta, Color::MagentaLight, Color::Red, Color::White, Color::Yellow, Color::YellowLight, Color::Default, Color::Palette256, ftxui</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="color__info_8hpp.html">ftxui/screen/color_info.hpp</a>&quot;</span> <span class="comment">// for ColorInfo</span></div>
<div class="line"><span class="preprocessor">#include &quot;<a class="code" href="terminal_8hpp.html">ftxui/screen/terminal.hpp</a>&quot;</span> <span class="comment">// for Size, Dimensions</span></div>
<div class="line"> </div>
<div class="line"><span class="keyword">using namespace </span><a class="code hl_namespace" href="namespaceftxui.html">ftxui</a>;</div>
<div class="line"> </div>
<div class="line"><span class="keywordtype">int</span> <a id="a0" name="a0"></a><a class="code hl_function" href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a>() {</div>
<div class="line"> <span class="keyword">auto</span> screen = ScreenInteractive::Fullscreen();</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// ---------------------------------------------------------------------------</span></div>
<div class="line"> <span class="comment">// HTOP 进程管理器</span></div>
<div class="line"> <span class="comment">// ---------------------------------------------------------------------------</span></div>
<div class="line"> <span class="keywordtype">int</span> shift = 0;</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> my_graph = [&amp;shift](<span class="keywordtype">int</span> width, <span class="keywordtype">int</span> height) {</div>
<div class="line"> std::vector&lt;int&gt; output(width);</div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keywordtype">int</span> i = 0; i &lt; width; ++i) {</div>
<div class="line"> <span class="keywordtype">float</span> v = 0.5f;</div>
<div class="line"> v += 0.1f * sin((i + shift) * 0.1f);</div>
<div class="line"> v += 0.2f * sin((i + shift + 10) * 0.15f);</div>
<div class="line"> v += 0.1f * sin((i + shift) * 0.03f);</div>
<div class="line"> v *= height;</div>
<div class="line"> output[i] = (int)v;</div>
<div class="line"> }</div>
<div class="line"> <span class="keywordflow">return</span> output;</div>
<div class="line"> };</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> htop = Renderer([&amp;] {</div>
<div class="line"> <span class="keyword">auto</span> frequency = vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;Frequency [Mhz]&quot;</span>) | hcenter,</div>
<div class="line"> hbox({</div>
<div class="line"> vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;2400 &quot;</span>),</div>
<div class="line"> filler(),</div>
<div class="line"> text(<span class="stringliteral">&quot;1200 &quot;</span>),</div>
<div class="line"> filler(),</div>
<div class="line"> text(<span class="stringliteral">&quot;0 &quot;</span>),</div>
<div class="line"> }),</div>
<div class="line"> graph(std::ref(my_graph)) | flex,</div>
<div class="line"> }) | flex,</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> utilization = vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;Utilization [%]&quot;</span>) | hcenter,</div>
<div class="line"> hbox({</div>
<div class="line"> vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;100 &quot;</span>),</div>
<div class="line"> filler(),</div>
<div class="line"> text(<span class="stringliteral">&quot;50 &quot;</span>),</div>
<div class="line"> filler(),</div>
<div class="line"> text(<span class="stringliteral">&quot;0 &quot;</span>),</div>
<div class="line"> }),</div>
<div class="line"> graph(std::ref(my_graph)) | <a id="a1" name="a1"></a><a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::RedLight),</div>
<div class="line"> }) | flex,</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> ram = vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;Ram [Mo]&quot;</span>) | hcenter,</div>
<div class="line"> hbox({</div>
<div class="line"> vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;8192&quot;</span>),</div>
<div class="line"> filler(),</div>
<div class="line"> text(<span class="stringliteral">&quot;4096 &quot;</span>),</div>
<div class="line"> filler(),</div>
<div class="line"> text(<span class="stringliteral">&quot;0 &quot;</span>),</div>
<div class="line"> }),</div>
<div class="line"> graph(std::ref(my_graph)) | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::BlueLight),</div>
<div class="line"> }) | flex,</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">return</span> hbox({</div>
<div class="line"> vbox({</div>
<div class="line"> frequency | flex,</div>
<div class="line"> separator(),</div>
<div class="line"> utilization | flex,</div>
<div class="line"> }) | flex,</div>
<div class="line"> separator(),</div>
<div class="line"> ram | flex,</div>
<div class="line"> }) |</div>
<div class="line"> flex;</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// ---------------------------------------------------------------------------</span></div>
<div class="line"> <span class="comment">// 编译器</span></div>
<div class="line"> <span class="comment">// ---------------------------------------------------------------------------</span></div>
<div class="line"> </div>
<div class="line"> <span class="keyword">const</span> std::vector&lt;std::string&gt; compiler_entries = {</div>
<div class="line"> <span class="stringliteral">&quot;gcc&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;clang&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;emcc&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;game_maker&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Ada compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;ALGOL 60 compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;ALGOL 68 compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Assemblers (Intel *86)&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Assemblers (Motorola 68*)&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Assemblers (Zilog Z80)&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Assemblers (other)&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;BASIC Compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;BASIC interpreters&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Batch compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;C compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Source-to-source compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;C++ compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;C# compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;COBOL compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Common Lisp compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;D compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;DIBOL/DBL compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;ECMAScript interpreters&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Eiffel compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Fortran compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Go compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Haskell compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Java compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Pascal compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Perl Interpreters&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;PHP compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;PL/I compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Python compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Scheme compilers and interpreters&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Smalltalk compilers&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Tcl Interpreters&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;VMS Interpreters&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;Rexx Interpreters&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;CLI compilers&quot;</span>,</div>
<div class="line"> };</div>
<div class="line"> </div>
<div class="line"> <span class="keywordtype">int</span> compiler_selected = 0;</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> compiler = Radiobox(&amp;compiler_entries, &amp;compiler_selected);</div>
<div class="line"> </div>
<div class="line"> std::array&lt;std::string, 8&gt; options_label = {</div>
<div class="line"> <span class="stringliteral">&quot;-Wall&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;-Werror&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;-lpthread&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;-O3&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;-Wabi-tag&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;-Wno-class-conversion&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;-Wcomma-subscript&quot;</span>,</div>
<div class="line"> <span class="stringliteral">&quot;-Wno-conversion-null&quot;</span>,</div>
<div class="line"> };</div>
<div class="line"> std::array&lt;bool, 8&gt; options_state = {</div>
<div class="line"> <span class="keyword">false</span>, <span class="keyword">false</span>, <span class="keyword">false</span>, <span class="keyword">false</span>, <span class="keyword">false</span>, <span class="keyword">false</span>, <span class="keyword">false</span>, <span class="keyword">false</span>,</div>
<div class="line"> };</div>
<div class="line"> </div>
<div class="line"> std::vector&lt;std::string&gt; input_entries;</div>
<div class="line"> <span class="keywordtype">int</span> input_selected = 0;</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> input = Menu(&amp;input_entries, &amp;input_selected);</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> input_option = <a id="_a2" name="_a2"></a><a class="code hl_struct" href="group__component.html#structftxui_1_1InputOption">InputOption</a>();</div>
<div class="line"> std::string input_add_content;</div>
<div class="line"> input_option.on_enter = [&amp;] {</div>
<div class="line"> input_entries.push_back(input_add_content);</div>
<div class="line"> input_add_content = <span class="stringliteral">&quot;&quot;</span>;</div>
<div class="line"> };</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> input_add = Input(&amp;input_add_content, <span class="stringliteral">&quot;input files&quot;</span>, input_option);</div>
<div class="line"> </div>
<div class="line"> std::string executable_content_ = <span class="stringliteral">&quot;&quot;</span>;</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> executable_ = Input(&amp;executable_content_, <span class="stringliteral">&quot;executable&quot;</span>);</div>
<div class="line"> </div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">Component</a> flags = Container::Vertical({</div>
<div class="line"> Checkbox(&amp;options_label[0], &amp;options_state[0]),</div>
<div class="line"> Checkbox(&amp;options_label[1], &amp;options_state[1]),</div>
<div class="line"> Checkbox(&amp;options_label[2], &amp;options_state[2]),</div>
<div class="line"> Checkbox(&amp;options_label[3], &amp;options_state[3]),</div>
<div class="line"> Checkbox(&amp;options_label[4], &amp;options_state[4]),</div>
<div class="line"> Checkbox(&amp;options_label[5], &amp;options_state[5]),</div>
<div class="line"> Checkbox(&amp;options_label[6], &amp;options_state[6]),</div>
<div class="line"> Checkbox(&amp;options_label[7], &amp;options_state[7]),</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> compiler_component = Container::Horizontal({</div>
<div class="line"> compiler,</div>
<div class="line"> flags,</div>
<div class="line"> Container::Vertical({</div>
<div class="line"> executable_,</div>
<div class="line"> Container::Horizontal({</div>
<div class="line"> input_add,</div>
<div class="line"> input,</div>
<div class="line"> }),</div>
<div class="line"> }),</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> render_command = [&amp;] {</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a5d4aa06ca6cc6a72e981bd5386f93f0a">Elements</a> line;</div>
<div class="line"> <span class="comment">// 编译器</span></div>
<div class="line"> line.push_back(text(compiler_entries[compiler_selected]) | bold);</div>
<div class="line"> <span class="comment">// 标志</span></div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keywordtype">int</span> i = 0; i &lt; 8; ++i) {</div>
<div class="line"> <span class="keywordflow">if</span> (options_state[i]) {</div>
<div class="line"> line.push_back(text(<span class="stringliteral">&quot; &quot;</span>));</div>
<div class="line"> line.push_back(text(options_label[i]) | dim);</div>
<div class="line"> }</div>
<div class="line"> }</div>
<div class="line"> <span class="comment">// 可执行文件</span></div>
<div class="line"> <span class="keywordflow">if</span> (!executable_content_.empty()) {</div>
<div class="line"> line.push_back(text(<span class="stringliteral">&quot; -o &quot;</span>) | bold);</div>
<div class="line"> line.push_back(text(executable_content_) | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::BlueLight) |</div>
<div class="line"> bold);</div>
<div class="line"> }</div>
<div class="line"> <span class="comment">// 输入</span></div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keyword">auto</span>&amp; it : input_entries) {</div>
<div class="line"> line.push_back(text(<span class="stringliteral">&quot; &quot;</span> + it) | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::RedLight));</div>
<div class="line"> }</div>
<div class="line"> <span class="keywordflow">return</span> line;</div>
<div class="line"> };</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> compiler_renderer = Renderer(compiler_component, [&amp;] {</div>
<div class="line"> <span class="keyword">auto</span> compiler_win = <a id="a3" name="a3"></a><a class="code hl_function" href="group__dom.html#ga03049def08fa7a5eaa4d5e897152bc1a">window</a>(text(<span class="stringliteral">&quot;Compiler&quot;</span>),</div>
<div class="line"> compiler-&gt;Render() | vscroll_indicator | frame);</div>
<div class="line"> <span class="keyword">auto</span> flags_win =</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga03049def08fa7a5eaa4d5e897152bc1a">window</a>(text(<span class="stringliteral">&quot;Flags&quot;</span>), flags-&gt;Render() | vscroll_indicator | frame);</div>
<div class="line"> <span class="keyword">auto</span> executable_win = <a class="code hl_function" href="group__dom.html#ga03049def08fa7a5eaa4d5e897152bc1a">window</a>(text(<span class="stringliteral">&quot;Executable:&quot;</span>), executable_-&gt;Render());</div>
<div class="line"> <span class="keyword">auto</span> input_win =</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga03049def08fa7a5eaa4d5e897152bc1a">window</a>(text(<span class="stringliteral">&quot;Input&quot;</span>), hbox({</div>
<div class="line"> vbox({</div>
<div class="line"> hbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;Add: &quot;</span>),</div>
<div class="line"> input_add-&gt;Render(),</div>
<div class="line"> }) | size(WIDTH, EQUAL, 20) |</div>
<div class="line"> size(HEIGHT, EQUAL, 1),</div>
<div class="line"> filler(),</div>
<div class="line"> }),</div>
<div class="line"> separator(),</div>
<div class="line"> input-&gt;Render() | vscroll_indicator | frame |</div>
<div class="line"> size(HEIGHT, EQUAL, 3) | flex,</div>
<div class="line"> }));</div>
<div class="line"> <span class="keywordflow">return</span> vbox({</div>
<div class="line"> hbox({</div>
<div class="line"> compiler_win,</div>
<div class="line"> flags_win,</div>
<div class="line"> vbox({</div>
<div class="line"> executable_win | size(WIDTH, EQUAL, 20),</div>
<div class="line"> input_win | size(WIDTH, EQUAL, 60),</div>
<div class="line"> }),</div>
<div class="line"> filler(),</div>
<div class="line"> }) | size(HEIGHT, LESS_THAN, 8),</div>
<div class="line"> hflow(render_command()) | flex_grow,</div>
<div class="line"> }) |</div>
<div class="line"> flex_grow;</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// ---------------------------------------------------------------------------</span></div>
<div class="line"> <span class="comment">// 旋转器</span></div>
<div class="line"> <span class="comment">// ---------------------------------------------------------------------------</span></div>
<div class="line"> <span class="keyword">auto</span> spinner_tab_renderer = Renderer([&amp;] {</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a5d4aa06ca6cc6a72e981bd5386f93f0a">Elements</a> entries;</div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keywordtype">int</span> i = 0; i &lt; 22; ++i) {</div>
<div class="line"> entries.push_back(spinner(i, shift / 5) | bold |</div>
<div class="line"> size(WIDTH, GREATER_THAN, 2) | border);</div>
<div class="line"> }</div>
<div class="line"> <span class="keywordflow">return</span> hflow(std::move(entries));</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// ---------------------------------------------------------------------------</span></div>
<div class="line"> <span class="comment">// 颜色</span></div>
<div class="line"> <span class="comment">// ---------------------------------------------------------------------------</span></div>
<div class="line"> <span class="keyword">auto</span> color_tab_renderer = Renderer([] {</div>
<div class="line"> <span class="keyword">auto</span> basic_color_display =</div>
<div class="line"> vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;16 color palette:&quot;</span>),</div>
<div class="line"> separator(),</div>
<div class="line"> hbox({</div>
<div class="line"> vbox({</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::Default, text(<span class="stringliteral">&quot;Default&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::Black, text(<span class="stringliteral">&quot;Black&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::GrayDark, text(<span class="stringliteral">&quot;GrayDark&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::GrayLight, text(<span class="stringliteral">&quot;GrayLight&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::White, text(<span class="stringliteral">&quot;White&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::Blue, text(<span class="stringliteral">&quot;Blue&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::BlueLight, text(<span class="stringliteral">&quot;BlueLight&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::Cyan, text(<span class="stringliteral">&quot;Cyan&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::CyanLight, text(<span class="stringliteral">&quot;CyanLight&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::Green, text(<span class="stringliteral">&quot;Green&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::GreenLight, text(<span class="stringliteral">&quot;GreenLight&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::Magenta, text(<span class="stringliteral">&quot;Magenta&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::MagentaLight, text(<span class="stringliteral">&quot;MagentaLight&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::Red, text(<span class="stringliteral">&quot;Red&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::RedLight, text(<span class="stringliteral">&quot;RedLight&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::Yellow, text(<span class="stringliteral">&quot;Yellow&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::YellowLight, text(<span class="stringliteral">&quot;YellowLight&quot;</span>)),</div>
<div class="line"> }),</div>
<div class="line"> vbox({</div>
<div class="line"> <a id="a4" name="a4"></a><a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(Color::Default, text(<span class="stringliteral">&quot;Default&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(Color::Black, text(<span class="stringliteral">&quot;Black&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(Color::GrayDark, text(<span class="stringliteral">&quot;GrayDark&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(Color::GrayLight, text(<span class="stringliteral">&quot;GrayLight&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(Color::White, text(<span class="stringliteral">&quot;White&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(Color::Blue, text(<span class="stringliteral">&quot;Blue&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(Color::BlueLight, text(<span class="stringliteral">&quot;BlueLight&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(Color::Cyan, text(<span class="stringliteral">&quot;Cyan&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(Color::CyanLight, text(<span class="stringliteral">&quot;CyanLight&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(Color::Green, text(<span class="stringliteral">&quot;Green&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(Color::GreenLight, text(<span class="stringliteral">&quot;GreenLight&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(Color::Magenta, text(<span class="stringliteral">&quot;Magenta&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(Color::MagentaLight, text(<span class="stringliteral">&quot;MagentaLight&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(Color::Red, text(<span class="stringliteral">&quot;Red&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(Color::RedLight, text(<span class="stringliteral">&quot;RedLight&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(Color::Yellow, text(<span class="stringliteral">&quot;Yellow&quot;</span>)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(Color::YellowLight, text(<span class="stringliteral">&quot;YellowLight&quot;</span>)),</div>
<div class="line"> }),</div>
<div class="line"> }),</div>
<div class="line"> }) |</div>
<div class="line"> border;</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> palette_256_color_display = text(<span class="stringliteral">&quot;256 colors palette:&quot;</span>);</div>
<div class="line"> {</div>
<div class="line"> std::vector&lt;std::vector&lt;ColorInfo&gt;&gt; info_columns = <a id="a5" name="a5"></a><a class="code hl_function" href="color__info__sorted__2d_8ipp.html#a0f08918d6064cd2a0e56cb9ec74033ca">ColorInfoSorted2D</a>();</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a5d4aa06ca6cc6a72e981bd5386f93f0a">Elements</a> columns;</div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keyword">auto</span>&amp; column : info_columns) {</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a5d4aa06ca6cc6a72e981bd5386f93f0a">Elements</a> column_elements;</div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keyword">auto</span>&amp; it : column) {</div>
<div class="line"> column_elements.push_back(</div>
<div class="line"> text(<span class="stringliteral">&quot; &quot;</span>) | <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(<a id="_a6" name="_a6"></a><a class="code hl_class" href="group__screen.html#classftxui_1_1Color">Color</a>(<a class="code hl_enumeration" href="group__screen.html#abd07c48f62cc507fafa2486a43130fcf">Color::Palette256</a>(it.index_256))));</div>
<div class="line"> }</div>
<div class="line"> columns.push_back(hbox(std::move(column_elements)));</div>
<div class="line"> }</div>
<div class="line"> palette_256_color_display = vbox({</div>
<div class="line"> palette_256_color_display,</div>
<div class="line"> separator(),</div>
<div class="line"> vbox(columns),</div>
<div class="line"> }) |</div>
<div class="line"> border;</div>
<div class="line"> }</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// 真彩色显示。</span></div>
<div class="line"> <span class="keyword">auto</span> true_color_display = text(<span class="stringliteral">&quot;TrueColors: 24bits:&quot;</span>);</div>
<div class="line"> {</div>
<div class="line"> <span class="keywordtype">int</span> saturation = 255;</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a5d4aa06ca6cc6a72e981bd5386f93f0a">Elements</a> array;</div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keywordtype">int</span> value = 0; value &lt; 255; value += 16) {</div>
<div class="line"> <a class="code hl_typedef" href="namespaceftxui.html#a5d4aa06ca6cc6a72e981bd5386f93f0a">Elements</a> line;</div>
<div class="line"> <span class="keywordflow">for</span> (<span class="keywordtype">int</span> hue = 0; hue &lt; 255; hue += 6) {</div>
<div class="line"> line.push_back(text(<span class="stringliteral">&quot;&quot;</span>) <span class="comment">//</span></div>
<div class="line"> | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::HSV(hue, saturation, value)) <span class="comment">//</span></div>
<div class="line"> | <a class="code hl_function" href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a>(Color::HSV(hue, saturation, value + 8)));</div>
<div class="line"> }</div>
<div class="line"> array.push_back(hbox(std::move(line)));</div>
<div class="line"> }</div>
<div class="line"> true_color_display = vbox({</div>
<div class="line"> true_color_display,</div>
<div class="line"> separator(),</div>
<div class="line"> vbox(std::move(array)),</div>
<div class="line"> }) |</div>
<div class="line"> border;</div>
<div class="line"> }</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">return</span> flexbox(</div>
<div class="line"> {</div>
<div class="line"> basic_color_display,</div>
<div class="line"> palette_256_color_display,</div>
<div class="line"> true_color_display,</div>
<div class="line"> },</div>
<div class="line"> <a id="_a7" name="_a7"></a><a class="code hl_struct" href="group__dom.html#structftxui_1_1FlexboxConfig">FlexboxConfig</a>().<a id="a8" name="a8"></a><a class="code hl_function" href="group__dom.html#a98d9a43033c09c7f967cdec791408bad">SetGap</a>(1, 1));</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// ---------------------------------------------------------------------------</span></div>
<div class="line"> <span class="comment">// 仪表</span></div>
<div class="line"> <span class="comment">// ---------------------------------------------------------------------------</span></div>
<div class="line"> <span class="keyword">auto</span> render_gauge = [&amp;shift](<span class="keywordtype">int</span> delta) {</div>
<div class="line"> <span class="keywordtype">float</span> progress = (shift + delta) % 500 / 500.f;</div>
<div class="line"> <span class="keywordflow">return</span> hbox({</div>
<div class="line"> text(std::to_string(<span class="keywordtype">int</span>(progress * 100)) + <span class="stringliteral">&quot;% &quot;</span>) |</div>
<div class="line"> size(WIDTH, EQUAL, 5),</div>
<div class="line"> gauge(progress),</div>
<div class="line"> });</div>
<div class="line"> };</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> gauge_component = Renderer([render_gauge] {</div>
<div class="line"> <span class="keywordflow">return</span> vbox({</div>
<div class="line"> render_gauge(0) | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::Black),</div>
<div class="line"> render_gauge(100) | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::GrayDark),</div>
<div class="line"> render_gauge(50) | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::GrayLight),</div>
<div class="line"> render_gauge(6894) | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::White),</div>
<div class="line"> separator(),</div>
<div class="line"> render_gauge(6841) | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::Blue),</div>
<div class="line"> render_gauge(9813) | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::BlueLight),</div>
<div class="line"> render_gauge(98765) | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::Cyan),</div>
<div class="line"> render_gauge(98) | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::CyanLight),</div>
<div class="line"> render_gauge(9846) | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::Green),</div>
<div class="line"> render_gauge(1122) | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::GreenLight),</div>
<div class="line"> render_gauge(84) | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::Magenta),</div>
<div class="line"> render_gauge(645) | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::MagentaLight),</div>
<div class="line"> render_gauge(568) | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::Red),</div>
<div class="line"> render_gauge(2222) | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::RedLight),</div>
<div class="line"> render_gauge(220) | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::Yellow),</div>
<div class="line"> render_gauge(348) | <a class="code hl_function" href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a>(Color::YellowLight),</div>
<div class="line"> });</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// ---------------------------------------------------------------------------</span></div>
<div class="line"> <span class="comment">// 段落</span></div>
<div class="line"> <span class="comment">// ---------------------------------------------------------------------------</span></div>
<div class="line"> <span class="keyword">auto</span> <a id="a9" name="a9"></a><a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a> = [](<span class="keywordtype">size_t</span> dimx, <span class="keywordtype">size_t</span> dimy) {</div>
<div class="line"> std::string title = std::to_string(dimx) + <span class="stringliteral">&quot;x&quot;</span> + std::to_string(dimy);</div>
<div class="line"> <span class="keywordflow">return</span> <a class="code hl_function" href="group__dom.html#ga03049def08fa7a5eaa4d5e897152bc1a">window</a>(text(title) | hcenter | bold,</div>
<div class="line"> text(<span class="stringliteral">&quot;content&quot;</span>) | hcenter | dim) |</div>
<div class="line"> size(WIDTH, EQUAL, dimx) | size(HEIGHT, EQUAL, dimy);</div>
<div class="line"> };</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> paragraph_renderer_left = Renderer([&amp;] {</div>
<div class="line"> std::string str =</div>
<div class="line"> <span class="stringliteral">&quot;Lorem Ipsum is simply dummy text of the printing and typesetting &quot;</span></div>
<div class="line"> <span class="stringliteral">&quot;industry.\nLorem Ipsum has been the industry&#39;s standard dummy text &quot;</span></div>
<div class="line"> <span class="stringliteral">&quot;ever since the 1500s, when an unknown printer took a galley of type &quot;</span></div>
<div class="line"> <span class="stringliteral">&quot;and scrambled it to make a type specimen book.&quot;</span>;</div>
<div class="line"> <span class="keywordflow">return</span> vbox({</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga03049def08fa7a5eaa4d5e897152bc1a">window</a>(text(<span class="stringliteral">&quot;Align left:&quot;</span>), paragraphAlignLeft(str)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga03049def08fa7a5eaa4d5e897152bc1a">window</a>(text(<span class="stringliteral">&quot;Align center:&quot;</span>), paragraphAlignCenter(str)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga03049def08fa7a5eaa4d5e897152bc1a">window</a>(text(<span class="stringliteral">&quot;Align right:&quot;</span>), paragraphAlignRight(str)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga03049def08fa7a5eaa4d5e897152bc1a">window</a>(text(<span class="stringliteral">&quot;Align justify:&quot;</span>), paragraphAlignJustify(str)),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga03049def08fa7a5eaa4d5e897152bc1a">window</a>(text(<span class="stringliteral">&quot;Side by side&quot;</span>), hbox({</div>
<div class="line"> paragraph(str),</div>
<div class="line"> separator(),</div>
<div class="line"> paragraph(str),</div>
<div class="line"> })),</div>
<div class="line"> <a class="code hl_function" href="group__dom.html#ga03049def08fa7a5eaa4d5e897152bc1a">window</a>(text(<span class="stringliteral">&quot;Elements with different size:&quot;</span>),</div>
<div class="line"> flexbox({</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(10, 5),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(9, 4),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(8, 4),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(6, 3),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(10, 5),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(9, 4),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(8, 4),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(6, 3),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(10, 5),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(9, 4),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(8, 4),</div>
<div class="line"> <a class="code hl_function" href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a>(6, 3),</div>
<div class="line"> })),</div>
<div class="line"> }) |</div>
<div class="line"> vscroll_indicator | yframe | flex;</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> paragraph_renderer_right = Renderer([] {</div>
<div class="line"> <span class="keywordflow">return</span> paragraph(<span class="stringliteral">&quot;&lt;--- This vertical bar is resizable using the mouse&quot;</span>) |</div>
<div class="line"> center;</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keywordtype">int</span> paragraph_renderer_split_position = Terminal::Size().dimx / 2;</div>
<div class="line"> <span class="keyword">auto</span> paragraph_renderer_group =</div>
<div class="line"> ResizableSplitLeft(paragraph_renderer_left, paragraph_renderer_right,</div>
<div class="line"> &amp;paragraph_renderer_split_position);</div>
<div class="line"> <span class="keyword">auto</span> paragraph_renderer_group_renderer =</div>
<div class="line"> Renderer(paragraph_renderer_group,</div>
<div class="line"> [&amp;] { <span class="keywordflow">return</span> paragraph_renderer_group-&gt;Render(); });</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// ---------------------------------------------------------------------------</span></div>
<div class="line"> <span class="comment">// 标签页</span></div>
<div class="line"> <span class="comment">// ---------------------------------------------------------------------------</span></div>
<div class="line"> </div>
<div class="line"> <span class="keywordtype">int</span> tab_index = 0;</div>
<div class="line"> std::vector&lt;std::string&gt; tab_entries = {</div>
<div class="line"> <span class="stringliteral">&quot;htop&quot;</span>, <span class="stringliteral">&quot;color&quot;</span>, <span class="stringliteral">&quot;spinner&quot;</span>, <span class="stringliteral">&quot;gauge&quot;</span>, <span class="stringliteral">&quot;compiler&quot;</span>, <span class="stringliteral">&quot;paragraph&quot;</span>,</div>
<div class="line"> };</div>
<div class="line"> <span class="keyword">auto</span> tab_selection =</div>
<div class="line"> Menu(&amp;tab_entries, &amp;tab_index, MenuOption::HorizontalAnimated());</div>
<div class="line"> <span class="keyword">auto</span> tab_content = Container::Tab(</div>
<div class="line"> {</div>
<div class="line"> htop,</div>
<div class="line"> color_tab_renderer,</div>
<div class="line"> spinner_tab_renderer,</div>
<div class="line"> gauge_component,</div>
<div class="line"> compiler_renderer,</div>
<div class="line"> paragraph_renderer_group_renderer,</div>
<div class="line"> },</div>
<div class="line"> &amp;tab_index);</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> exit_button =</div>
<div class="line"> Button(<span class="stringliteral">&quot;Exit&quot;</span>, [&amp;] { screen.Exit(); }, ButtonOption::Animated());</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> main_container = Container::Vertical({</div>
<div class="line"> Container::Horizontal({</div>
<div class="line"> tab_selection,</div>
<div class="line"> exit_button,</div>
<div class="line"> }),</div>
<div class="line"> tab_content,</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <span class="keyword">auto</span> main_renderer = Renderer(main_container, [&amp;] {</div>
<div class="line"> <span class="keywordflow">return</span> vbox({</div>
<div class="line"> text(<span class="stringliteral">&quot;FTXUI Demo&quot;</span>) | bold | hcenter,</div>
<div class="line"> hbox({</div>
<div class="line"> tab_selection-&gt;Render() | flex,</div>
<div class="line"> exit_button-&gt;Render(),</div>
<div class="line"> }),</div>
<div class="line"> tab_content-&gt;Render() | flex,</div>
<div class="line"> });</div>
<div class="line"> });</div>
<div class="line"> </div>
<div class="line"> <a id="_a10" name="_a10"></a><a class="code hl_class" href="group__component.html#classftxui_1_1Loop">Loop</a> loop(&amp;screen, main_renderer);</div>
<div class="line"> <span class="keywordflow">while</span> (!loop.HasQuitted()) {</div>
<div class="line"> <span class="comment">// 更新应用程序的状态。</span></div>
<div class="line"> shift++;</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// 请求绘制新帧。</span></div>
<div class="line"> screen.RequestAnimationFrame();</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// 执行事件,并绘制下一帧。</span></div>
<div class="line"> loop.RunOnce();</div>
<div class="line"> </div>
<div class="line"> <span class="comment">// 短暂休眠以控制帧率60 FPS</span></div>
<div class="line"> std::this_thread::sleep_for(std::chrono::milliseconds(1000 / 60));</div>
<div class="line"> }</div>
<div class="line"> </div>
<div class="line"> <span class="keywordflow">return</span> 0;</div>
<div class="line">}</div>
<div class="ttc" id="acolor_8hpp_html"><div class="ttname"><a href="color_8hpp.html">color.hpp</a></div></div>
<div class="ttc" id="acolor__info_8hpp_html"><div class="ttname"><a href="color__info_8hpp.html">color_info.hpp</a></div></div>
<div class="ttc" id="acolor__info__sorted__2d_8ipp_html_a0f08918d6064cd2a0e56cb9ec74033ca"><div class="ttname"><a href="color__info__sorted__2d_8ipp.html#a0f08918d6064cd2a0e56cb9ec74033ca">ColorInfoSorted2D</a></div><div class="ttdeci">std::vector&lt; std::vector&lt; ftxui::ColorInfo &gt; &gt; ColorInfoSorted2D()</div><div class="ttdef"><b>定义</b> <a href="color__info__sorted__2d_8ipp_source.html#l00005">color_info_sorted_2d.ipp:5</a></div></div>
<div class="ttc" id="acomponent_8hpp_html"><div class="ttname"><a href="component_8hpp.html">component.hpp</a></div></div>
<div class="ttc" id="acomponent__base_8hpp_html"><div class="ttname"><a href="component__base_8hpp.html">component_base.hpp</a></div></div>
<div class="ttc" id="acomponent__options_8hpp_html"><div class="ttname"><a href="component__options_8hpp.html">component_options.hpp</a></div></div>
<div class="ttc" id="aelements_8hpp_html"><div class="ttname"><a href="elements_8hpp.html">elements.hpp</a></div></div>
<div class="ttc" id="aevent_8hpp_html"><div class="ttname"><a href="event_8hpp.html">event.hpp</a></div></div>
<div class="ttc" id="aexamples_2component_2button_8cpp_html_ae66f6b31b5ad750f1fe042a706a4e3d4"><div class="ttname"><a href="examples_2component_2button_8cpp.html#ae66f6b31b5ad750f1fe042a706a4e3d4">main</a></div><div class="ttdeci">int main()</div><div class="ttdef"><b>定义</b> <a href="examples_2component_2button_8cpp_source.html#l00033">examples/component/button.cpp:33</a></div></div>
<div class="ttc" id="aexamples_2component_2focus_8cpp_html_a9ffb8a33ec5d0133f63f791d526df1c7"><div class="ttname"><a href="examples_2component_2focus_8cpp.html#a9ffb8a33ec5d0133f63f791d526df1c7">make_box</a></div><div class="ttdeci">Element make_box(int x, int y)</div><div class="ttdef"><b>定义</b> <a href="examples_2component_2focus_8cpp_source.html#l00017">examples/component/focus.cpp:17</a></div></div>
<div class="ttc" id="aflexbox__config_8hpp_html"><div class="ttname"><a href="flexbox__config_8hpp.html">flexbox_config.hpp</a></div></div>
<div class="ttc" id="agroup__component_html_classftxui_1_1Loop"><div class="ttname"><a href="group__component.html#classftxui_1_1Loop">ftxui::Loop</a></div><div class="ttdoc">Loop 是一个管理组件事件循环的类。</div><div class="ttdef"><b>定义</b> <a href="loop_8hpp_source.html#l00055">loop.hpp:55</a></div></div>
<div class="ttc" id="agroup__component_html_structftxui_1_1InputOption"><div class="ttname"><a href="group__component.html#structftxui_1_1InputOption">ftxui::InputOption</a></div><div class="ttdoc">Input 组件的选项。</div><div class="ttdef"><b>定义</b> <a href="component__options_8hpp_source.html#l00163">component_options.hpp:163</a></div></div>
<div class="ttc" id="agroup__dom_html_a98d9a43033c09c7f967cdec791408bad"><div class="ttname"><a href="group__dom.html#a98d9a43033c09c7f967cdec791408bad">ftxui::FlexboxConfig::SetGap</a></div><div class="ttdeci">FlexboxConfig &amp; SetGap(int gap_x, int gap_y)</div><div class="ttdoc">设置 flexbox flex direction。</div><div class="ttdef"><b>定义</b> <a href="flexbox__config_8cpp_source.html#l00039">flexbox_config.cpp:39</a></div></div>
<div class="ttc" id="agroup__dom_html_ga03049def08fa7a5eaa4d5e897152bc1a"><div class="ttname"><a href="group__dom.html#ga03049def08fa7a5eaa4d5e897152bc1a">window</a></div><div class="ttdeci">Element window(Element title, Element content, BorderStyle border)</div><div class="ttdoc">绘制带有标题和边框的窗口。</div><div class="ttdef"><b>定义</b> <a href="src_2ftxui_2dom_2border_8cpp_source.html#l00507">src/ftxui/dom/border.cpp:507</a></div></div>
<div class="ttc" id="agroup__dom_html_ga050df9c8ed04eec13309d6c0542c636d"><div class="ttname"><a href="group__dom.html#ga050df9c8ed04eec13309d6c0542c636d">color</a></div><div class="ttdeci">Element color(const LinearGradient &amp;gradient, Element child)</div><div class="ttdoc">使用线性渐变效果设置元素的前景色。</div><div class="ttdef"><b>定义</b> <a href="src_2ftxui_2dom_2linear__gradient_8cpp_source.html#l00239">src/ftxui/dom/linear_gradient.cpp:239</a></div></div>
<div class="ttc" id="agroup__dom_html_gaaac1622d43662a6a02113d9230a4fdd4"><div class="ttname"><a href="group__dom.html#gaaac1622d43662a6a02113d9230a4fdd4">bgcolor</a></div><div class="ttdeci">Element bgcolor(const LinearGradient &amp;gradient, Element child)</div><div class="ttdoc">使用线性渐变效果设置元素的背景色。</div><div class="ttdef"><b>定义</b> <a href="src_2ftxui_2dom_2linear__gradient_8cpp_source.html#l00255">src/ftxui/dom/linear_gradient.cpp:255</a></div></div>
<div class="ttc" id="agroup__dom_html_structftxui_1_1FlexboxConfig"><div class="ttname"><a href="group__dom.html#structftxui_1_1FlexboxConfig">ftxui::FlexboxConfig</a></div><div class="ttdoc">FlexboxConfig 是一个配置结构体,定义了弹性盒子容器的布局属性。</div><div class="ttdef"><b>定义</b> <a href="flexbox__config_8hpp_source.html#l00026">flexbox_config.hpp:26</a></div></div>
<div class="ttc" id="agroup__screen_html_abd07c48f62cc507fafa2486a43130fcf"><div class="ttname"><a href="group__screen.html#abd07c48f62cc507fafa2486a43130fcf">ftxui::Color::Palette256</a></div><div class="ttdeci">Palette256</div><div class="ttdef"><b>定义</b> <a href="color_8hpp_source.html#l00070">color.hpp:70</a></div></div>
<div class="ttc" id="agroup__screen_html_classftxui_1_1Color"><div class="ttname"><a href="group__screen.html#classftxui_1_1Color">ftxui::Color</a></div><div class="ttdoc">Color 是一个表示终端用户界面中颜色的类。</div><div class="ttdef"><b>定义</b> <a href="color_8hpp_source.html#l00020">color.hpp:20</a></div></div>
<div class="ttc" id="aloop_8hpp_html"><div class="ttname"><a href="loop_8hpp.html">loop.hpp</a></div></div>
<div class="ttc" id="anamespaceftxui_html"><div class="ttname"><a href="namespaceftxui.html">ftxui</a></div><div class="ttdoc">#include &quot;ftxui/component/component_base.hpp&quot; // 用于 ComponentBase</div><div class="ttdef"><b>定义</b> <a href="animation_8hpp_source.html#l00009">animation.hpp:9</a></div></div>
<div class="ttc" id="anamespaceftxui_html_a5d4aa06ca6cc6a72e981bd5386f93f0a"><div class="ttname"><a href="namespaceftxui.html#a5d4aa06ca6cc6a72e981bd5386f93f0a">ftxui::Elements</a></div><div class="ttdeci">std::vector&lt; Element &gt; Elements</div><div class="ttdef"><b>定义</b> <a href="elements_8hpp_source.html#l00023">elements.hpp:23</a></div></div>
<div class="ttc" id="anamespaceftxui_html_af1479ede01dbf087342534ab4ada11d3"><div class="ttname"><a href="namespaceftxui.html#af1479ede01dbf087342534ab4ada11d3">ftxui::Component</a></div><div class="ttdeci">std::shared_ptr&lt; ComponentBase &gt; Component</div><div class="ttdef"><b>定义</b> <a href="component__base_8hpp_source.html#l00023">component_base.hpp:23</a></div></div>
<div class="ttc" id="ascreen__interactive_8hpp_html"><div class="ttname"><a href="screen__interactive_8hpp.html">screen_interactive.hpp</a></div></div>
<div class="ttc" id="aterminal_8hpp_html"><div class="ttname"><a href="terminal_8hpp.html">terminal.hpp</a></div></div>
</div><!-- fragment --> </div><!-- contents -->
</div><!-- doc-content -->
<!-- HTML footer for doxygen 1.9.8-->
<!-- start footer part -->
<div id="nav-path" class="navpath"><!-- id is needed for treeview function! -->
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const projectNumber = document.getElementById('projectname');
if (!projectNumber) {
console.warn('Doxygen element with ID "projectnumber" not found. Cannot add version switcher.');
return;
}
const langs = ["en", "es", "fr", "ja", "zh-CH", "zh-TW"];
const lang_paths = {"en": "../index.html", "es": "../es/index.html", "fr": "../fr/index.html", "ja": "../ja/index.html", "zh-CH": "index.html", "zh-TW": "../zh-TW/index.html"};
const lang_display = {"en": "English", "es": "Espa\u00f1ol", "fr": "Fran\u00e7ais", "ja": "\u65e5\u672c\u8a9e", "zh-CH": "\u4e2d\u6587 (\u7b80\u4f53)", "zh-TW": "\u4e2d\u6587 (\u7e41\u9ad4)"};
const versions = ["main"];
const version_paths = {"main": "index.html"};
const currentLang = "zh-CH";
const currentVersion = "main";
// Helper function to create a styled select element
const createSelect = (options, current, paths, label, displayMap = null) => {
const select = document.createElement('select');
select.title = label;
select.onchange = function() {
const selectedValue = this.value;
if (selectedValue in paths) {
window.location.href = paths[selectedValue];
}
};
// Sort versions: 'main' first, then others numerically descending.
options.sort((a, b) => {
if (a === 'main') return -1;
if (b === 'main') return 1;
return b.localeCompare(a, undefined, { numeric: true, sensitivity: 'base' });
});
options.forEach(v => {
const option = document.createElement('option');
option.value = v;
// Use the displayMap if provided, otherwise default to the value (v)
option.textContent = displayMap ? displayMap[v] : v;
if (v === current) {
option.selected = true;
}
select.appendChild(option);
});
// Apply some styling to make it look good.
Object.assign(select.style, {
backgroundColor: 'rgba(0, 0, 0, 0.8)',
color: 'white',
border: '1px solid rgba(255, 255, 255, 0.2)',
padding: '5px',
borderRadius: '5px',
fontSize: '14px',
fontFamily: 'inherit',
margin: '0 5px 0 0',
cursor: 'pointer'
});
return select;
};
// 1. Create Language Switcher, passing the language display names map
const langSelect = createSelect(langs, currentLang, lang_paths, 'Select Language', lang_display);
// 2. Create Version Switcher
const versionSelect = createSelect(versions, currentVersion, version_paths, 'Select Version');
// 3. Create FTXUI title.
const ftxuiTitle = document.createElement('span');
ftxuiTitle.textContent = 'FTXUI: ';
Object.assign(ftxuiTitle.style, {
color: 'white',
fontSize: '20px',
fontWeight: 'bold',
marginRight: '10px'
});
// 3. Create a container to hold both selectors
const container = document.createElement('div');
container.id = 'version-lang-switchers';
Object.assign(container.style, {
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
width: 'auto'
});
container.appendChild(ftxuiTitle);
container.appendChild(langSelect);
container.appendChild(versionSelect);
Object.assign(container.style, {
backgroundColor: 'rgba(0, 0, 0, 0.5)',
padding: '5px 10px',
borderRadius: '8px'
});
// Replace the Doxygen project number element with our container.
projectNumber.replaceWith(container);
// Clean up the original Doxygen project number text if it still exists nearby
const parent = container.parentElement;
if (parent) {
const textNode = Array.from(parent.childNodes).find(n => n.nodeType === 3 && n.textContent.trim() !== '');
if (textNode) {
textNode.remove();
}
}
});
</script>
</body>
</html>