QT qml布局讲解

人还是要有梦想的2026-06-14 10:05

正常简单qml设计界面是分为上中下，菜单栏为上，内容栏为中，尾部栏为下。

所以正常是在Application窗口无布局上设置纵向布局ColumnLayout。

使用anchors.fill填充窗口，使用在columnlayout里面继承窗口。

然后在菜单栏中使用方形容器Rectangle。这使用RowLayout布局横向布局，里面添加按钮，文本，菜单等里面可以适当进行空间填充。

Rectangle使用anchors.fill进行填充，然后RowLayout进行布局用Layout.prferredheight和layout.preferredwidth进行布局然后添加控件

菜单栏里面填充是item{layout.fillwidth:true}进行填充。

中间内容栏使用跳转页面控件进行跳转

复制代码

 StackView {
                Layout.fillWidth:true;
                Layout.fillHeight:true;
                id: stackView
                //anchors.fill: parent
                //Layout.fillWidth: true;
                //Layout.fillHeight: true;
                initialItem: Qt.resolvedUrl("second.qml")
            }

尾部栏通过Rectangle方形容器进行设置布局

首先方形容器在ColumnLayout布局中，所以

Layout.preferredwidth和Layout.preferredHeight设置高度和宽度。

然后用RowLayout横向布局进行控件的布局。