Qt5设计师 的布局管理器的使用例子。

由于人需求，需要自及布局一个聊天界面。

首先新建一个widget,放入两个widget，设置布局为 水平布局器。



widget2内放入webview也要设置为水平布局。（否则无法撑开）



widget1较为复杂，顶部放入widget（设置水平布局）里面放入pushbutton剩余空白部分，放入horizontal spacer，一个像弹簧一样的东西 ，1.占位，2.不让控件变性。

放入一个textbrowser用作聊天记录的显示，再在下面放入一个 widget里面放pushbutton 用作一些选项如表情按钮等等（设置水平布局），设置Horizontal spacer,下面再 放入textedit 用于输入文字，再在下面放入widget，用于一些按钮，比如发送按钮（设置水平布局，加入horizontal spacer）,.

设置左边一个子widget整体为 vertical layout.基本成型。



每个控件的layout是什么名字，都可以在 设计器的右下角属性里面查看。

我们还需要setstretch，设置控件在布局内所占比例。

void Form1::m_initLayout()
{
//|整体
this->ui->horizontalLayout->setStretch(0,5);
this->ui->horizontalLayout->setStretch(1,1);
//|左侧
this->ui->verticalLayout->setStretch(0,1);
this->ui->verticalLayout->setStretch(1,5);
this->ui->verticalLayout->setStretch(2,1);
this->ui->verticalLayout->setStretch(3,3);
this->ui->verticalLayout->setStretch(4,1);
}

下面是设计器的xml
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
<class>Form1</class>
<widget class="QWidget" name="Form1">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>745</width>
<height>665</height>
</rect>
</property>
<property name="windowTitle">
<string>Form</string>
</property>
<layout class="QHBoxLayout" name="horizontalLayout">
<item>
<widget class="QWidget" name="widget" native="true">
<layout class="QVBoxLayout" name="verticalLayout">
<item>
<widget class="QWidget" name="widget_3" native="true">
<layout class="QHBoxLayout" name="horizontalLayout_3">
<item>
<widget class="QPushButton" name="pushButton">
<property name="text">
<string>PushButton</string>
</property>
</widget>
</item>
<item>
<widget class="QPushButton" name="pushButton_2">
<property name="text">
<string>PushButton</string>
</property>
</widget>
</item>
<item>
<spacer name="horizontalSpacer">
<property name="orientation">
<enum>Qt::Horizontal</enum>
</property>
<property name="sizeHint" stdset="0">
<size>
<width>40</width>
<height>20</height>
</size>
</property>
</spacer>
</item>
</layout>
</widget>
</item>
<item>
<widget class="QTextBrowser" name="textBrowser"/>
</item>
<item>
<widget class="QWidget" name="widget_4" native="true">
<property name="minimumSize">
<size>
<width>71</width>
<height>10</height>
</size>
</property>
<layout class="QHBoxLayout" name="horizontalLayout_4">
<item>
<widget class="QPushButton" name="pushButton_3">
<property name="text">
<string>PushButton</string>
</property>
</widget>
</item>
<item>
<widget class="QPushButton" name="pushButton_4">
<property name="text">
<string>PushButton</string>
</property>
</widget>
</item>
<item>
<widget class="QPushButton" name="pushButton_5">
<property name="text">
<string>PushButton</string>
</property>
</widget>
</item>
<item>
<spacer name="horizontalSpacer_3">
<property name="orientation">
<enum>Qt::Horizontal</enum>
</property>
<property name="sizeHint" stdset="0">
<size>
<width>40</width>
<height>20</height>
</size>
</property>
</spacer>
</item>
</layout>
</widget>
</item>
<item>
<widget class="QTextEdit" name="textEdit"/>
</item>
<item>
<widget class="QWidget" name="widget_5" native="true">
<layout class="QHBoxLayout" name="horizontalLayout_5">
<item>
<spacer name="horizontalSpacer_4">
<property name="orientation">
<enum>Qt::Horizontal</enum>
</property>
<property name="sizeHint" stdset="0">
<size>
<width>78</width>
<height>20</height>
</size>
</property>
</spacer>
</item>
<item>
<widget class="QPushButton" name="pushButton_6">
<property name="text">
<string>PushButton</string>
</property>
</widget>
</item>
</layout>
</widget>
</item>
</layout>
</widget>
</item>
<item>
<widget class="QWidget" name="widget_2" native="true">
<layout class="QHBoxLayout" name="horizontalLayout_2">
<item>
<widget class="QWebView" name="webView">
<property name="url">
<url>
<string>about:blank</string>
</url>
</property>
</widget>
</item>
</layout>
</widget>
</item>
</layout>
</widget>
<customwidgets>
<customwidget>
<class>QWebView</class>
<extends>QWidget</extends>
<header>QtWebKitWidgets/QWebView</header>
</customwidget>
</customwidgets>
<resources/>
<connections/>
</ui>


最后运行结果：