C++拾趣——绘制Console中Check Box

于 2024-10-05 00:15:00 发布
阅读量975 收藏 22
点赞数 25
文章标签： c++ 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/breaksoftware/article/details/142621852
版权

大纲

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

居中显示窗口

按照界面库的设计，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 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等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 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 == 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

breaksoftware
关注
vc++ Radio button用法示例
03-15
在vc++ 程序窗体中使用Radio button的示例，让你学会RadioButton的用法，对VC来说，这是再简单不过的基础要领了。本源码实例通过用户对单选框Radio button的选择，演示如何得到单选按钮的值，并最终显示结果。 运行环境：Windows/Visual C/C++
VC++学习-控件篇（RadioButton）
深蓝
05-07 3943
编程环境：VS2013，MFC 转自 https://blog.csdn.net/c_cyoxi/article/details/23868979 https://blog.csdn.net/mengwang024/article/details/41252623 https://blog.csdn.net/LXL110306/article/details/80596857 分组 Ra...
RadioButton单选框和CheckBox复选框
zhyue28的博客
07-24 933
RadioButton和RadioGroup RadioButton是单选按钮，但是一般不会单独使用（就一项还选个毛），所以一般会成组出现，那么这几个选项按钮就会放在RadioGroup里作为一组，这样才能实现选一个的效果。 常用属性 RadioGroup：orientation 子选项的布局方式，horizontal（横向）或者vertical（纵向） RadioButton： checke...
[转]VC++------------Radio Button的用法
roofwei的专栏
02-05 8460
先为对话框加上2个radio button，分别是Radio1和Radio2。问题1：如何让Radio1或者Radio2默认选上？如何知道哪个被选上了？关键是选上，“默认”只要放在OnInitDialog()即可。三种方法可以让它选上，第一种：((CButton *)GetDlgItem(IDC_RADIO1))->SetCheck(TRUE);//选上((CButton *)GetDlgIt
c++中RadioButton无法默认选择
u014230987的专栏
06-09 1705
当用RadioButton时，希望在程序运行的时候默认一个选项： CheckRadioButton(IDC_RADIO1,IDC_RADIO2,IDC_RADIO1); //CheckRadioButton(第一个,最后一个,要选择的那个);   可调用时不能实现，结果发现原因： 本来先后添加的两个单选按钮的资源ID号居然是先添加的大于后面的（原因不解） 解决办法： 一、更改
（中小学教育）中考作文复习课件：《审题篇》课件.ppt
09-22
例如，“我的老师”要求聚焦于教师的形象描绘，“童年拾趣”则需围绕童年事件展开。 4. **审修饰词**：副词在题目中起着限定和强调的作用。如“门其实开着”，“其实”暗示了先前的误解和后来的理解，写作时需展示...
青云山拾趣作文.doc
03-07
【青云山拾趣作文.doc】是一篇描绘青云山之旅的散文，通过作者的视角展示了城乡差异、自然景观和人生哲理。这篇文档的标签表明它是一份资料或范文，适合于写作学习和参考。 文章首先描绘了从城市前往青云山途中所见...
Python拾趣008 turtle会画图的小乌龟
12-21
Python中的turtle库是一个非常有趣的模块，它以小乌龟移动并绘制路径的形式，提供了一种简单易用的图形绘制方式。这个库非常适合初学者学习编程，因为它通过直观的图形化编程，激发学习者对编程的兴趣。 turtle库的...
Python拾趣014 logging日志模块
12-21
它提供了丰富的功能，可以帮助开发者记录软件运行过程中的信息、调试细节、警告和错误，以便于后期分析和问题排查。在本文中，我们将深入探讨`logging`模块的基本用法、日志等级、日志处理器以及高级特性。 首先，...
拾趣原型图4新 2.0.zip|拾趣原型图4新 2.0.zip
09-05
在IT行业中，原型图设计是软件开发流程中的关键步骤，特别是在构建生活类应用时，它对于用户界面（UI）和用户体验（UX）的规划至关重要。"拾趣原型图4新 2.0.zip" 提供的正是这样一种设计资源，用于展示"拾趣"应用的...
MFC控件RADIO用法
04-14
mfc中各种控件的使用方法事例程序 包括slider Radio edit static 等
radiobutton group
09-20 387
1. 环境：VS2010 2. 分组 将radio1、radio2、radio3分为1组，radio4、radio5分为另一组； 方法：设置 radio1 的 属性： group、tabstop、auto均为true 设置 radio2 的 属性：group设为false，tabstop、auto均为true 设置 radio3 的 属性：group设为fals...
C++MFC编程之按钮控件Button、Radio Button和Check Box
数据库天地
01-25 1485
钮控件包括命令按钮（Button）、单选按钮（Radio Button）和复选框（Check Box）等。命令按钮就是我们前面多次提到的狭义的按钮控件，用来响应用户的鼠标单击操作，进行相应的处理，它可以显示文本也可以嵌入位图。单选按钮使用时，一般是多个组成一组，组中每个单选按钮的选中状态具有互斥关系，即同组的单选按钮只能有一个被选中。 命令按钮是我们最熟悉也是最常用的一种按钮控件，而单选按钮和...
c++ MFC 在类向导中找不到Radio-button 控件ID，无法添加变量的异常
cq_Learnmore的博客
07-11 1545
如果添加Radio控件无法在类向导中找到控件ID，进行如下操作： 选中Radio-button控件---属性---Group(指定基于Tab键顺序的一组控件中的第一个控件)---设置为true。 ...
VC6.0 控件Radio Button的使用
长安
08-27 1857
1.新建一个对话框程序 2.添加4个Radio Button和1个Button 注意： 1）在添加Radio Button控件时，需要保证它们的资源号连续，也就是连续添加4个Radio Button按钮 2）将第一个Radio Button属性中的Group打上“√” 3.给Raido1关联一个int型变量m_nSelect 步骤： 1）右键空白地方，点击ClassWizard(...
VC中Radio控件的用法[转]
weixin_33698823的博客
11-01 935
先为对话框加上2个radio button，分别是Radio1和Radio2。 问题1：如何让Radio1或者Radio2默认选上？如何知道哪个被选上了？ 关键是选上，“默认”只要放在OnInitDialog()即可。三种方法可以让它选上， 第一种： ((CButton *)GetDlgItem(IDC_RADIO1))-&gt;SetCheck(TRUE);//选上 ((CButton...
常用控件Radio Button的常用用法
09-26 1566
常用控件Radio Button的常用用法 Posted on 2005-08-27 11:15 zuilang 阅读(385) 评论(4)  编辑 收藏 <!--<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"xmlns:dc="http://purl.org/dc/elements/1.1/"xmlns
MFC中单选按钮(Radio Button)的简单使用
热门推荐
szx0427的博客
08-09 1万+
MFC中单选按钮(Radio Button)的简单使用
jBPM4.3中文开发手册：入门到实践
包括创建新的流程文件，通过源码编辑流程，以及在Eclipse中安装和配置GPD插件的步骤，同时介绍了如何定义jBPM用户库，添加jPDL4模式，导入示例项目，以及使用ant工具处理部分文件。 第4章部署业务归档： 本章介绍了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

breaksoftware

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

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

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

打赏作者

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

抵扣说明：

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

余额充值