学习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()
{
}
实属萌新,有错误的地方还请指正