佛山关键词排名首页_个人简历word文档模板_想要导航推广网页怎么做_百度问答怎么赚钱

大纲

居中显示窗口
清屏并重设光标
绘制窗口
- 绘制窗口顶部
- 绘制复选项
- 绘制按钮行
- 绘制窗口底部
修改终端默认行为
对方向键的特殊处理
过程控制
- Tab键的处理
- Enter键的处理
- 上下左右方向键的处理
完整代码
代码地址

这次我们要绘制复选框，如下图。
在这里插入图片描述

居中显示窗口

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

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

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

然后通过当前窗口的大小，计算出起始绘制的坐标。下面options里保存的是可供选择的单选项，窗口的高度会随着选项个数而变化。

    // 窗口的宽度和高度int windowWidth = 40;int windowHeight = options.size() + 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;

绘制复选项

在这里插入图片描述

如果当前选中的不是底部PushButton，而是这些复选框选项，那么如果某个选项被聚焦，则在其前面使用>做标记。

    for (int i = 0; i < options.size(); ++i) {cout << string(startX, ' ') << "| ";cout << redBackground << whiteText; // 设置红色背景和白色字体if (i == selected && !isButtonSelected) {cout << "> "; // 用于指示当前选中的选项} else {cout << "  ";}cout << options[i] << string(windowWidth - 6 - options[i].size(), ' ') << reset << " |" << endl;}

绘制按钮行

在这里插入图片描述

我们需要绘制两个按钮：OK和Cancel。

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

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

    // 打印按钮行string okButton = "[ OK ]";string cancelButton = "[Cancel]";int totalButtonLength = okButton.length() + cancelButton.length() + 2; // 2 spaces between buttonsint 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等7个键。

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

向左、向右只能在Push Button间切换；

向上、向下只能在Check Box间切换；

ESC是退出程序；

Enter表示PushButton被按下，或者Check Box被选中。

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

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

过程控制

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

int main() {vector<string> options = {"Option 1 [ ]", "Option 2 [ ]", "Option 3 [ ]"};int selected = 0;bool isButtonSelected = false;int buttonIndex = 0;while (true) {printMenu(options, selected, isButtonSelected, buttonIndex);int ch = getch();if (ch == 9) { // Tab 键if (isButtonSelected) {if (buttonIndex == 1) {isButtonSelected = false;selected = 0;} else {buttonIndex = (buttonIndex + 1) % 2;}} else {if (selected == options.size() - 1) {isButtonSelected = true;buttonIndex = 0;} else {selected = (selected + 1) % options.size();}}} else if (ch == 10 || ch == 13) { // Enter 键if (isButtonSelected) {if (buttonIndex == 0) { // OK 按钮cout << "Selected options: ";for (const auto& option : options) {if (option[option.size() - 2] == 'X') {cout << option << " ";}}cout << endl;break;} else if (buttonIndex == 1) { // Cancel 按钮break;}} else {if (options[selected][options[selected].size() - 2] == 'X') {options[selected][options[selected].size() - 2] = ' ';} else {options[selected][options[selected].size() - 2] = 'X';}}}  else if (ch == 1000) { // 上箭头键if (!isButtonSelected) {selected = (selected - 1 + options.size()) % options.size();}} else if (ch == 1001) { // 下箭头键if (!isButtonSelected) {selected = (selected + 1) % options.size();}} else if (ch == 1002) { // 右箭头键if (isButtonSelected) {buttonIndex = (buttonIndex + 1) % 2;}} else if (ch == 1003) { // 左箭头键if (isButtonSelected) {buttonIndex = (buttonIndex + 1) % 2;}} else if (ch == 27) { // Esc 键退出break;}}return 0;
}

Tab键的处理

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

如果是Push Button区域（isButtonSelected == true），且当前聚焦的是Cancel（buttonIndex == 1），则在收到Tab键时，会跳到Check Box区域（isButtonSelected = false）的第一个选项（selected = 0）；如果聚焦的不是Cancel，则通过buttonIndex = (buttonIndex + 1) % 2计算出要聚焦到的Push Button的下标。

如果是Check Box区域（isButtonSelected == false），且当前聚焦的是最后一个Check Box，则在收到Tab键时，会跳到Push Button区域（isButtonSelected = true），并聚焦到OK上（buttonIndex = 0）；如果聚焦的不是最后一个Check Box，则通过selected = (selected + 1) % options.size()计算出要聚焦到的Check Box的下标。

在这里插入图片描述

Enter键的处理

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

如果当前聚焦的是Check Box区域（isButtonSelected == false），则会根据当前聚焦项目状态决定将其变成被选中状态（X）还是未选中状态（空格）。

在这里插入图片描述

上下左右方向键的处理

我们让上下键只能在Check Box区域切换焦点，左右键只能在Push Button区域切换焦点。这是因为Check Box区域中的项目是上下布局的，而Push Button区域是左右布局的。
在这里插入图片描述

在这里插入图片描述

完整代码

#include <iostream>
#include <vector>
#include <termios.h>
#include <unistd.h>
#include <sys/ioctl.h>using namespace std;void display(const vector<string>& options, int selected, bool isButtonSelected, int buttonIndex) {const string redBackground = "\033[41m"; // 红色背景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 = options.size() + 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 < options.size(); ++i) {cout << string(startX, ' ') << "| ";cout << redBackground << whiteText; // 设置红色背景和白色字体if (i == selected && !isButtonSelected) {cout << "> "; // 用于指示当前选中的选项} else {cout << "  ";}cout << options[i] << string(windowWidth - 6 - options[i].size(), ' ') << reset << " |" << endl;}// 打印按钮行string okButton = "[ OK ]";string cancelButton = "[Cancel]";int totalButtonLength = okButton.length() + cancelButton.length() + 2; // 2 spaces between buttonsint 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 == 65) ch = 1000; // 上箭头键if (ch == 66) ch = 1001; // 下箭头键if (ch == 67) ch = 1002; // 右箭头键if (ch == 68) ch = 1003; // 左箭头键}}tcsetattr(STDIN_FILENO, TCSANOW, &oldt);return ch;
}int main() {vector<string> options = {"Option 1 [ ]", "Option 2 [ ]", "Option 3 [ ]"};int selected = 0;bool isButtonSelected = false;int buttonIndex = 0;while (true) {display(options, selected, isButtonSelected, buttonIndex);int ch = getch();if (ch == 9) { // Tab 键if (isButtonSelected) {if (buttonIndex == 1) {isButtonSelected = false;selected = 0;} else {buttonIndex = (buttonIndex + 1) % 2;}} else {if (selected == options.size() - 1) {isButtonSelected = true;buttonIndex = 0;} else {selected = (selected + 1) % options.size();}}} else if (ch == 10 || ch == 13) { // Enter 键if (isButtonSelected) {if (buttonIndex == 0) { // OK 按钮cout << "Selected options: ";for (const auto& option : options) {if (option[option.size() - 2] == 'X') {cout << option << " ";}}cout << endl;break;} else if (buttonIndex == 1) { // Cancel 按钮break;}} else {if (options[selected][options[selected].size() - 2] == 'X') {options[selected][options[selected].size() - 2] = ' ';} else {options[selected][options[selected].size() - 2] = 'X';}}}  else if (ch == 1000) { // 上箭头键if (!isButtonSelected) {selected = (selected - 1 + options.size()) % options.size();}} else if (ch == 1001) { // 下箭头键if (!isButtonSelected) {selected = (selected + 1) % options.size();}} else if (ch == 1002) { // 右箭头键if (isButtonSelected) {buttonIndex = (buttonIndex + 1) % 2;}} else if (ch == 1003) { // 左箭头键if (isButtonSelected) {buttonIndex = (buttonIndex + 1) % 2;}} else if (ch == 27) { // Esc 键退出break;}}return 0;
}

代码地址

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