选择好友窗口（三）

选择好友窗口（三）

前言

在前两集我们就完成了整个左半部分的内容了，那么我们这一集开始就要完成我们的选择好友窗口的右侧部分。

需求分析

我们要做出的效果如下图

可以看到我们整个布局是一个网格的布局，当然也可以做成一个垂直的布局，最顶上有一个选择联系人的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; }";style+="QPushButton: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

下一集我们就要讲一下点击左侧能够添加到右侧的功能，以及点击复选框能够删除右侧并取消左侧勾选的功能。