Qt基础——让使用Designer创建的UI也能自动适应窗口大小

我们知道,通过Qt的各种Layout可以实现控件的自动布局。

但是在使用Qt Designer创建的UI时,发现UI始终是设计时的样子,无法随着容器的放大缩小自适应地变化。

通过之前对ui的.h文件进行分析,我们知道Qt在生成ui代码时,根据最外层的Layout自动添加一个了Widget:

   /** 这个Widget在UI设计时是没有的,是Qt为了方便组合其他的组件而且自动创建的。
    Widget的名字是根据最外层的组件来的,这里最外层是一个QVBoxLayout组件,故Widget
    以VerticalLayoutWidget命名*/
    QWidget *verticalLayoutWidget;

 

而我们在setupUi时,将 verticalLayoutWidget 指定为目标窗体的子控件,而 verticalLayoutWidget 的大小是已经固定了的,如下:

      //创建myQtTestForm的Child Widget,
        verticalLayoutWidget = new QWidget(myQtTestForm);
        verticalLayoutWidget->setObjectName(QString::fromUtf8("verticalLayoutWidget"));
        verticalLayoutWidget->setGeometry(QRect(20, 20, 491, 311));

 

所以, verticalLayoutWidget 不会随父窗口的放大缩小而变化。

解决办法就是,把 verticalLayoutWidget 放在目标窗体的Layout中,代码如下:

复制代码
    //设置Ui
    ui.setupUi(this);

    //使Ui可自适应父窗口大小
    QVBoxLayout* mainLayout = new QVBoxLayout;
    mainLayout->addWidget(ui.verticalLayoutWidget);
    setLayout(mainLayout);
复制代码

 

好了,就这么简单!

### 如何在 Qt Designer 中实现布局嵌套 #### 使用 Qt Designer 创建基本窗口 启动 Qt Designer 后,选择创建一个新的表单 (Widget),这将成为放置各种控件的基础。 #### 添加顶层布局 为了开始构建布局,在工具箱中找到并拖拽 `QWidget` 或者其他合适的顶级容器到设计区域。接着通过右键点击该容器或在其选中的状态下前往顶部菜单栏的“布局(Layout)”选项来设置整体布局方式。可以选择水平布局 (`QHBoxLayout`)、垂直布局 (`QVBoxLayout`) 等作为最外层结构[^2]。 #### 构建子级布局 对于更复杂的界面需求来说,可以在已经设定好的大框架内继续细分空间分配。比如在一个垂直布局下的某个区域内再加入新的布局形式——可以是网格布局(`QGridLayout`)用于表格样式的展示;或者是表单布局(`QFormLayout`)适用于数据输入场景等。具体操作同样是先选定目标父组件,之后利用同样的方法为其指定内部的小范围布局模式[^3]。 #### 实现多层级嵌入 当涉及到更深程度上的层次划分时,则重复上述过程即可完成多级别的布局组合。例如想要得到一个左侧列表加右侧详情页的效果,就可以在外围建立一个水平分割器(Horizontal Splitter),左边部分采用列表视图(ListView)配合垂直布局容纳各个条目按钮(Button with QVBoxLayout),而右边则依据实际内容决定是否进一步拆分更多小组件及其对应的布局安排[^1]。 ```xml <ui version="4.0"> <class>MainWindow</class> <widget class="QWidget" name="centralWidget"> <!-- 外部水平布局 --> <layout class="QHBoxLayout" name="horizontalLayout"> <!-- 左侧垂直布局 --> <item> <layout class="QVBoxLayout" name="verticalLayoutLeft"/> </item> <!-- 右侧可能存在的复杂布局 --> <item> <widget class="QWidget" name="rightContainer"> <layout class="YourChosenLayoutTypeHere" name="complexRightLayout"/> </widget> </item> </layout> </widget> </ui> ``` 此 XML 片段展示了如何定义一个多级嵌套的 UI 结构,其中包含了外部水平布局以及两个不同方向的内部布局实例。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值