C++拾趣——绘制Console中PushButton

于 2024-10-07 00:15:00 发布
阅读量760 收藏 17
点赞数 27
分类专栏： C++拾趣 文章标签： c++ java 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/breaksoftware/article/details/142614211
版权

大纲

在《C++拾趣——绘制Console中单个进度条》中，我们熟悉了怎么制作一个进度条。现在我们开始制作更复杂的控件。本节我们就做一个PushButton控件。
在这里插入图片描述

居中显示窗口

按照界面库的设计，Button不能独立存在，而是要位于一个窗口中。我们就用线段画出一个窗口。

这个窗口要位于终端中间，即居中。这样我们就需要先获取终端窗口的尺寸。

    // 获取终端窗口大小
    struct winsize w;
    ioctl(STDIN_FILENO, TIOCGWINSZ, &w);
    int terminalWidth = w.ws_col;
    int terminalHeight = w.ws_row;

然后通过当前窗口的大小，计算出起始绘制的坐标

    // 窗口的宽度和高度
    int windowWidth = 40;
    int windowHeight = 8;

    // 计算窗口的起始位置
    int startX = (terminalWidth - windowWidth) / 2;
    int startY = (terminalHeight - windowHeight) / 2;

清屏并重设光标

在开始绘制之前，我们需要使用《C++拾趣——绘制Console中圆形进度》中介绍的\033[2J\033[H来清屏并将光标移动到左上角。这是我们需要反复从最开始的位置重新绘制所有内容。

    cout << "\033[2J\033[H"; // 清屏并将光标移动到左上角

绘制窗口

绘制窗口顶部

在这里插入图片描述
因为要居中，所以在Y轴方向，我们先要输出一些\n来换行。

    // 打印顶部边框
    cout << string(startY, '\n');
    cout << string(startX, ' ') << "+" << string(windowWidth - 2, '-') << "+" << endl;

绘制非按钮行

在这里插入图片描述

    // 打印空行
    for (int i = 0; i < windowHeight - 4; ++i) {
        cout << string(startX, ' ') << "| " << string(windowWidth - 4, ' ') << " |" << endl;
    }

绘制按钮行

在这里插入图片描述
我们需要绘制两个按钮：OK和Cancel。由于按钮行比较特殊，绘制的复杂度也会高些。

因为按钮也要居中显示，所以我们先需要算出要空出多少列出来——padding值。

当按钮被选中时，它会变成绿色背景，另外一个按钮就会变成默认背景。

    // 打印按钮行
    string okButton = "[ OK ]";
    string cancelButton = "[Cancel]";
    int totalButtonLength = okButton.length() + cancelButton.length() + 2; // 2 spaces between buttons
    int padding = (windowWidth - totalButtonLength) / 2;

    cout << string(startX, ' ') << "| " << string(padding, ' ');
    if (isButtonSelected && buttonIndex == 0) {
        cout << greenBackground << whiteText << blinkText << okButton << reset;
    } else {
        cout << okButton;
    }
    cout << "  ";
    if (isButtonSelected && buttonIndex == 1) {
        cout << greenBackground << whiteText << blinkText << cancelButton << reset;
    } else {
        cout << cancelButton;
    }
    cout << string(windowWidth - totalButtonLength - padding - 4, ' ') << " |" << endl;

绘制窗口底部

在这里插入图片描述

    // 打印底部边框
    cout << string(startX, ' ') << "+" << string(windowWidth - 2, '-') << "+" << endl;

修改终端默认行为

由于不能鼠标操作，所以我们只能通过键盘操作界面，比如进行Button的选择和按下操作。

我们只接受Tab,->，<-、ESC和Enter等5个键。Tab、->和<-键只能进行Button的切换；ESC是退出程序；Enter表示Button被按下。

默认情况下，我们在键盘上输出的可见字符都会显示在终端上。但是在当前场景下，我们并不希望有这样的效果。这就需要我们修改终端的默认行为。

下面的代码在将终端修改为静默模式（关闭规范模式（ICANON）和回显（ECHO），使得输入字符不需要按下回车键就能立即读取，并且输入的字符不会显示在终端上）后，等待并读取键盘的输入，然后再还原原始的设置。这步还原操作非常重要，否则程序退出后，终端会一直处于静默模式，后续的输入都不会显示在终端上。这也预示着，如果本程序使用ctrl+c强行终止，会出现终端行为异常的情况。

int getch() {
    struct termios oldt, newt;
    int ch;
    tcgetattr(STDIN_FILENO, &oldt);
    newt = oldt;
    newt.c_lflag &= ~(ICANON | ECHO);   // 修改终端设置：关闭回显和规范模式
    tcsetattr(STDIN_FILENO, TCSANOW, &newt);    // 设置终端为静默模式
    ch = getchar();
    ……
    tcsetattr(STDIN_FILENO, TCSANOW, &oldt);
    return ch;
}

对方向键的特殊处理

在终端环境中，特殊键（如箭头键、功能键等）通常不会直接生成单个字符的输入，而是生成一系列字符的序列。对于箭头键，通常的序列是以 ESC 键（ASCII 码 27）开头，后面跟着一个或多个字符来表示具体的键。

  • 向上箭头：ESC + [ + A
  • 向下箭头：ESC + [ + B
  • 向右箭头：ESC + [ + C
  • 向左箭头：ESC + [ + D

由于我们只接受向左和向右的方向键，所以需要将它们对应的组合转换成其他整型数。

    ch = getchar();
    if (ch == 27) { // 如果是ESC键
        ch = getchar();
        if (ch == 91) { // 如果是'['键
            ch = getchar();
            if (ch == 67) ch = 1000; // 向右箭头键
            if (ch == 68) ch = 1001; // 向左箭头键
        }
    }

过程控制

下面代码会在getch()中等待终端的输入。

如果输入的是Tab、向下键或者向上键，都会切换Button的聚焦——由buttonIndex 表示。

如果输入的是Enter键，就会退出程序，并输出用户的选择。

如果遇到ESC，则直接退出程序。

int main() {
    bool isButtonSelected = true;
    int buttonIndex = 0;

    while (true) {
        display(isButtonSelected, buttonIndex);

        int ch = getch();
        if (ch == 9 || ch == 1001 || ch == 1000) { // Tab 键或下箭头键或上箭头键
            buttonIndex = (buttonIndex + 1) % 2;
        } else if (ch == 10 || ch == 13) { // Enter 键
            if (buttonIndex == 0) { // OK 按钮
                cout << "You selected: OK" << endl;
            } else if (buttonIndex == 1) { // Cancel 按钮
                cout << "You selected: Cancel" << endl;
            }
            break;
        } else if (ch == 27) { // Esc 键退出
            break;
        }
    }

    return 0;
}

完整代码

#include <iostream>
#include <termios.h>
#include <unistd.h>
#include <sys/ioctl.h>

using namespace std;

void display(bool isButtonSelected, int buttonIndex) {
    const string greenBackground = "\033[42m"; // 绿色背景
    const string whiteText = "\033[37m";       // 白色字体
    const string blinkText = "\033[5m";        // 闪烁文本
    const string reset = "\033[0m";            // 重置颜色

    // 获取终端窗口大小
    struct winsize w;
    ioctl(STDIN_FILENO, TIOCGWINSZ, &w);
    int terminalWidth = w.ws_col;
    int terminalHeight = w.ws_row;

    // 窗口的宽度和高度
    int windowWidth = 40;
    int windowHeight = 8;

    // 计算窗口的起始位置
    int startX = (terminalWidth - windowWidth) / 2;
    int startY = (terminalHeight - windowHeight) / 2;

    cout << "\033[2J\033[H"; // 清屏并将光标移动到左上角

    // 打印顶部边框
    cout << string(startY, '\n');
    cout << string(startX, ' ') << "+" << string(windowWidth - 2, '-') << "+" << endl;

    // 打印空行
    for (int i = 0; i < windowHeight - 4; ++i) {
        cout << string(startX, ' ') << "| " << string(windowWidth - 4, ' ') << " |" << endl;
    }

    // 打印按钮行
    string okButton = "[ OK ]";
    string cancelButton = "[Cancel]";
    int totalButtonLength = okButton.length() + cancelButton.length() + 2; // 2 spaces between buttons
    int padding = (windowWidth - totalButtonLength) / 2;

    cout << string(startX, ' ') << "| " << string(padding, ' ');
    if (isButtonSelected && buttonIndex == 0) {
        cout << greenBackground << whiteText << blinkText << okButton << reset;
    } else {
        cout << okButton;
    }
    cout << "  ";
    if (isButtonSelected && buttonIndex == 1) {
        cout << greenBackground << whiteText << blinkText << cancelButton << reset;
    } else {
        cout << cancelButton;
    }
    cout << string(windowWidth - totalButtonLength - padding - 4, ' ') << " |" << endl;

    // 打印底部边框
    cout << string(startX, ' ') << "+" << string(windowWidth - 2, '-') << "+" << endl;

    cout << reset; // 重置颜色
}

int getch() {
    struct termios oldt, newt;
    int ch;
    tcgetattr(STDIN_FILENO, &oldt);
    newt = oldt;
    newt.c_lflag &= ~(ICANON | ECHO);   // 修改终端设置：关闭回显和规范模式
    tcsetattr(STDIN_FILENO, TCSANOW, &newt);    // 设置终端为静默模式
    ch = getchar();
    if (ch == 27) { // 如果是ESC键
        ch = getchar();
        if (ch == 91) { // 如果是'['键
            ch = getchar();
            if (ch == 67) ch = 1000; // 向右箭头键
            if (ch == 68) ch = 1001; // 向左箭头键
        }
    }
    tcsetattr(STDIN_FILENO, TCSANOW, &oldt);
    return ch;
}

int main() {
    bool isButtonSelected = true;
    int buttonIndex = 0;

    while (true) {
        display(isButtonSelected, buttonIndex);

        int ch = getch();
        if (ch == 9 || ch == 1001 || ch == 1000) { // Tab 键或下箭头键或上箭头键
            buttonIndex = (buttonIndex + 1) % 2;
        } else if (ch == 10 || ch == 13) { // Enter 键
            if (buttonIndex == 0) { // OK 按钮
                cout << "You selected: OK" << endl;
            } else if (buttonIndex == 1) { // Cancel 按钮
                cout << "You selected: Cancel" << endl;
            }
            break;
        } else if (ch == 27) { // Esc 键退出
            break;
        }
    }

    return 0;
}

代码地址

https://github.com/f304646673/cpulsplus/tree/master/console_ui/button

breaksoftware
关注
专栏目录
Python拾趣008 turtle会画图的小乌龟
12-21
Python中的turtle库是一个非常有趣的模块，它以小乌龟移动并绘制路径的形式，提供了一种简单易用的图形绘制方式。这个库非常适合初学者学习编程，因为它通过直观的图形化编程，激发学习者对编程的兴趣。 turtle库的...
Python拾趣014 logging日志模块
12-21
它提供了丰富的功能，可以帮助开发者记录软件运行过程中的信息、调试细节、警告和错误，以便于后期分析和问题排查。在本文中，我们将深入探讨`logging`模块的基本用法、日志等级、日志处理器以及高级特性。 首先，...
C++拾趣——绘制Console中圆形进度
方亮的专栏
10-04 750
在一文中，我们看到了如何绘制单向前进的进度条。本文我们将介绍两种圆形进度的绘制方法。
C++拾趣——绘制Console中Check Box
方亮的专栏
10-05 948
这次我们要绘制复选框，如下图。
C++拾趣——绘制Console中单个进度条
方亮的专栏
10-02 546
我们在使用wget等软件时，会看到诸如下面这样的进度条的提示。本文我们介绍如何实现一个这样的进度条。
C++拾趣——绘制Console中多个进度条
方亮的专栏
10-03 1385
在一文中，我们介绍了使用\r来将光标重置到一行的开头，从而实现重绘的功能。但是如果我们同时有几个同步运行的进度条，该如何实现呢？\r\r。
C++拾趣——转换编译器生成的类型名为代码中的类型名
方亮的专栏
08-20 2305
在软件开发中，特别是在使用C++这类静态类型语言时，编译器在编译过程中会生成许多内部表示，包括类型信息。这些内部类型名通常用于编译器的内部处理，比如类型检查、优化和代码生成等。然而，在编写源代码或进行调试时，我们更习惯于使用人类可读和易于理解的类型名。比如我们不太能看懂，但是可以看懂。因此，将C++编译器生成的类型名转换成代码中的类型名具有多方面的必要性：提高代码的可读性。源代码中的类型名应该清晰地反映其意图和用途，以便于开发者和维护者理解。
C++拾趣——使用VSCode跨平台调试CMake编译的C/C++项目
方亮的专栏
08-17 1484
VSCode的远程开发功能为开发者带来了诸多好处，极大地提升了开发效率和灵活性。首先，它允许开发者在本地编辑环境中直接连接到远程服务器或容器进行代码开发，这样就不需要在本地机器上搭建完整的开发环境，节省了大量的时间和精力。无论是使用SSH连接到远程Linux服务器，还是在Docker容器中进行开发，VSCode都提供了无缝的集成和便捷的操作体验。远程开发的好处不仅在于节省时间，还在于它提供了跨平台的支持。
C++拾趣——编译器预处理宏__COUNTER__的应用场景
方亮的专栏
08-16 873
在C++中，是一个特殊的预处理宏，它主要被用来生成唯一的整数标识符。这个宏是由一些编译器（如GCC和Visual Studio）内置支持的，而不是C++标准的一部分。它的主要应用场景是在宏定义中，用于确保每次宏实例化时都能获得一个唯一的标识符，这在处理模板元编程、避免名称冲突或生成唯一标识符等场景中特别有用。宏每次，都会返回一个从0开始的连续递增的整数值。这意味着，在代码的不同部分或不同文件中使用时，它都能保证生成唯一的整数。这对于在编译时生成唯一的变量名、函数名或枚举值等非常有帮助。需要注意的是，因为。
C++拾趣——有趣的操作符重载
方亮的专栏
06-13 605
“有趣”并不是胡闹，所以本文探讨的将是“符合常识”的重载。而那些“天马行空”的重载，比如重载==为“不等于”则不是本文的议题。
C++拾趣——STL容器的插入、删除、遍历和查找操作性能对比（Windows Visual Studio）——删除
方亮的专栏
10-06 2538
相关环境和说明在已给出。本文将分析从头部、中间和尾部对各个容器进行删除的性能。
青云山拾趣作文.doc
03-07
【青云山拾趣作文.doc】是一篇描绘青云山之旅的散文，通过作者的视角展示了城乡差异、自然景观和人生哲理。这篇文档的标签表明它是一份资料或范文，适合于写作学习和参考。 文章首先描绘了从城市前往青云山途中所见...
（中小学教育）中考作文复习课件：《审题篇》课件.ppt
09-22
例如，“我的老师”要求聚焦于教师的形象描绘，“童年拾趣”则需围绕童年事件展开。 4. **审修饰词**：副词在题目中起着限定和强调的作用。如“门其实开着”，“其实”暗示了先前的误解和后来的理解，写作时需展示...
小学综合实践活动路名拾趣PPT教案.pptx
10-04
在教学活动中，可以设计一系列探究任务，如绘制地图标注这些关隘的位置，收集关于各个关隘的诗词、成语，或者模拟古代战争策略，讨论如何利用这些关隘进行防御。这样的活动不仅能够锻炼学生的地理知识，还能够提高...
[c语言]一句话讲清循环中break和continue的作用与区别
2303_77060768的博客
09-29 169
1.两者的作用break和contuinue都只能在循环中使用，都用来停止循环。​​​​​​​2.两者的区别break在循环中只要遇到break，就直接永久终止当前循环，开始执行当前循环之外的代码。在循环中只要遇到continue，就结束本次循环，继续进行下一次循环。
【C语言】数据类型和变量
最新发布
2302_76713442的博客
10-06 1028
一、数据类型分类（内置数据类型：字符型、整型、浮点型和布尔类型）（自定义数据类型：数组、结构体、枚举和联合体）二~三、深入研究内置数据类型（内置数据类型的大小、使用内置数据类型创建变量、signed 和 unsigned）四、自定义数据类型的内容过于庞大，所以每种自定义数据类型都专门写了一篇博客来介绍，文中有相应链接。
第 21 章 一条记录的多幅面孔——事务的隔离级别与 MVCC
weixin_45740473的博客
10-02 973
并发的事务在运行过程中会出现一些可能的引发一致性问题SQL 标准中有4种隔离级别版本链ReadView。
C - Separated Lunch
m0_74304371的博客
10-05 270
C - Separated Lunch(KEYENCE Programming Contest 2024 (AtCoder Beginner Contest 374))
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

breaksoftware

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值