首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >FTXUI基础笔记(botton按钮组件基础)

FTXUI基础笔记(botton按钮组件基础)

作者头像
zhangrelay
发布2022-08-10 15:27:38
发布2022-08-10 15:27:38
64900
代码可运行
举报
运行总次数:0
代码可运行

先看原版示例程序吧:

代码语言:javascript
代码运行次数:0
运行
复制
#include <memory>  // for shared_ptr, __shared_ptr_access
#include <string>  // for operator+, to_string

#include "ftxui/component/captured_mouse.hpp"  // for ftxui
#include "ftxui/component/component.hpp"  // for Button, Horizontal, Renderer
#include "ftxui/component/component_base.hpp"      // for ComponentBase
#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
#include "ftxui/dom/elements.hpp"  // for separator, gauge, text, Element, operator|, vbox, border

using namespace ftxui;

int main(int argc, const char* argv[]) {
  int value = 50;

  // The tree of components. This defines how to navigate using the keyboard.
  auto buttons = Container::Horizontal({
      Button("计数加1", [&] { value--; }),
      Button("计数减1", [&] { value++; }),
  });

  // Modify the way to render them on screen:
  auto component = Renderer(buttons, [&] {
    return vbox({
               text(" 数值 = " + std::to_string(value)),
               separator(),
               gauge(value * 0.01f),
               separator(),
               buttons->Render(),
           }) |
           border;
  });

  auto screen = ScreenInteractive::FitComponent();
  screen.Loop(component);
  return 0;
}

// Copyright 2020 Arthur Sonzogni. All rights reserved.
// Use of this source code is governed by the MIT license that can be found in
// the LICENSE file.

默认数值为50。点击按键实现加减1功能。


简要解释一下:

头文件部分

#include <memory>  // for shared_ptr, __shared_ptr_access #include <string>  // for operator+, to_string #include "ftxui/component/captured_mouse.hpp"  // for ftxui #include "ftxui/component/component.hpp"  // for Button, Horizontal, Renderer #include "ftxui/component/component_base.hpp"      // for ComponentBase #include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive #include "ftxui/dom/elements.hpp"  // for separator, gauge, text, Element, operator|, vbox, border

按钮属性,包括点击后功能

  // The tree of components. This defines how to navigate using the keyboard.   auto buttons = Container::Horizontal({       Button("计数加1", [&] { value--; }),       Button("计数减1", [&] { value++; }),   });

整体在终端的显示:

  // Modify the way to render them on screen:   auto component = Renderer(buttons, [&] {     return vbox({                text(" 数值 = " + std::to_string(value)),                separator(),                gauge(value * 0.01f),                separator(),                buttons->Render(),            }) |            border;   });


程序bug,加减写反了:

自行修订即可。 


这个功能太简陋了,原版复杂一些的示例如下:

代码语言:javascript
代码运行次数:0
运行
复制
#include <memory>  // for shared_ptr, __shared_ptr_access
#include <string>  // for operator+, to_string

#include "ftxui/component/captured_mouse.hpp"  // for ftxui
#include "ftxui/component/component.hpp"  // for Button, Horizontal, Renderer
#include "ftxui/component/component_base.hpp"      // for ComponentBase
#include "ftxui/component/component_options.hpp"   // for ButtonOption
#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
#include "ftxui/dom/elements.hpp"  // for gauge, separator, text, vbox, operator|, Element, border
#include "ftxui/screen/color.hpp"  // for Color, Color::Blue, Color::Green, Color::Red

using namespace ftxui;

int main(int argc, const char* argv[]) {
  int value = 50;

  // The tree of components. This defines how to navigate using the keyboard.
  auto buttons = Container::Horizontal({
      Button(
          "计数减一", [&] { value--; }, ButtonOption::Animated(Color::Red)),
      Button(
          "复位(默认50)", [&] { value = 50; }, ButtonOption::Animated(Color::Green)),
      Button(
          "计数加一", [&] { value++; }, ButtonOption::Animated(Color::Blue)),
  });

  // Modify the way to render them on screen:
  auto component = Renderer(buttons, [&] {
    return vbox({
        vbox({
            text(" 数值 = " + std::to_string(value)),
            separator(),
            gauge(value * 0.01f),
        }) | border,
        buttons->Render(),
    });
  });

  auto screen = ScreenInteractive::FitComponent();
  screen.Loop(component);
  return 0;
}

// Copyright 2020 Arthur Sonzogni. All rights reserved.
// Use of this source code is governed by the MIT license that can be found in
// the LICENSE file.

复位

看起来效果好一些。

改变之处:

  // The tree of components. This defines how to navigate using the keyboard.   auto buttons = Container::Horizontal({       Button(           "计数减一", [&] { value--; }, ButtonOption::Animated(Color::Red)),       Button(           "复位(默认50)", [&] { value = 50; }, ButtonOption::Animated(Color::Green)),       Button(           "计数加一", [&] { value++; }, ButtonOption::Animated(Color::Blue)),   });


-End-


本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-07-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档