做网站分析,凡科做网站不要钱,织梦如何做视频网站,html5标准网站建设选择好友窗口#xff08;三#xff09;
前言
在前两集我们就完成了整个左半部分的内容了#xff0c;那么我们这一集开始就要完成我们的选择好友窗口的右侧部分。
需求分析
我们要做出的效果如下图 可以看到我们整个布局是一个网格的布局#xff0c;当然也可以做成一个垂…选择好友窗口三
前言
在前两集我们就完成了整个左半部分的内容了那么我们这一集开始就要完成我们的选择好友窗口的右侧部分。
需求分析
我们要做出的效果如下图 可以看到我们整个布局是一个网格的布局当然也可以做成一个垂直的布局最顶上有一个选择联系人的Label之后中间是一个滚动区域这个滚动区域是一个垂直的布局最底下是我们的完成按钮与取消按钮。可以看到这个布局还是比较简单的不过要注意里面的不同的布局的区分。
右侧区域初始化
布局我们已经写过很多遍了所以就直接看代码一遍过
void ChooseFriendDialog::initRight(QHBoxLayout *layout)
{//右侧布局管理器QGridLayout* gridLayout new QGridLayout();gridLayout-setSpacing(10);gridLayout-setContentsMargins(20,0,20,20);layout-addLayout(gridLayout,1);//提示 LabelQLabel* tipLabel new QLabel();tipLabel-setText(选择联系人);tipLabel-setFixedHeight(30);tipLabel-setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed);tipLabel-setAlignment(Qt::AlignLeft | Qt::AlignCenter);tipLabel-setStyleSheet(QLabel { font-size: 16px; font-weight: 700; });//滚动区QScrollArea* scrollArea new QScrollArea();scrollArea-setWidgetResizable(true);scrollArea-verticalScrollBar()-setStyleSheet(QScrollBar:vertical { width: 2px; background-color: rgb(255,255,255); });scrollArea-horizontalScrollBar()-setStyleSheet(QScrollBar:horizontal { height: 0px; });scrollArea-setStyleSheet(QScrollArea { border: none; });scrollArea-setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);//滚动区域的QWidgetselectedContainer new QWidget();selectedContainer-setObjectName(selectedContainer);selectedContainer-setStyleSheet(#selectedContainer { background-color: rgb(255,255,255); });scrollArea-setWidget(selectedContainer);//创建container中的垂直布局QVBoxLayout* vlayout new QVBoxLayout();vlayout-setSpacing(0);vlayout-setContentsMargins(0,0,0,0);vlayout-setAlignment(Qt::AlignTop);selectedContainer-setLayout(vlayout);//创建底部按钮QString style QPushButton { color: rgb(7,191,96); background-color: rgb(240,240,240); border: none; border-radius: 5px; };styleQPushButton:hover { background-color: rgb(220,220,220); } QPushButton:pressed { background-color: rgb(200,200,200); };QPushButton* okBtn new QPushButton();okBtn-setFixedHeight(40);okBtn-setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed);okBtn-setText(完成);okBtn-setStyleSheet(style);QPushButton* cancelBtn new QPushButton();cancelBtn-setFixedHeight(40);cancelBtn-setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed);cancelBtn-setText(取消);cancelBtn-setStyleSheet(style);//添加到网格布局gridLayout-addWidget(tipLabel,0,0,1,9);gridLayout-addWidget(scrollArea,1,0,1,9);gridLayout-addWidget(okBtn,2,1,1,3);gridLayout-addWidget(cancelBtn,2,5,1,3);再说一遍一定要注意布局管理器之间的关系。
添加元素
为了测试我们的右侧区域我们就还是需要构造一些假数据来放到里面去。
先来看看添加的函数和之前的添加到左侧的函数时异曲同工之妙。
void ChooseFriendDialog::addSelectedFriend(const QString userId, const QIcon avatar, const QString name)
{ChooseFriendItem* item new ChooseFriendItem(this, userId, avatar, name, true);selectedContainer-layout()-addWidget(item);
}
有人可能发现了我们还传入了userId和这个Dialog的指针这个到后面自有妙用当然这些变量的添加并不是一开始就想得到的都是需要后面需要适应新需求而添加而上。
添加以下代码即可
#if TEST_UIQIcon defaultAvatar(:/resource/image/defaultAvatar.png);for(int i 0; i 30; i){this-addSelectedFriend(defaultAvatar, 狱友 QString::number(i));}
#endif
下一集我们就要讲一下点击左侧能够添加到右侧的功能以及点击复选框能够删除右侧并取消左侧勾选的功能。
