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

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

大纲

这次我们要绘制下拉菜单，如下图。
在这里插入图片描述

居中显示窗口

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

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

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

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

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

    // 计算窗口的起始位置
    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;

绘制输入框

在这里插入图片描述

    // 打印输入框行
    cout << string(startX, ' ') << "| " << redBackground << whiteText << "Input: " << inputText << string(windowWidth - 8 - inputText.size() - 3, ' ') << reset << " |" << endl;

绘制空行

在这里插入图片描述

    // 打印空行
    for (int i = 0; i < windowHeight - 6; ++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 - 2 - 2, ' ') << " |" << endl;

绘制窗口底部

在这里插入图片描述

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

修改终端默认行为

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

我们只接受Tab、向左、向右、ESC和Enter等5个键。

Tab键可以在EditText和Push Button之间切换；

向左、向右键既可以在Push Button间切换，也可以在输入框中移动光标。

ESC是退出程序；

Enter表示PushButton被按下。

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

下面的代码在将终端修改为静默模式（关闭规范模式（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 = 1002; // 右箭头键
            if (ch == 68) ch = 1003; // 左箭头键
        }
    }

过程控制

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

int main() {
    string inputText;
    int cursorPosition = 0;
    bool isButtonSelected = false;
    int buttonIndex = 0;

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

        int ch = getch();
        if (ch == 9) { // Tab 键
            if (!isButtonSelected) {
                isButtonSelected = true;
            } else {
                buttonIndex = (buttonIndex + 1) % 2;
            }
        } else if (ch == 10 || ch == 13) { // Enter 键
            if (isButtonSelected) {
                cout << "\033[2J\033[H"; // 清空画面
                if (buttonIndex == 0) { // OK 按钮
                    cout << "You entered: " << inputText << endl;
                } else if (buttonIndex == 1) { // Cancel 按钮
                    cout << "Operation cancelled." << endl;
                }
                break;
            }
        } else if (ch == 1002) { // 右箭头键
            if (!isButtonSelected && cursorPosition < inputText.size()) {
                cursorPosition++;
            } else if (isButtonSelected) {
                buttonIndex = (buttonIndex + 1) % 2;
            }
        } else if (ch == 1003) { // 左箭头键
            if (!isButtonSelected && cursorPosition > 0) {
                cursorPosition--;
            } else if (isButtonSelected) {
                buttonIndex = (buttonIndex + 1) % 2;
            }
        } else if (!isButtonSelected && ch >= 32 && ch <= 126 && inputText.size() < 16) { // 可打印字符，限制16个字符
            inputText.insert(cursorPosition, 1, ch);
            cursorPosition++;
        } else if (!isButtonSelected && ch == 127 && cursorPosition > 0) { // 退格键
            inputText.erase(cursorPosition - 1, 1);
            cursorPosition--;
        } else if (ch == 27) { // Esc 键退出
            cout << "\033[2J\033[H"; // 清空画面
            break;
        }
    }

    return 0;
}

Tab键的处理

该界面分为三个个区域：EditText区域和Push Button区域。isButtonSelected变量表示当前焦点是否在Push Button区域。

如果是Push Button区域（isButtonSelected == true），且当前聚焦的是Cancel（buttonIndex == 1），则在收到Tab键时，会跳到EditText行区域（isDropdownSelected= true）；如果聚焦的不是Cancel，则通过buttonIndex = (buttonIndex + 1) % 2计算出要聚焦到的Push Button的下标。

如果是EditText区域（isButtonSelected == false），则在收到Tab键时，跳到Push Button区域（isButtonSelected == true）的OK按钮处。这就预示着在输入框中是无法接受\t的。

在这里插入图片描述

Enter键的处理

如果当前聚焦的是Push Button区域（isButtonSelected == true），则判断聚焦的是OK还是Cancel。如果是OK，则输出用户输入的字符并退出；如果是Cancel则直接退出。

如果当前聚焦的是EditText区域（isButtonSelected == false），则不会进行任何处理。

左右方向键的处理

我们让左右键既可以在Push Button区域切换焦点，又可以在输入框中移动光标。
在这里插入图片描述

在这里插入图片描述

完整代码

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

using namespace std;

void display(const string& inputText, int cursorPosition, bool isButtonSelected, int buttonIndex) {
    const string greenBackground = "\033[42m"; // 绿色背景
    const string redBackground = "\033[41m";   // 红色背景
    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 = 10;

    // 计算窗口的起始位置
    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;

    // 打印输入框行
    cout << string(startX, ' ') << "| " << redBackground << whiteText << "Input: " << inputText << string(windowWidth - 8 - inputText.size() - 3, ' ') << reset << " |" << endl;

    // 打印空行
    for (int i = 0; i < windowHeight - 6; ++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 - 2 - 2, ' ') << " |" << endl;

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

    cout << reset; // 重置颜色

    // 将光标移动到输入框位置
    if (!isButtonSelected) {
        cout << "\033[" << (startY + 2) << ";" << (startX + 8 + 2 + cursorPosition) << "H";
    }
}

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 = 1002; // 右箭头键
            if (ch == 68) ch = 1003; // 左箭头键
        }
    }
    tcsetattr(STDIN_FILENO, TCSANOW, &oldt);
    return ch;
}

int main() {
    string inputText;
    int cursorPosition = 0;
    bool isButtonSelected = false;
    int buttonIndex = 0;

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

        int ch = getch();
        if (ch == 9) { // Tab 键
            if (!isButtonSelected) {
                isButtonSelected = true;
                buttonIndex = 0;
            } else {
                if (buttonIndex == 1) {
                    isButtonSelected = false;
                } else {
                    buttonIndex = (buttonIndex + 1) % 2;
                }
            }
        } else if (ch == 10 || ch == 13) { // Enter 键
            if (isButtonSelected) {
                cout << "\033[2J\033[H"; // 清空画面
                if (buttonIndex == 0) { // OK 按钮
                    cout << "You entered: " << inputText << endl;
                } else if (buttonIndex == 1) { // Cancel 按钮
                    cout << "Operation cancelled." << endl;
                }
                break;
            }
        } else if (ch == 1002) { // 右箭头键
            if (!isButtonSelected && cursorPosition < inputText.size()) {
                cursorPosition++;
            } else if (isButtonSelected) {
                buttonIndex = (buttonIndex + 1) % 2;
            }
        } else if (ch == 1003) { // 左箭头键
            if (!isButtonSelected && cursorPosition > 0) {
                cursorPosition--;
            } else if (isButtonSelected) {
                buttonIndex = (buttonIndex + 1) % 2;
            }
        } else if (!isButtonSelected && ch >= 32 && ch <= 126 && inputText.size() < 16) { // 可打印字符，限制16个字符
            inputText.insert(cursorPosition, 1, ch);
            cursorPosition++;
        } else if (!isButtonSelected && ch == 127 && cursorPosition > 0) { // 退格键
            inputText.erase(cursorPosition - 1, 1);
            cursorPosition--;
        } else if (ch == 27) { // Esc 键退出
            cout << "\033[2J\033[H"; // 清空画面
            break;
        }
    }

    return 0;
}

代码地址

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

breaksoftware
关注
专栏目录
Python拾趣008 turtle会画图的小乌龟
12-21
Python中的turtle库是一个非常有趣的模块，它以小乌龟移动并绘制路径的形式，提供了一种简单易用的图形绘制方式。这个库非常适合初学者学习编程，因为它通过直观的图形化编程，激发学习者对编程的兴趣。 turtle库的...
Python拾趣014 logging日志模块
12-21
它提供了丰富的功能，可以帮助开发者记录软件运行过程中的信息、调试细节、警告和错误，以便于后期分析和问题排查。在本文中，我们将深入探讨`logging`模块的基本用法、日志等级、日志处理器以及高级特性。 首先，...
C++拾趣——绘制Console中DropdownMenu
最新发布
方亮的专栏
10-09 1101
这次我们要绘制下拉菜单，如下图。
C++拾趣——绘制Console中PushButton
方亮的专栏
10-07 1630
在中，我们熟悉了怎么制作一个进度条。现在我们开始制作更复杂的控件。本节我们就做一个PushButton控件。
Vscode 打开终端窗口
老胡的博客
04-01 1万+
文章目录 一、tasks.json 和launch.json配置 二、保持终端窗口 三、shell 设置 四、示例 一、tasks.json 和launch.json配置 tasks.json： { "tasks": [ { "type": "cppbuild", "label": "C/C++: gcc.exe 生成活动文件", "command": "E:\\software\\m....
[C++] 程序运行时设置 Windows 终端窗口参数
的专栏
06-30 2201
C++程序运行时设置Windows终端窗口参数 程序运行时设置Windows终端窗口参数 不可选定(导致程序暂停) 字符集改为UTF-8, 以显示中文 字符字体, 以支持中文显示 窗口宽度 int main() { SetConsoleOutputCP(65001); // 使用 UTF-8 字符集 DWORD mode; CONSOLE_FONT_INFOEX info = { 0 }; info.cbSize = sizeof(info); info.dwFo
C++拾趣——绘制Console中圆形进度
方亮的专栏
10-04 791
在一文中，我们看到了如何绘制单向前进的进度条。本文我们将介绍两种圆形进度的绘制方法。
C++拾趣——绘制Console中Radio Button
方亮的专栏
10-08 1138
下面的代码在将终端修改为静默模式（关闭规范模式（ICANON）和回显（ECHO），使得输入字符不需要按下回车键就能立即读取，并且输入的字符不会显示在终端上）后，等待并读取键盘的输入，然后再还原原始的设置。如果是Radio Button区域（isButtonSelected == false），且当前聚焦的是最后一个Radio Button，则在收到Tab键时，会跳到Push Button区域（isButtonSelected = true），并聚焦到OK上（buttonIndex = 0）；
C++拾趣——绘制Console中Check Box
方亮的专栏
10-05 976
这次我们要绘制复选框，如下图。
C++拾趣——绘制Console中多个进度条
方亮的专栏
10-03 1407
在一文中，我们介绍了使用\r来将光标重置到一行的开头，从而实现重绘的功能。但是如果我们同时有几个同步运行的进度条，该如何实现呢？\r\r。
C++拾趣——绘制Console中单个进度条
方亮的专栏
10-02 591
我们在使用wget等软件时，会看到诸如下面这样的进度条的提示。本文我们介绍如何实现一个这样的进度条。
青云山拾趣作文.doc
03-07
【青云山拾趣作文.doc】是一篇描绘青云山之旅的散文，通过作者的视角展示了城乡差异、自然景观和人生哲理。这篇文档的标签表明它是一份资料或范文，适合于写作学习和参考。 文章首先描绘了从城市前往青云山途中所见...
（中小学教育）中考作文复习课件：《审题篇》课件.ppt
09-22
例如，“我的老师”要求聚焦于教师的形象描绘，“童年拾趣”则需围绕童年事件展开。 4. **审修饰词**：副词在题目中起着限定和强调的作用。如“门其实开着”，“其实”暗示了先前的误解和后来的理解，写作时需展示...
小学综合实践活动路名拾趣PPT教案.pptx
10-04
在教学活动中，可以设计一系列探究任务，如绘制地图标注这些关隘的位置，收集关于各个关隘的诗词、成语，或者模拟古代战争策略，讨论如何利用这些关隘进行防御。这样的活动不仅能够锻炼学生的地理知识，还能够提高...
C++的四种强制转换
热门推荐
方亮的专栏
12-16 2万+
C++的四种强制转换 C++中的四种转换，是一个老生常谈的话题。但是对于初学者来说，该如何选择哪种转换方式仍然会有点困惑。而且我总是觉得“纸上得来终觉浅”，于是便“绝知此事要躬行”。于是利用闲暇时光，整理一下reinterpret_cast、const_cast、static_cast和dynamic_cast这四种强制转换的相关知识。（转载请指明出于breaksoftware的...
C++拾趣——使用stl标准库生成等差、等比数列的方法
方亮的专栏
10-12 7531
代码是思想的表达。阅读代码是一个猜测、求证的过程。这个过程非常费脑，所以人们都不喜欢啰啰嗦嗦的表达方式。于是在相同认知水平下，简洁高效的表达是喜闻乐见的。本文将抛砖引玉，通过一些案例讲解如何去简化代码。（转载请指明出于breaksoftware的csdn博客） 关系数列 等差数列 比如我们要构建的序列存储的值是0,1,2,3,4……9999。 常规写法 ...
C++拾趣——类构造函数的隐式转换
方亮的专栏
02-08 6089
之前看过一些批判C++的文章，大致意思是它包含了太多的“奇技淫巧”，并不是一门好的语言。我对这个“奇技淫巧”的描述颇感兴趣，因为按照批判者的说法，C++的一些特性恰巧可以让一些炫耀技术的同学有了炫耀的资本——毕竟路人皆知的东西却没什么好炫耀的。这又让我想起了《孔乙己》中关于“回”字有几种写法的描述。当时老师在上此课时，是抱着批判的态度去评价孔乙己的这种思想，而我却感觉到这其中必有一...
C++拾趣——STL容器的插入、删除、遍历和查找操作性能对比（Windows Visual Studio）——删除
方亮的专栏
10-06 2558
相关环境和说明在已给出。本文将分析从头部、中间和尾部对各个容器进行删除的性能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

breaksoftware

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

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

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

打赏作者

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

抵扣说明：

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

余额充值