1、setContentsMargins()作用：
设置布局的边距，设置布局后，如果发现两个布局之间间距太大，可以使用setContentsMargins拉近两个布局间的距离。
setContentsMargins的四个参数分别为：左、上、右、下的边距。
使用时：
hLayout->setContentsMargins(0,20,0,0); //左边距20，相当于该布局向右移动20px
2、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);
运行结果：
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);
运行结果：
基本就有个雏形了，还要调节一下上下间距，再加个滚动条。图简单的话，接下来可以不使用布局来做了，可以把自己自建的控件是用坐标一个一个往下排就行了。
（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);
运行结果：
之前尝试过自建设计师界面类，画一个界面，然后作为控件来放置。虽然能放，但是不会随着一起放缩和移动，所以放弃了。
（3）使用容器数组来控制：
这里紧接着上面坐标实现的操作。
在mainwindow.h中创建public对象：
QList<QWidget *> qWidget_group;
在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);
运行结果：
扫一扫
1308
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
