c++ Qt5学习笔记 2021-2-22 （setContentsMargins()作用，设计布局实现的QQ消息列表，自定义控件来实现动态添加，使用数组来控制自定义控件）

1、setContentsMargins()作用：

设置布局的边距，设置布局后，如果发现两个布局之间间距太大，可以使用

setContentsMargins

拉近两个布局间的距离。

setContentsMargins

的四个参数分别为：左、上、右、下的边距。

使用时：

2、QQ的消息列表：

c++ Qt5学习笔记 2021-2-22 （setContentsMargins()作用，设计布局实现的QQ消息列表，自定义控件来实现动态添加，使用数组来控制自定义控件）

其实可以使用坐标来一个一个往下搭，用坐标来搭似乎还好理解一点。想了想还是使用布局来做，坐标用多了代码就看不懂了。

大致划分如下：

c++ Qt5学习笔记 2021-2-22 （setContentsMargins()作用，设计布局实现的QQ消息列表，自定义控件来实现动态添加，使用数组来控制自定义控件）

最外面一个

水平布局1

，

水平布局1

中一个头像和一个

垂直布局

，

垂直布局

中是

水平布局2

和

水平布局3

，

水平布局2

中两个

label

，

水平布局3

中一个

label

（为了方便与上面对齐，所以单独给他一个布局）。

实现的代码如下：

//水平布局1
    //此处的message_box为stacked widget分页中的一页
    QWidget *hlayout_widget = new QWidget(ui->message_box);
    QHBoxLayout *hLayout = new QHBoxLayout(hlayout_widget);

    //竖直布局
    QWidget *vlayout_widget = new QWidget(hlayout_widget);
    QVBoxLayout *vLayout = new QVBoxLayout(vlayout_widget);

    //水平布局2
    QWidget *hlayout_widget_2 = new QWidget(vlayout_widget);
    QHBoxLayout *hLayout_2 = new QHBoxLayout(hlayout_widget_2);//水平布局2

    //水平布局3
    QWidget *hlayout_widget_3 = new QWidget(vlayout_widget);
    QHBoxLayout *hLayout_3 = new QHBoxLayout(hlayout_widget_3);//水平布局3

    //页面上的控件
    //使用qlabel作为头像时，发现setStyleSheet失效，所以改为用QPushButton
    QPushButton *Icon = new QPushButton(hlayout_widget);
    Icon->setStyleSheet("width:40px;height:40px;background-color:black;border:0px;border-radius:20px;border-image:url(:/new/prefix1/source/2.png);");
    QLabel *qq_name = new QLabel(u8"八度空间的秘密");
    QLabel *last_msg = new QLabel(u8"我肚子好饿：啊啊啊啊");
    QLabel *msg_date = new QLabel("2021-2-16");

    //向布局中添加控件
    hLayout->addWidget(Icon);
    hLayout->addWidget(vlayout_widget);
    vLayout->addWidget(hlayout_widget_2);
    hLayout_2->addWidget(qq_name);
    hLayout_2->addStretch(2);
    hLayout_2->addWidget(msg_date);
    vLayout->addWidget(hlayout_widget_3);
    hLayout_3->addWidget(last_msg);
    
    hLayout_2->setContentsMargins(0,20,0,0);
    hLayout_3->setContentsMargins(0,0,0,20);

    hlayout_widget->resize(290,110);

运行结果：

c++ Qt5学习笔记 2021-2-22 （setContentsMargins()作用，设计布局实现的QQ消息列表，自定义控件来实现动态添加，使用数组来控制自定义控件）

3、用来动态显示的自定义控件：

动态创建多个这样的消息，不可能一行一行写，所以通过自己声明控件的方式创建，之前用过，这里记录一下。

（1）布局来做：

在

mainwindow.h

中创建

public

对象：

QWidget* message_boxs(const QString &name
                              ,const QString &icon
                              ,const QString &message
                              ,const QString &msg_date) {
        //水平布局1
        QWidget *hlayout_widget = new QWidget(this);
        QHBoxLayout *hLayout = new QHBoxLayout(hlayout_widget);

        //竖直布局
        QWidget *vlayout_widget = new QWidget(hlayout_widget);
        QVBoxLayout *vLayout = new QVBoxLayout(vlayout_widget);

        //水平布局2
        QWidget *hlayout_widget_2 = new QWidget(vlayout_widget);
        QHBoxLayout *hLayout_2 = new QHBoxLayout(hlayout_widget_2);//水平布局2

        //水平布局3
        QWidget *hlayout_widget_3 = new QWidget(vlayout_widget);
        QHBoxLayout *hLayout_3 = new QHBoxLayout(hlayout_widget_3);//水平布局3

        QPushButton *qqicon = new QPushButton(this);    //头像
        QLabel *qqname = new QLabel(this);     //名字
        QLabel *qqmessage = new QLabel(this);
        QLabel *msg_date_label = new QLabel(this);

        //头像，qq名，qq信息，最后信息时间
        qqicon->setStyleSheet(QString("width:40px;height:40px;border:0px;border-radius:20px;border-image:url(:/new/prefix1/source/%1);").arg(icon));
        qqname->setText(name);
        qqmessage->setText(message);
        msg_date_label->setText(msg_date);

        hLayout->addWidget(qqicon);
        hLayout->addWidget(vlayout_widget);
        vLayout->addWidget(hlayout_widget_2);
        vLayout->addWidget(hlayout_widget_3);
        hLayout_2->addWidget(qqname);
        hLayout_2->addStretch(2);
        hLayout_2->addWidget(qqmessage);
        hLayout_3->addWidget(msg_date_label);

        hLayout_2->setContentsMargins(0,20,0,0);
        hLayout_3->setContentsMargins(0,0,0,20);

        hlayout_widget->resize(290,125);

        return hlayout_widget;
    }

在

mainwindow.cpp

中添加：

//此处的message_box为stacked widget分页中的一页
    QWidget *vlayout_main_widget = new QWidget(ui->message_box);
    QVBoxLayout *vLayout_main = new QVBoxLayout(vlayout_main_widget);
    
    //这里可以使用数据库中查询到的数据批量添加
    QWidget *message_box1 = message_boxs(u8"懒羊羊","2.png",u8"我肚子好饿：啊啊啊啊","20:21");
    QWidget *message_box2 = message_boxs(u8"慢羊羊","3.png",u8"我肚子好饿：啊啊啊啊","20:21");
    QWidget *message_box3 = message_boxs(u8"喜羊羊","2.png",u8"我肚子好饿：啊啊啊啊","20:21");
    vLayout_main->addWidget(message_box1);
    vLayout_main->addWidget(message_box2);
    vLayout_main->addWidget(message_box3);

运行结果：

c++ Qt5学习笔记 2021-2-22 （setContentsMargins()作用，设计布局实现的QQ消息列表，自定义控件来实现动态添加，使用数组来控制自定义控件）

基本就有个雏形了，还要调节一下上下间距，再加个滚动条。图简单的话，接下来可以不使用布局来做了，可以把自己自建的控件是用坐标一个一个往下排就行了。

（2）坐标来做：

在

mainwindow.h

中创建

public

对象：

QWidget* message_boxs(const QString &name
                          ,const QString &icon
                          ,const QString &message
                          ,const QString &msg_date) {
        QWidget *qwidget = new QWidget(this);

        QPushButton *qqicon = new QPushButton(qwidget);    //头像
        QLabel *qqname = new QLabel(qwidget);     //名字
        QLabel *qqmessage = new QLabel(qwidget);
        QLabel *msg_date_label = new QLabel(qwidget);

        //头像，qq名，qq信息，最后信息时间
        qqicon->setStyleSheet(QString("width:40px;height:40px;border:0px;border-radius:20px;border-image:url(:/new/prefix1/source/%1);").arg(icon));
        qqname->setText(name);

        qqmessage->setText(message);
        qqmessage->setStyleSheet("color:rgb(173,173,173)");
        msg_date_label->setText(msg_date);

        qqicon->move(15,10);
        qqname->move(65,15);
        qqmessage->move(65,35);
        msg_date_label->move(240,15);

        qwidget->resize(290,60);
        return qwidget;
    }

在

mianwindow.cpp

中放置控件：

QWidget *message_box1 = message_boxs(u8"懒羊羊","2.png",u8"我肚子好饿：啊啊啊啊","20:21");
    QWidget *message_box2 = message_boxs(u8"慢羊羊","3.png",u8"我肚子好饿：啊啊啊啊","20:21");
    QWidget *message_box3 = message_boxs(u8"喜羊羊","2.png",u8"我肚子好饿：啊啊啊啊","20:21");

    message_box1->setParent(ui->message_box);
    message_box1->move(0,0);
    message_box1->setStyleSheet("background-color:rgb(127,127,127)"); //为了定制高度，所以用颜色标识出来，可不用
    message_box2->setParent(ui->message_box);
    message_box2->move(0,60);
    message_box3->setParent(ui->message_box);
    message_box3->move(0,120);

运行结果：

c++ Qt5学习笔记 2021-2-22 （setContentsMargins()作用，设计布局实现的QQ消息列表，自定义控件来实现动态添加，使用数组来控制自定义控件）

之前尝试过自建设计师界面类，画一个界面，然后作为控件来放置。虽然能放，但是不会随着一起放缩和移动，所以放弃了。

（3）使用容器数组来控制：

这里紧接着上面坐标实现的操作。

在

mainwindow.h

中创建

public

对象：

在

mainwindow.cpp

中创建自建控件：

QStringList namelist,iconlist,meslist,timelist;
    //使用时，以下内容就可以替换为数据库中的信息。
    //像QQ中那样则应该还需要把信息传递给服务器，信息等存储在本地，
    //朋友的头像和其他信息等需要在服务器下载
    namelist.append(u8"喜羊羊");
    namelist.append(u8"懒羊羊");
    namelist.append(u8"慢羊羊");
    namelist.append(u8"泰哥");
    iconlist.append("1.jpg");
    iconlist.append("4.jpg");
    iconlist.append("5.jpg");
    iconlist.append("15.jpg");
    meslist.append(u8"哈哈哈哈");
    meslist.append(u8"我肚子好饿");
    meslist.append(u8"发生肾莫事了");
    meslist.append(u8"我一拳头下去就把他鼻子打骨折了");
    timelist.append("20:21");
    timelist.append("20:21");
    timelist.append("20:21");
    timelist.append("20:21");
    
    for(int i=0;i<4;i++)
        qWidget_group.push_back(message_boxs(namelist.at(i)
                                             ,iconlist.at(i)
                                             ,meslist.at(i)
                                             ,timelist.at(i))),
        qWidget_group[i]->setParent(ui->message_box),
        //鼠标悬浮效果
        qWidget_group[i]->setStyleSheet("QWidget::hover{background-color:rgb(235,235,235)}"),
        qWidget_group[i]->move(0,60*i);

运行结果：

c++ Qt5学习笔记 2021-2-22 （setContentsMargins()作用，设计布局实现的QQ消息列表，自定义控件来实现动态添加，使用数组来控制自定义控件）

c++ Qt5学习笔记 2021-2-22 （setContentsMargins()作用，设计布局实现的QQ消息列表，自定义控件来实现动态添加，使用数组来控制自定义控件）

1、setContentsMargins()作用：

2、QQ的消息列表：

3、用来动态显示的自定义控件：

（1）布局来做：

（2）坐标来做：

（3）使用容器数组来控制：

继续阅读

C语言第四章自述2第四章选择结构程序设计

面试题:vector和map的区别，异同。空间分布，100万数据存哪个比较合适。一、迭代器区别二、vector三、Map、Set四、vector_map 为什么比map效率高五、如何选择六、容器选择原则七、效率对比

C++ 多线程用条件变量确定线程的执行顺序而不是使用 sleep(1)

POJ 1284 Primitive Roots (欧拉函数&原根定理)

CQ V1.0分词bates(基于双数组tire树)—应该是目前最快的中文分词算法

成员函数初始化列表

2021-08-13c++——类之操作符重载

swmm与lisflood-fp源码如何一起编译 CMake命令

Windows下VS开发环境环境安装工程项目设置关于Debug和Release的提示

一文看懂字符串的加减乘除

C++ 第十五周报告1--《冒泡法排序》

C++实现简单顺序表

C经典书籍笔记——C陷阱与缺陷②(语法陷阱之优先级)一、错误案列二、优先级规律

线性表之顺序表的实现

C++判断素数、求最大公约数代码判断一个数是否为素数求两个数的最大公约数

SequoiaDB巨杉数据库C++驱动概述