wxWidgets嵌套wxSizers实现垂直堆叠自适应内容聊天布局问题

问题原因 #

两个异常表现的核心根源是两点：

1. wxStaticText默认不会自动折行长文本，且你没有触发控件添加后的布局重计算逻辑
2. wxScrolledWindow添加子控件后需要手动触发滚动区域与子控件位置重算，否则所有新增面板都会堆叠在左上角默认位置，且保持初始最小尺寸

修复方案 #

修改后的AddChatMessage方法代码如下：

void MainFrame::AddChatMessage(std::string addr, std::string str, bool sent) {
    wxPanel *panelMsg = new wxPanel(this->panelChat, wxID_ANY);
    panelMsg->SetBackgroundColour(wxColour(255, 0, 0));

    // 计算最大宽度为聊天面板的60%，对应你CSS的max-size规则
    int maxTextWidth = this->panelChat->GetClientSize().GetWidth() * 0.6;

    wxStaticText *textAddr = new wxStaticText(panelMsg, wxID_ANY, addr);
    textAddr->SetBackgroundColour(wxColour(128,128,128)); // 对应CSS里gray的text-field
    wxStaticText *textMsg = new wxStaticText(panelMsg, wxID_ANY, str);
    textMsg->SetBackgroundColour(wxColour(128,128,128));
    textMsg->Wrap(maxTextWidth); // 长文本自动折行

    wxBoxSizer *sizerMsgHeader = new wxBoxSizer(wxHORIZONTAL); // 水平sizer才能实现对齐效果
    wxBoxSizer *sizerMsgContent = new wxBoxSizer(wxHORIZONTAL);
    
    int alignFlag = sent ? wxALIGN_RIGHT : wxALIGN_LEFT;
    // 加padding对应CSS的text-field的padding规则
    sizerMsgHeader->Add(textAddr, 0, alignFlag | wxALL, 5);
    sizerMsgContent->Add(textMsg, 0, alignFlag | wxALL, 5);

    wxBoxSizer *sizerMsg = new wxBoxSizer(wxVERTICAL);
    sizerMsg->Add(sizerMsgHeader, 0, wxEXPAND);
    sizerMsg->Add(sizerMsgContent, 0, wxEXPAND | wxBOTTOM, 5);
    // 触发消息面板的尺寸计算
    panelMsg->SetSizerAndFit(sizerMsg);

    this->sizerChat->Add(panelMsg, 0, wxEXPAND | wxLEFT | wxTOP | wxRIGHT, 5);
    // 触发聊天滚动面板的整体布局重算，更新滚动区域
    this->sizerChat->Layout();
    this->panelChat->FitInside();
    // 可选：自动滚动到最新消息位置
    this->panelChat->Scroll(-1, this->panelChat->GetScrollLines(wxVERTICAL));
}

补充说明 #

如果需要在聊天窗口大小改变时自动调整已有消息的文本换行宽度，可以给panelChat绑定wxEVT_SIZE事件，在事件回调里遍历所有已添加的消息文本控件，重新调用Wrap()方法后触发整体布局重算即可。

内容的提问来源于stack exchange，提问作者Kaskorian