QBoxLayout支持水平布局和垂直布局构建一个键盘

QBoxLayout

能支持水平布局和垂直布局,

然而键盘的左侧字母区,

键盘大小参差不齐,

用盒子布局再适合不过了。

1 成品示例

2 代码实现

为了使键盘能支持放大缩小,

且能保持键盘的布局不乱,

所以代码中用了满满当当的stretch

且看代码实现:

cpp 复制代码
 // 第一行
    QHBoxLayout *hBox0 = new QHBoxLayout;
    hBox0->setMargin(0);
    hBox0->setSpacing(0);
    QStringList line0 = {"ESC", "F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "F10", "F11", "F12"};
    for (int i = 0; i < line0.size(); ++i)
    {
        QPushButton *btn = new QPushButton(line0.at(i));
        btn->setMinimumSize(60,60);
        btn->setMaximumSize(6000,6000);
        hBox0->addWidget(btn, 2);
        if(line0.at(i) == "ESC")
            hBox0->addStretch(2);
        else if(line0.at(i) == "F4" || line0.at(i) == "F8")
            hBox0->addStretch(1);
    }
    //第二行
    QHBoxLayout *hBox1 = new QHBoxLayout;
    hBox1->setMargin(0);
    hBox1->setSpacing(0);
    QStringList line1 = {"`", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0","-","=","←"};
    for (int i = 0; i < line1.size(); ++i)
    {
        QPushButton *btn = new QPushButton(line1.at(i));
        btn->setMinimumSize(60,60);
        btn->setMaximumSize(6000,6000);
        if(i != line1.size() - 1)
            hBox1->addWidget(btn, 1);
        else
            hBox1->addWidget(btn, 2);
    }
    //第三行
    QHBoxLayout *hBox2 = new QHBoxLayout;
    hBox2->setMargin(0);
    hBox2->setSpacing(0);
    QStringList line2 = {"Tab", "Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P","[","]","\\"};
    for (int i = 0; i < line2.size(); ++i)
    {
        QPushButton *btn = new QPushButton(line2.at(i));
        btn->setMinimumSize(60,60);
        btn->setMaximumSize(6000,6000);
        if(line2.at(i) == "Tab" || line2.at(i) == "\\")
            hBox2->addWidget(btn, 3);
        else
            hBox2->addWidget(btn, 2);
    }
    //第四行
    QHBoxLayout *hBox3 = new QHBoxLayout;
    hBox3->setMargin(0);
    hBox3->setSpacing(0);
    QStringList line3 = {"Caps Lock", "A", "S", "D", "F", "G", "H", "J", "K", "L", ";", ".", "Enter"};
    for (int i = 0; i < line3.size(); ++i)
    {
        QPushButton *btn = new QPushButton(line3.at(i));
        btn->setMinimumSize(60,60);
        btn->setMaximumSize(6000,6000);
        if(line3.at(i) == "Caps Lock")
            hBox3->addWidget(btn, 21);
        else if(line3.at(i) == "Enter")
            hBox3->addWidget(btn, 26);
        else
            hBox3->addWidget(btn, 12);
    }
    //第五行
    QHBoxLayout *hBox4 = new QHBoxLayout;
    hBox4->setMargin(0);
    hBox4->setSpacing(0);
    QStringList line4 = {"Shift", "Z", "X", "C", "V", "B", "N", "M", ",", ".", "/", "Shift"};
    for (int i = 0; i < line4.size(); ++i)
    {
        QPushButton *btn = new QPushButton(line4.at(i));
        btn->setMinimumSize(60,60);
        btn->setMaximumSize(6000,6000);
        if(i == 0)
            hBox4->addWidget(btn, 27);
        else if(i == line4.size()-1)
            hBox4->addWidget(btn, 32);
        else
            hBox4->addWidget(btn, 12);
    }
    //第六行
    QHBoxLayout *hBox5 = new QHBoxLayout;
    hBox5->setMargin(0);
    hBox5->setSpacing(0);
    QStringList line5 = {"Ctrl", "Win", "Alt", "", "Alt", "Fn", "Menu", "Ctrl"};
    for (int i = 0; i < line5.size(); ++i)
    {
        QPushButton *btn = new QPushButton(line5.at(i));
        btn->setMinimumSize(60,60);
        btn->setMaximumSize(6000,6000);
        if(line5.at(i).isEmpty())
            hBox5->addWidget(btn, 74);
        else
            hBox5->addWidget(btn, 15);
    }
    //垂直布局
    QVBoxLayout *vBox = new QVBoxLayout;
    vBox->setMargin(0);
    vBox->setSpacing(0);
    vBox->addLayout(hBox0, 2);
    vBox->addStretch(1);
    vBox->addLayout(hBox1, 2);
    vBox->addLayout(hBox2, 2);
    vBox->addLayout(hBox3, 2);
    vBox->addLayout(hBox4, 2);
    vBox->addLayout(hBox5, 2);
    this->setLayout(vBox);

大概就是先创建水平布局,

最后把这六个水平布局丢到垂直布局中,

唯一麻烦的地方就是要算好按钮比例。

相关推荐
程序leo源13 小时前
Qt窗口详解
开发语言·数据库·c++·qt·青少年编程·c#
我在人间贩卖青春14 小时前
重学Qt——事件处理
qt
小宋00115 小时前
QT中控件qss样式修改
开发语言·qt
yuechuji00118 小时前
三、MPR(三平面重建)和三视图
qt
Hua-Jay20 小时前
OpenCV联合C++/Qt 学习笔记(二十二)----相机模型与投影及单目相机标定
c++·笔记·qt·opencv·学习·计算机视觉
小短腿的代码世界1 天前
QCefView架构深度解析:从Chromium嵌入到Qt信号槽集成的完整技术链路
qt·架构
byxdaz1 天前
Qt修改操作系统的日期与时间
qt
小短腿的代码世界1 天前
Qt属性系统揭秘:从Q_PROPERTY宏到动态元对象系统的完整架构解析
开发语言·qt·架构
丁劲犇1 天前
QodeAssist:为msys2 ucrt64 Qt Creator 注入 AI 灵魂的开源插件
开发语言·人工智能·qt
listhi5201 天前
基于QT的串口心电波形实时显示系统
开发语言·qt