最完整的FTXUI入门指南：从安装到第一个终端应用

最完整的FTXUI入门指南：从安装到第一个终端应用

【免费下载链接】FTXUI :computer: C++ Functional Terminal User Interface. :heart: 项目地址: https://gitcode.com/gh_mirrors/ft/FTXUI

FTXUI是一个跨平台的C++终端用户界面库，采用函数式风格设计，支持键盘和鼠标导航，以及UTF8和全角字符显示。本文将从安装开始，带你逐步构建第一个终端应用，掌握FTXUI的核心功能。

安装FTXUI

使用CMake安装

FTXUI推荐使用CMake的FetchContent功能进行安装，这样可以指定依赖的版本，确保项目的稳定性。在你的CMakeLists.txt中添加以下代码：

include(FetchContent)
FetchContent_Declare(ftxui
  GIT_REPOSITORY https://link.gitcode.com/i/4feab0b770c68eb508aa4eac0601dd89
  GIT_TAG v6.1.9
)
FetchContent_MakeAvailable(ftxui)

target_link_libraries(your_target PRIVATE
    ftxui::component
    ftxui::dom
    ftxui::screen
)

这段代码会从指定的仓库克隆FTXUI，并将其链接到你的项目中。你需要根据自己的项目名称修改your_target。

使用Bazel安装

如果你使用Bazel构建项目，可以在MODULE.bazel中添加以下内容：

bazel_dep(
    name = "ftxui",
    version = "v6.1.9",
)

然后在BUILD.bazel中添加依赖：

cc_binary(
    name = "your_target",
    srcs = ["your_source.cc"],
    deps = [
        "@ftxui//:component",
        "@ftxui//:dom",
        "@ftxui//:screen",
    ],
)

第一个FTXUI应用

下面我们将创建一个简单的菜单应用，展示FTXUI的基本用法。这个应用会显示一个菜单，用户可以通过键盘选择菜单项，按Enter键确认选择并退出程序。

代码实现

创建一个名为menu.cpp的文件，添加以下代码：

#include <functional>
#include <iostream>
#include <string>
#include <vector>

#include "ftxui/component/captured_mouse.hpp"
#include "ftxui/component/component.hpp"
#include "ftxui/component/component_options.hpp"
#include "ftxui/component/screen_interactive.hpp"

int main() {
  using namespace ftxui;
  auto screen = ScreenInteractive::TerminalOutput();

  std::vector<std::string> entries = {
      "文件",
      "编辑",
      "视图",
      "帮助",
  };
  int selected = 0;

  MenuOption option;
  option.on_enter = screen.ExitLoopClosure();
  auto menu = Menu(&entries, &selected, option);

  screen.Loop(menu);

  std::cout << "你选择了第 " << selected + 1 << " 个选项" << std::endl;
  return 0;
}

代码解析

1. 包含头文件：我们包含了FTXUI的组件、屏幕交互等必要头文件。

2. 创建屏幕：ScreenInteractive::TerminalOutput()创建一个与终端交互的屏幕对象。

3. 定义菜单项：entries向量存储了菜单的选项文本。

4. 创建菜单组件：Menu函数创建一个菜单组件，参数包括菜单项、选中索引和选项。option.on_enter设置当用户按Enter键时退出事件循环。

5. 运行事件循环：screen.Loop(menu)启动应用的事件循环，显示菜单并处理用户输入。

6. 输出结果：用户选择后，程序输出选中的选项索引。

FTXUI核心模块

FTXUI主要由三个核心模块组成：

• dom：用于创建用户界面的元素和布局，如文本、边框、盒子布局等。相关代码位于src/ftxui/dom/目录。

• component：提供交互式组件，如菜单、按钮、输入框等。相关代码位于src/ftxui/component/目录。

• screen：负责将DOM渲染到终端屏幕上。相关代码位于src/ftxui/screen/目录。

布局示例

FTXUI提供了多种布局方式，如水平布局（hbox）、垂直布局（vbox）和网格布局（gridbox）。以下是一个简单的水平布局示例：

#include <ftxui/dom/elements.hpp>
#include <ftxui/screen/screen.hpp>
#include <iostream>

int main() {
  using namespace ftxui;
  auto document = hbox({
      text("左侧") | border,
      text("中间") | border | flex,
      text("右侧") | border,
  });
  auto screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));
  Render(screen, document);
  screen.Print();
  return 0;
}

这段代码创建了一个包含三个带边框文本框的水平布局，中间的文本框会自动伸缩以填充可用空间。

样式装饰

FTXUI允许你使用装饰器来美化界面元素，如颜色、边框、粗体等。以下是一个样式示例：

#include <ftxui/dom/elements.hpp>
#include <ftxui/screen/screen.hpp>
#include <iostream>

int main() {
  using namespace ftxui;
  auto document = vbox({
      text("FTXUI样式示例") | bold | color(Color::Blue),
      separator(),
      text("粗体文本") | bold,
      text("斜体文本") | italic,
      text("红色文本") | color(Color::Red),
  }) | border | center;
  auto screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));
  Render(screen, document);
  screen.Print();
  return 0;
}

这个示例展示了如何使用不同的文本样式和颜色来增强界面的视觉效果。

总结

通过本文的介绍，你已经了解了FTXUI的基本安装方法和使用流程。从创建简单的菜单应用到使用布局和样式装饰界面，FTXUI提供了丰富的功能来构建交互式终端应用。

要深入学习FTXUI，建议参考项目的官方文档和示例代码。FTXUI的源代码和更多示例可以在项目仓库中找到。

希望这篇指南能帮助你快速入门FTXUI，并开始构建自己的终端应用！

【免费下载链接】FTXUI :computer: C++ Functional Terminal User Interface. :heart: 项目地址: https://gitcode.com/gh_mirrors/ft/FTXUI