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);

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

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

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

相关推荐
Lhan.zzZ10 小时前
基于Qt的UDP广播发现与TCP连接系统的设计与实现
qt·tcp/ip·udp
leiming611 小时前
c++ QT 开发第二天,用ui按钮点亮实体led
开发语言·qt·ui
hqwest11 小时前
码上通QT实战04--主窗体布局
开发语言·css·qt·布局·widget·layout·label
leiming611 小时前
c++ qt开发第一天 hello world
开发语言·c++·qt
赵民勇13 小时前
QML Base Type 详解
qt
hqwest13 小时前
码上通QT实战07--主窗体消息栏设计
开发语言·qt·qt事件·主窗体·stackedwidget
hqwest13 小时前
码上通QT实战06--导航按钮事件
开发语言·qt·mousepressevent·qfont·qpainter·qlineargradient·setbrush
CC.GG14 小时前
【Qt】常用控件----容器类控件(QGroupBox、QTabWidget )以及布局管理器
开发语言·qt
缘如风14 小时前
Qt Creator 断点调试断点停不住
开发语言·qt
hqwest14 小时前
码上通QT实战05--绘制导航按钮
开发语言·css·qt·自定义控件·qframe·布局ui