滚动聊天布局设计
我们的聊天布局如下图
最外层的是一个chatview(黑色), chatview内部在添加一个MainLayout(蓝色),MainLayout内部添加一个scrollarea(红色),scrollarea内部包含一个widget(绿色),同时也包含一个HLayout(紫色)用来浮动显示滚动条。widget内部包含一个垂直布局Vlayout(黄色),黄色布局内部包含一个粉色的widget,widget占据拉伸比一万,保证充满整个布局。
代码实现
我们对照上面的图手写代码,在项目中添加ChatView类,然后先实现类的声明
class ChatView: public QWidget
{
Q_OBJECT
public:
ChatView(QWidget *parent = Q_NULLPTR);
void appendChatItem(QWidget *item); //尾插
void prependChatItem(QWidget *item); //头插
void insertChatItem(QWidget *before, QWidget *item);//中间插
protected:
bool eventFilter(QObject *o, QEvent *e) override;
void paintEvent(QPaintEvent *event) override;
private slots:
void onVScrollBarMoved(int min, int max);
private:
void initStyleSheet();
private:
//QWidget *m_pCenterWidget;
QVBoxLayout *m_pVl;
QScrollArea *m_pScrollArea;
bool isAppended;
};
接下来实现其函数定义, 先实现构造函数
ChatView::