消息展示区（一）

消息展示区（一）

前言

在上一集，我们做了主窗口的右窗口的初始化工作，这一集我们将开始完成右窗口的消息展示区。

需求分析

首先我们要先去初始化右窗口的消息展示区，这个窗口是需要滚动的，所以我们会和中间窗口的实现的方式类似。我们需要先让这个MessageShowArea继承QScrollArea，里面放入一个widget。

消息展示区的每一条信息，我们也要封装成一个类，由于我们需要分辨并正确放置每一条信息，我们需要用一个布尔变量isLeft来判定这条信息是否放置在左边，放置在右边的就是我们自己发送的信息。这个还是很好理解的。我们在创建MessageItem实例的时候需要用到工厂模式，需要四种消息类型的一种，这里暂时只做文本类型。

MessageShowArea

和中间区域一样的操作，先初始化基本属性并设置滚动条的样式，我们创建一个名为container的widget作为包含内部元素的容器，之后再在container里面设置一个垂直的布局管理器。

MessageShowArea::MessageShowArea() {
    //初始化基本属性
    this->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    this->setWidgetResizable(true);

    //设置滚动条样式
    this->verticalScrollBar()->setStyleSheet("QScrollBar:vertical { width:2px; background-color: rgb(240,240,240); }");
    this->horizontalScrollBar()->setStyleSheet("QScrollBar:horizontal { height: 0; }");
    this->setStyleSheet("QScrollArea { border: none; }");

    //创建container这样的widget，作为包含内部元素的容器
    container = new QWidget();
    this->setWidget(container);

    //container里添加布局管理器
    QVBoxLayout* layout = new QVBoxLayout();
    layout->setSpacing(0);
    layout->setContentsMargins(0,0,0,0);
    container->setLayout(layout);


}

makeMessageItem

每一条消息包含了发送者的昵称、头像、发送的消息三大类，当然也可以包括每条信息的时间。我们这里只讲一点点。

首先我们要创建MessageItem的对象和它的布局管理器，我们将用网格布局进行布局。我们需要从Message中获取发送者的头像。

我们在Message当中其实是没有发送者的头像的，但是有一个用户信息的对象，里面存放着发送者的头像。

MessageShowArea::MessageItem MessageShowArea::MessageItem::makeMessageItem(bool isLeft, const Message &message)
{
    //创建对象和布局管理器
    MessageItem* messageItem = new MessageItem(isLeft);
    QGridLayout* layout = new QGridLayout();

    layout->setContentsMargins(0,0,0,0);
    layout->setSpacing(0);

    messageItem->setMinimumHeight(100);
    messageItem->setLayout(layout);

    //创建头像
    QPushButton* avatarBtn = new QPushButton();
    avatarBtn->setFixedSize(40,40);
    avatarBtn->setIconSize(QSize(40,40));
    avatarBtn->setIcon(message.sender.avatar);
    if(isLeft){
        layout->addWidget(avatarBtn,0,0,2,1,Qt::AlignTop | Qt::AlignLeft);
    } else{
        layout->addWidget(avatarBtn,0,1,2,1,Qt::AlignTop | Qt::AlignLeft);
    }


    return messageItem;
}

那么我们这一集就先到这里。