Qt界面布局 QLayout 、QHBoxLayout、QVBoxLayout学习-----群聊界面设计

学习c++和Qt没多久,跟着网课学习做类似qq的聊天项目,其中核心是群聊,但是界面部分是用设计师界面做的。自己想练一下代码,就用代码敲了一下,其中最重要的就是关于布局的学习。
群聊界面如下:在这里插入图片描述其中包含了聊天记录框(不可编辑),消息编辑框,群成员显示框,字体选择、字号选择、字体加粗、字体倾斜、字体下划线、字体颜色、保存记录、清除记录、发送按钮、退出按钮等按钮。
其中BIUCSR按钮原本是显示图标的,所以使用的是QToolButton。

具体代码如下:

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QPushButton>
#include <QToolButton>
#include <QTextBrowser>
#include <QTextEdit>
#include <QTableWidget>
#include <QVBoxLayout>
#include <QHBoxLayout>
#include <QFontComboBox>
#include <QComboBox>
#include <QLabel>

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = 0);
    ~Widget();

private:
    QVBoxLayout *vLayout;//总体垂直布局
    QVBoxLayout *vLayout_1;

    QHBoxLayout *hLayout_1;
    QHBoxLayout *hLayout_2;
    QHBoxLayout *hLayout_3;

    QTextBrowser *browser;//记录浏览框
    QTextEdit *edit;//信息编辑框
    QTableWidget *table;//群员显示框

    QFontComboBox *font;//字体选择
    QComboBox *size;//字号选择

    QToolButton *btnBold;//字体加粗
    QToolButton *btnItalic;//字体倾斜
    QToolButton *btnUnderline;//字体下划线
    QToolButton *btnColor;//字体颜色
    QToolButton *btnSave;//保存记录
    QToolButton *btnClear;//清除记录

    QPushButton *btnSend;//发送按钮
    QPushButton *btnExit;//退出按钮
    QLabel *number;//在线人数
};

#endif // WIDGET_H

源文件:

#include "widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    resize(730,450);
    setWindowTitle("群聊界面");
    //总体垂直布局
    vLayout = new QVBoxLayout(this);
    vLayout->setSpacing(0);//控件间隔为0
    vLayout->setMargin(5);//边缘间隔5

    font = new QFontComboBox(this);
    font->setFixedSize(150,20);
    size = new QComboBox(this);
    size->setFixedSize(45,20);

    QList<QString> sizeList;//添加字号
    sizeList << "8" << "9" << "10";
    size->addItems(sizeList);

    //按钮
    btnBold = new QToolButton(this);
    btnBold->setText("B");
    btnBold->setFixedSize(33,33);
    btnItalic = new QToolButton(this);
    btnItalic->setText("I");
    btnItalic->setFixedSize(33,33);
    btnUnderline = new QToolButton(this);
    btnUnderline->setText("U");
    btnUnderline->setFixedSize(33,33);
    btnColor = new QToolButton(this);
    btnColor->setText("C");
    btnColor->setFixedSize(33,33);
    btnSave = new QToolButton(this);
    btnSave->setText("S");
    btnSave->setFixedSize(33,33);
    btnClear = new QToolButton(this);
    btnClear->setText("R");
    btnClear->setFixedSize(33,33);

    //将控件放入水平布局1
    hLayout_1 = new QHBoxLayout();
    hLayout_1->addWidget(font);
    hLayout_1->addWidget(size);
    hLayout_1->addWidget(btnBold);
    hLayout_1->addWidget(btnItalic);
    hLayout_1->addWidget(btnUnderline);
    hLayout_1->addWidget(btnColor);
    hLayout_1->addWidget(btnSave);
    hLayout_1->addWidget(btnClear);
    hLayout_1->setMargin(10);//设置边缘间隔为10
    hLayout_1->setSpacing(7);//控件间隔为7

    browser = new QTextBrowser(this);
    edit = new QTextEdit(this);

    //将browser、edit和水平布局1进行垂直布局,设为垂直布局2
    vLayout_1 = new QVBoxLayout();
    vLayout_1->addWidget(browser);
    vLayout_1->addLayout(hLayout_1);
    vLayout_1->addWidget(edit);
    //setStretchFactor(widget/layout, int)则可设置布局中各个控件或布局的大小比例
    //如下面三个控件大小的比例为4:1:2
    vLayout_1->setStretchFactor(browser, 4);
    vLayout_1->setStretchFactor(hLayout_1, 1);
    vLayout_1->setStretchFactor(edit, 2);

    table = new QTableWidget(this);

    //将垂直布局1和table进行水平布局,设为水平布局2,比例为3:1
    hLayout_2 = new QHBoxLayout();
    hLayout_2->addLayout(vLayout_1);
    hLayout_2->addWidget(table);
    hLayout_2->setStretchFactor(vLayout_1,3);
    hLayout_2->setStretchFactor(table,1);
    hLayout_2->setSpacing(5);

    btnSend = new QPushButton(this);
    btnSend->setText("发送");
    btnSend->setFixedSize(85,30);
    number = new QLabel(this);
    number->setText("在线用户:0");
    number->setFixedSize(85,30);
    btnExit = new QPushButton(this);
    btnExit->setText("退出");
    btnExit->setFixedSize(85,30);

    //水平布局3
    hLayout_3 = new QHBoxLayout();
    hLayout_3->addWidget(btnSend);
    hLayout_3->addWidget(number);
    hLayout_3->addWidget(btnExit);

    //最后将水平布局2和水平布局3进行垂直布局,比例为20:1
    vLayout->addLayout(hLayout_2);
    vLayout->addLayout(hLayout_3);
    vLayout->setStretchFactor(hLayout_2, 20);
    vLayout->setStretchFactor(hLayout_2, 1);

    setLayout(vLayout);
}

Widget::~Widget()
{

}

实属萌新,有错误的地方还请指正

发布了7 篇原创文章 · 获赞 0 · 访问量 910

猜你喜欢

转载自blog.csdn.net/sunximei/article/details/100837135