QML布局

最新推荐文章于 2024-03-17 00:05:37 发布
最新推荐文章于 2024-03-17 00:05:37 发布
阅读量5.2k 收藏 48
点赞数 14
分类专栏： C++与QT 文章标签： qml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hyc_cheng/article/details/112213792
版权

一、简介

QML是Qt推出的Qt Quick技术的一部分，它可以快速便捷实现流畅的UI。
QT Quick布局一般有四种形式，
①. 绝对坐标：x、y、z、width、height、
②. 锚(anchors) 布局
③. 定位器（Row、Column、Grid、Flow）
④. 布局管理器（GridLayout、RowLayout、ColumnLayout）。

二、绝对坐标布局

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Button{
        x:100
        y:200

        width: 200
        height: 100

        Text {
            id: btntxt
            text: qsTr("my text")
        }

        onClicked: {
            btntxt.text = "clicked"
        }
    }
}

通过对Button控件 x、y 、width、height 的绝对布局，能够使其显示在我们指定的位置上，但是不建议使用此方法，扩展性太差。

运行效果如下：
在这里插入图片描述

三、锚(anchors) 布局

本文将会从以下四个方面来讲解锚点布局，分别是锚线、边距、偏移以及便捷用法。首先给出下面的结构图，一方面可以让大家在总体上对锚点布局的内容有一个框架，另一方面也方便后续知识的回顾梳理。先安静下来，花几分钟熟悉下总体知识结构，然后再往下阅读，阅读完成之后，再回来看看是否知识结构更加清晰明了。
在这里插入图片描述

1、布局简介

锚点布局anchor, 对于第一次接触QML的新手来说，可能稍微比较难理解，这里可以这么理解， 锚是船停泊时所用的器具，用来固定船只。对于界面布局来说，就是用来固定部件的位置。锚点布局使用anchors附件属性将一个元素的边定位到另一个元素的边，从而确定元素的位置和大小。

2、位置布局

一个部件有七个锚线(anchor lines), 分别是left、right、top、bottom、horizontalCenter、verticalCenter和baseline。这里的anchor lines都是不可见的。

下图所示，蓝色区域代表一个部件，用虚线来代表锚线，left代表部件的左锚线、right代表部件的右锚线、top代表部件的顶部锚线、bottom代表部件的底部锚线、horizontalCenter代表部件的水平居中锚线、vertialCenter代表部件的垂直居中锚线。

至于baseline锚线，这里没有搞明白他的具体效果，所以没有画出。QT的官方文档说是baseline是标示文本的虚线，对于没有文本的部件，功能等同于top。
在这里插入图片描述

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

Window {
    visible: true //表示部件可见
    width: 640
    height: 480
    title: qsTr("Hello World")


    Rectangle{
        anchors.fill: parent //锚布局的快捷方式，表示部件的填充范围，其实相当于设置部件的宽度和高度
        width: 300  // 由于上面锚布局已经设置了部件的填充范围，所以这里的宽度不起作用了
        height: 300 // 由于上面锚布局已经设置了部件的填充范围，所以这里的高度不起作用了
        color:"yellow"
        anchors.margins: { //设置部件的边距
            left:20
            right:20
            top:20
            bottom:20
        }

        Rectangle{
            id:rect1
            width: 100
            height: 100
            anchors.left: parent.left //将rect1部件的左边设置为父项的左边，也就是左对齐
            color: "red"
            border.width: 5 //设置 部件的边框
            border.color: "green"

            Text {
                id: rect1txt
                anchors.centerIn: parent  //锚布局的快捷方式，表示部件相对于父项居中对齐，也就是让文字显示在部件的中间。 表示位置为目标对象的中心，相当于同时设置了horizontalCenter和verticalCenter。
                text: qsTr("rect1")
            }
        }
        Rectangle{
            id:rect2
            width: 100
            height: 100
            anchors.left: rect1.right //将rect2部件的左边设置为rect1部件的右边，也就是两个部件从左到右这样子排列
            border.width: 5 //设置 部件的边框
            border.color: "green"
            color: "red"

            anchors.margins: { //设置部件的边距
                left:20  //左边距设置为20，其实是将每个矩形部件设置一定的间隙
            }
            Text {
                id: rect2txt
                anchors.centerIn: parent
                text: qsTr("rect2")
            }
        }

        Rectangle{
            id:rect3
            width: 100
            height: 100
            anchors.left: rect2.right //将rect3部件的左边设置为rect2部件的右边，也就是三个部件从左到右这样子排列
            color: "red"
            border.width: 5 //设置 部件的边框
            border.color: "green"

            anchors.margins: {
                left:20//左边距设置为20，其实是将每个矩形部件设置一定的间隙
            }
            Text {
                id: rect3txt
                anchors.centerIn: parent
                text: qsTr("rect3")
            }
        }

        Rectangle{
            id:rect4
            width: 100
            height: 100
            anchors.left: rect3.right //将rect4部件的左边设置为rect3部件的右边，也就是四个部件从左到右这样子排列
            color: "red"
            border.width: 5 //设置 部件的边框
            border.color: "green"

            anchors.margins: {
                left:20//左边距设置为20，其实是将每个矩形部件设置一定的间隙
            }
            Text {
                id: rect4txt
                anchors.centerIn: parent
                text: qsTr("rect4")
            }
        }
    }
}

运行效果如下：
在这里插入图片描述
anchor也提供简易设置位置的方式，如centerIn, 表示位置为目标对象的中心，相当于同时设置了horizontalCenter和verticalCenter。比如上面例子中文本的设置anchors.centerIn: parent，表示将文本信息位置设置为父级的中心。

注意，我们采用anchor进行布局的时候，如果单单设置一个属性是没有办法确定其位置，这可能导致部件没有办法显示出来。比如如果rect1没有设置height, 那么rect1就不会显示。如果不想要显示设置rect1的高度，那么除了设置rect1左侧的锚线，还需要设置它的顶部和底部的锚线。

3、CSS盒子模型

上面有关margins 、border的属性介绍，可查看下图的盒子模型介绍。
在这里插入图片描述
CSS盒模型（Box Model）规定了元素框处理元素内容、内边距、边框和外边距的方式。

1、content 是显示内容矩形区域，平时我们设置的最小宽度或者高度，就是定义这个矩形区。
2、padding是包围content的矩形区域，通过padding属性可以定义padding的上、下、左、右宽度，其实padding就是我们俗称的内边距。
3、border是包围padding的边框，通过border属性可以定义边框的线型和颜色，也可以分别定义border的上下左右的线宽和颜色。使用border-radius可以定义边框转角的圆弧半径，从而构造具有圆角矩形的编辑或按钮等组件。
4、margin是border之外与父组件之间的空白边距，我们一般称之为外边距，可以分别定义上下左右的边距大小。

4、偏移

anchor可以设置部件的偏移，分别为horizontalCenterOffset, verticalCenterOffset 和baselineOffset，表示水平中心的偏移、垂直中心的偏移、基线的偏移。

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

Window {
    visible: true //表示部件可见
    width: 640
    height: 480
    title: qsTr("Hello World")


    Rectangle{
        anchors.fill: parent //锚布局的快捷方式，表示部件的填充范围，其实相当于设置部件的宽度和高度
        width: 300  // 由于上面锚布局已经设置了部件的填充范围，所以这里的宽度不起作用了
        height: 300 // 由于上面锚布局已经设置了部件的填充范围，所以这里的高度不起作用了
        color:"yellow"
        anchors.margins: { //设置部件的边距
            left:20
            right:20
            top:20
            bottom:20
        }

        Rectangle{
            id:rect1
            width: 100
            height: 100
            anchors.left: parent.left //将rect1部件的左边设置为父项的左边，也就是左对齐
            color: "red"
            border.width: 5 //设置 部件的边框
            border.color: "green"

            Text {
                id: rect1txt
                anchors.centerIn: parent  //锚布局的快捷方式，表示部件相对于父项，居中对齐，也就是让文字显示在部件的中间
                text: qsTr("rect1")
            }
        }
        Rectangle{
            id:rect2
            width: 100
            height: 100
            anchors.left: rect1.right //将rect2部件的左边设置为rect1部件的右边，也就是两个部件从左到右这样子排列
            border.width: 5 //设置 部件的边框
            border.color: "green"
            color: "red"

            anchors.margins: { //设置部件的边距
                left:20  //左边距设置为20，其实是将每个矩形部件设置一定的间隙
            }
            Text {
                id: rect2txt
                anchors.centerIn: parent
                text: qsTr("rect2")
            }
        }

        Rectangle{
            id:rect3
            width: 100
            height: 100
            anchors.left: rect2.right //将rect3部件的左边设置为rect2部件的右边，也就是三个部件从左到右这样子排列
            color: "red"
            border.width: 5 //设置 部件的边框
            border.color: "green"

            anchors.margins: {
                left:20//左边距设置为20，其实是将每个矩形部件设置一定的间隙
            }
            Text {
                id: rect3txt
                anchors.centerIn: parent
                text: qsTr("rect3")
            }
        }

        Rectangle{
            id:rect4
            width: 100
            height: 100
            anchors.left: rect3.right //将rect4部件的左边设置为rect3部件的右边，也就是四个部件从左到右这样子排列
            color: "red"
            border.width: 5 //设置 部件的边框
            border.color: "green"

            anchors.margins: {
                left:20//左边距设置为20，其实是将每个矩形部件设置一定的间隙
            }
            Text {
                id: rect4txt
                anchors.centerIn: parent
                text: qsTr("rect4")
            }
        }
        //****************************设置部件的偏移****************************/
        Rectangle{
            id:rect5
            width: 100
            height: 100
            anchors.centerIn: parent //设置控件rect5显示在父组件的中间
            anchors.horizontalCenterOffset: 30 //水平方向偏移30像素点
            anchors.verticalCenterOffset: 30 //垂直方向偏移30像素点
            color: "red"
            border.width: 5 //设置 部件的边框
            border.color: "green"

            Text {
                id: rect5txt
                anchors.centerIn: parent
                text: qsTr("rect5")
            }
        }
    }
}

如上rect5部件，添加部件rect5, 设置显示在窗体中心，但是偏向右下角30个像素，运行效果如下：
在这里插入图片描述

5、局限

anchor布局也有局限性，出于性能考虑，部件只能设置锚点为同级或者直接父级。

6、anchor.fill // 设置部件范围

7、例子

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

Window {
    visible: true //表示部件可见
    width: 640
    height: 480
    title: qsTr("Hello World")

    property string txt: "这是一个文本，最上边水平居中对齐"

    //1). Text 靠最上边，且水平居中。
    Text {
        id: txt1;

        anchors.horizontalCenter:  parent.horizontalCenter;    //水平居中
        anchors.topMargin: 20;

        text: txt;
        color: "red";
        font.pixelSize: 32;  //像素大小
    }
    //2、方框跟文字水平左对齐
    Rectangle{
        id:rect1
        width: 300
        height: 40
        color: "blue"
        radius: 5
        border.color: "black"
        border.width: 3
        anchors.top: txt1.bottom
        anchors.left: txt1.left
        anchors.topMargin: 30

        TextInput{
            id:input1
            width: parent.width-20
            height: parent.height-10

            anchors.centerIn: parent
        }
    }
    //3、按钮，跟rect1水平右对齐
    Button{
        id:btn1
        width: 100
        height: 50
        anchors.right: rect1.right
        anchors.top: rect1.bottom
        anchors.topMargin: 20
        Text {
            id: btn1txt
            text: qsTr("btn1")
            color: "green"
            font.pixelSize: 24
            anchors.centerIn: parent

        }
    }

    //4、显示一张图片
    Image{
        anchors.centerIn: parent
        anchors.horizontalCenterOffset: 20
        anchors.verticalCenterOffset:  20

        source: "qrc:/new/prefix1/停止闪喷.png"
        fillMode: Image.PreserveAspectFit//按比列填充，不会变形
    }
}

效果如下：
在这里插入图片描述

四、定位器（Row、Column、Grid、Flow）

1、Row

“Row”是一种将其子项放在一行上的类型。 它可以用作在不使用锚的情况下水平放置一系列项目的便捷方法。
下面是包含三个不同大小的矩形的行：

  import QtQuick 2.0

  Row {
      spacing: 2
      Rectangle { color: "red"; width: 50; height: 50 }
      Rectangle { color: "green"; width: 20; height: 50 }
      Rectangle { color: "blue"; width: 50; height: 20 }
  }

效果如下：
在这里插入图片描述
如果“行”中的某个项目不可见，或者其宽度或高度为0，则该项目将不会布局，并且在行中也不可见。 此外，由于行自动将其子项水平放置，因此，行中的子项不应设置其x位置，也不应使用left，right，anchor.horizontalCenter，fill或centerIn锚点水平锚定自身。 如果需要执行这些操作，请考虑在不使用“行”的情况下放置项目。
请注意，“行”中的项目可以使用“定位器”附加属性来访问有关其在“行”中位置的更多信息。
当然，在Row中使用锚布局也是可以的，但是只是官方文档不建议这样子，因为这样子没有太大的意义。比如：

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

Window {
    visible: true //表示部件可见
    width: 640
    height: 480
    title: qsTr("Hello World")

    Row{
        id:row1
        anchors.fill: parent

        Rectangle{
            id:rect1
            color: "yellow"
            anchors.top: parent.top
            anchors.left: parent.left
            width: 100
            height: 50

            Text {
                id: rect1txt
                text: qsTr("rect1")
                anchors.centerIn: parent
                color: "red"
                font.pixelSize: 24
            }
        }
        Rectangle{
            id:rect2
            color: "blue"
            width: 100
            height: 50
            anchors.top: parent.top
            anchors.left: rect1.right
            anchors.leftMargin: 20
            Text {
                id: rect2txt
                text: qsTr("rect2")
                anchors.centerIn: parent
                color: "red"
                 font.pixelSize: 24
            }
        }
        Rectangle{
            id:rect3
            color: "blue"
            width: 100
            height: 25
            anchors.top: parent.top
            anchors.left: rect2.right
            anchors.leftMargin: 20
            Text {
                id: rect3txt
                text: qsTr("rect3")
                anchors.centerIn: parent
                color: "red"
                 font.pixelSize: 24
            }
        }
        Rectangle{
            id:rect4
            color: "blue"
            width: 100
            height: 40
            anchors.top: parent.top
            anchors.left: rect3.right
            anchors.leftMargin: 20
            Text {
                id: rect4txt
                text: qsTr("rect4")
                anchors.centerIn: parent
                color: "red"
                 font.pixelSize: 24
            }
        }
    }
}

运行效果如下：
在这里插入图片描述
在这里如果去掉Row定位器，其实结果也是一样的。

2、Column

上面的Row其实是行布局，而Column则是 列布局，很多时候这两个可以互相嵌套，代码如下：

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

Window {
    visible: true //表示部件可见
    width: 640
    height: 480
    title: qsTr("Hello World")


    Rectangle{
        id:rect1
        width: parent.width/2
        height: parent.height/2
        anchors.horizontalCenter: parent.horizontalCenter
        color: "yellow"

        Column{
            id:columm1
            anchors.horizontalCenter: parent.horizontalCenter

            spacing: 20

            property var stuinfo: ["张三:","李四:","王五:","老王:"]
            property var val: [20,22,24,36]

            Row{
                id:row0
                Text {
                    id: row0txt1
                    text: columm1.stuinfo[0]
                    font.pixelSize: 24
                    color:"red"
                }
                Text{
                    id:row0txt2
                    text: columm1.val[0]
                    font.pixelSize: 24
                }
            }
            Row{
                id:row1
                Text {
                    id: row1txt1
                    text: columm1.stuinfo[1]
                    font.pixelSize: 24
                    color:"red"
                }
                Text{
                    id:row1txt2
                    text: columm1.val[1]
                    font.pixelSize: 24
                }

            }
            Row{
                id:row2
                Text {
                    id: row2txt1
                    text: columm1.stuinfo[2]
                    font.pixelSize: 24
                    color:"red"
                }
                Text{
                    id:row2txt2
                    text: columm1.val[2]
                    font.pixelSize: 24
                }

            }
            Row{
                id:row3
                Text {
                    id: row3txt1
                    text: columm1.stuinfo[3]
                    font.pixelSize: 24
                    color:"red"
                }
                Text{
                    id:row3txt2
                    text: columm1.val[3]
                    font.pixelSize: 24
                }

            }
        }
    }
}

效果如下：
在这里插入图片描述

3、Grid

Grid是一种将其子项放置在网格结构中的类型。
Grid会创建一个单元格网格，该单元格足够容纳其所有子项，并将这些项从左到右以及从上到下放置在单元格中。 每个项目都位于其单元格的左上角，位置为（0，0）。
Grid默认为四列，并根据其所有子项创建所需的行数。 可以通过设置行和列属性来限制行和列的数量。

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.0

Window {
    visible: true //表示部件可见
    width: 640
    height: 480
    title: qsTr("Hello World")

    Grid{
        id:grid1
        anchors.fill: parent
        anchors.topMargin: 0
        rows:2
        columns: 2
        rowSpacing: 5
        columnSpacing: 5

        Rectangle{
            id:rect1
            color: "yellow"
            width: 100
            height: 50
            Text {
                id: rect1txt
                text: "rect1"
                anchors.centerIn: parent

                font.pixelSize: 24
            }
        }
        Rectangle{
            id:rect2
            color: "blue"
            width: 100
            height: 50
            Text {
                id: rect2txt
                text: "rect2"
                anchors.centerIn: parent

                font.pixelSize: 24
            }
        }
        Rectangle{
            id:rect3
            color: "green"
            width: 100
            height: 50
            Text {
                id: rect3txt
                text: "rect3"
                anchors.centerIn: parent

                font.pixelSize: 24
            }
        }
        Rectangle{
            id:rect4
            color: "red"
            width: 100
            height: 50
            Text {
                id: rect4txt
                text: "rect4"
                anchors.centerIn: parent

                font.pixelSize: 24
            }
        }
    }
}

运行效果如下：
在这里插入图片描述

4、Flow

Flow项目将其子项目（如单词）放置在页面上，将它们包装起来以创建项目的行或列。
如果流程中的某个项目不可见，或者其宽度或高度为0，则该项目将不会布局，并且在流程中也不可见。 同样，由于Flow自动定位其子项，因此Flow中的子项不应设置其x或y位置，也不应使用任何锚点属性对其自身进行锚点。
有关使用Flow和其他相关定位器类型的更多信息，请参见项目定位器。

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.0

Window {
    visible: true //表示部件可见
    width: 640
    height: 480
    title: qsTr("Hello World")

    Flow {
        anchors.fill: parent
        anchors.margins: 4
        spacing: 10

        Text { text: "Text"; font.pixelSize: 40 }
        Text { text: "items"; font.pixelSize: 40 }
        Text { text: "flowing"; font.pixelSize: 40 }
        Text { text: "inside"; font.pixelSize: 40 }
        Text { text: "a"; font.pixelSize: 40 }
        Text { text: "Flow"; font.pixelSize: 40 }
        Text { text: "item"; font.pixelSize: 40 }
    }
}

运行效果如下：
在这里插入图片描述

五、布局管理器

布局管理器布局有GridLayout、ColumnLayout、RowLayout、Column、Row，其中ColumnLayout、RowLayout只是GridLayout的一种特例，ColumnLayout表示只有一列，RowLayout表示只有一行。

1、GridLayout

GridLayout使用columns、rows属性将空间分成若干单元格，使用columnSpacing、rowSpacing确立单元格之间的间隔。而GridLayout内部元素的大小由Layout.fillWidth、Layout.fillHeight以及Layout.preferredWidth、Layout.preferredHeight来确定，如Layout.fillWidth:true表示宽度填充整个单元格，Layout.preferredWidth则指定一个建议宽度。Layout.row、Layout.column确定内部元素处于哪个单元格。注意，不要将内部元素的宽度、高度、x、y与GridLayout进行绑定，容易导致绑定循环。

Column、Row类似于html中的float或是wpf中的StackPanel，会直接将元素一个个挨在一起，元素间的间隔使用spacing控制.
　　需要注意的是，Grid 和 GridLayout是两个不同的QML类型。Grid是作为网格定位器，没有布局功能，也就是说Grid里面的子项必须设置 宽度和高度，否则无法显示；而GridLayout是栅格布局管理器，里面的子项会按照栅格的形式进行布局。所以注意要区分两者的区别。其实对比上面Grid和下面GridLayout的例子，都可以发现其中的区别，Grid里面的子项指定了宽度和高度，而且显示出来也是没有布局的形式，而下面的GridLayout例子中，里面的子项没有指定宽度和高度，而且显示出来的效果是布局的形式。
　　
GridLayout中的项目支持以下附加属性：

Layout.row
Layout.column
Layout.rowSpan
Layout.columnSpan
Layout.minimumWidth
Layout.minimumHeight
Layout.preferredWidth
Layout.preferredHeight
Layout.maximumWidth
Layout.maximumHeight
Layout.fillWidth
Layout.fillHeight
Layout.alignment
Layout.margins
Layout.leftMargin
Layout.rightMargin
Layout.topMargin
Layout.bottomMargin

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.0

Window {
    visible: true //表示部件可见
    width: 640
    height: 480
    title: qsTr("Hello World")

    GridLayout{
        id:gridlayout1
        anchors.fill: parent
        anchors.topMargin: 0
        rows:2
        columns: 2
        rowSpacing: 5
        columnSpacing: 5

        Rectangle{
            id:rect1
            color: "yellow"
            Layout.fillWidth: true
            Layout.fillHeight: true

            Text {
                id: rect1txt
                text: "rect1"
                anchors.centerIn: parent

                font.pixelSize: 24
            }
        }
        Rectangle{
            id:rect2
            color: "blue"
            Layout.fillWidth: true
            Layout.fillHeight: true

            Text {
                id: rect2txt
                text: "rect2"
                anchors.centerIn: parent

                font.pixelSize: 24
            }
        }
        Rectangle{
            id:rect3
            color: "green"
            Layout.fillWidth: true
            Layout.fillHeight: true

            Text {
                id: rect3txt
                text: "rect3"
                anchors.centerIn: parent

                font.pixelSize: 24
            }
        }
        Rectangle{
            id:rect4
            color: "red"
            Layout.fillWidth: true
            Layout.fillHeight: true

            Text {
                id: rect4txt
                text: "rect4"
                anchors.centerIn: parent

                font.pixelSize: 24
            }
        }
    }
}

运行效果如下：
在这里插入图片描述

2、RowLayout

与GridLayout相同，但只有一行。 RowLayout 其实就是跟我们QT widget传统的水平布局是一样的。但是这里需要注意的是，RowLayout 和上面所说的Row 还是有区别的，Row只是作为一行的定位器，并不提供一行的布局功能。
它提供了更简洁的API，为开发人员提供了便利。
RowLayout中的项目支持以下附加属性：

Layout.minimumWidth
Layout.minimumHeight
Layout.preferredWidth
Layout.preferredHeight
Layout.maximumWidth
Layout.maximumHeight
Layout.fillWidth
Layout.fillHeight
Layout.alignment
Layout.margins
Layout.leftMargin
Layout.rightMargin
Layout.topMargin
Layout.bottomMargin

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.0

Window {
    visible: true //表示部件可见
    width: 640
    height: 480
    title: qsTr("Hello World")



    RowLayout {
         id: layout
         anchors.fill: parent
         spacing: 6
         Rectangle {
             color: 'teal'
             Layout.fillWidth: true //尽可能填充宽度
             Layout.minimumWidth: 50
             Layout.preferredWidth: 100
             Layout.maximumWidth: 300
             Layout.minimumHeight: 150
             Text {
                 anchors.centerIn: parent
                 text: parent.width + 'x' + parent.height
             }
         }
         Rectangle {
             color: 'plum'
             Layout.fillWidth: true
             Layout.minimumWidth: 100
             Layout.preferredWidth: 200
             Layout.preferredHeight: 100
             Text {
                 anchors.centerIn: parent
                 text: parent.width + 'x' + parent.height
             }
         }
     }

}

运行效果如下：
在这里插入图片描述

3、ColumnLayout

ColumnLayout 的用法与 RowLayout是差不多的，只不过ColumnLayout 是一列的垂直布局。

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.0

Window {
    visible: true //表示部件可见
    width: 640
    height: 480
    title: qsTr("Hello World")

    ColumnLayout {
         id: layout
         anchors.fill: parent
         spacing: 6
         Rectangle {
             color: 'teal'
             Layout.fillWidth: true
             Layout.minimumWidth: 50
             Layout.preferredWidth: 100
             Layout.maximumWidth: 300
             Layout.minimumHeight: 150
             Text {
                 anchors.centerIn: parent
                 text: parent.width + 'x' + parent.height
             }
         }
         Rectangle {
             color: 'plum'
             Layout.fillWidth: true
             Layout.minimumWidth: 100
             Layout.preferredWidth: 200
             Layout.preferredHeight: 100
             Text {
                 anchors.centerIn: parent
                 text: parent.width + 'x' + parent.height
             }
         }
     }
}

效果如下：
在这里插入图片描述

小何在线
关注
  • 14
    点赞
  • 踩
  • 48
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
QML下的布局（垂直，水平，网格）
01-17
QML 还提供了另外一种用于布局的机制。我们将这种机制成为锚点（anchor）。锚点允许我们灵活地设置两个元素的相对位置。它使两个元素之间形成一种类似于锚的关系，也就是两个元素之间形成一个固定点。锚点的行为类似于一种链接，它要比单纯地计算坐标改变更强。由于锚点描述的是相对位置，所以在使用锚点时，我们必须指定两个元素，声明其中一个元素相对于另外一个元素。锚点是Item元素的基本属性之一，因而适用于所有 QML 可视元素。
【QML】在QML中布局的四种方法
iriczhao的博客
09-08 2578
在实际QML应用开发中，我们几乎都是使用QtCreator的设计模式或者Qt Design Studio来对应用软件的组成元素进行布局。直接使用开发工具提供的图形界面接口操作qml文档即可，不用手动去编写和修改代码，这一点非常方便，效率也非常高。本文所述的四种QML应用组成元素的布局方法，在实际开发中，都会使用到，更多的时候是几种组合在一起去完成一个应用界面的布局，也有单独使用某种布局方法的情况出现。♥搜索关注『嵌入式小生』VX公众号，获取更多精彩内容♥。
QML 布局管理器之ColumnLayout
最新发布
liushiyi3083862599的博客
03-17 262
QML中的ColumnLayout是一种布局元素，用于在垂直列中排列其子元素。一.ColumnLayout讲解。
qml自编布局控件Row与Column
12-17
笔者在使用Qml语言开发产品时，使用quick1.1版本，都是一些基础的控件，比如布局类的控件（Row, Column等）这样的控件虽然通用，但在特定的场合下还是有很大的局限性。比喻Row水平布局没有自动居中布局控件的功能，不能设置控件与控件之间的指定间距（Row水平布局是等分间距），还不能指定第一控件与最后控件的间距。
QT QML的元素布局
01-08
本文介绍QT QML跨平台移动APP开发中的元素布局的相关问题，先看一张图，我们来分析一下其中的问题： 这张图片中，有如下问题： 整体的布局没有居中显示 班级名称： 没有和 请输入班级名称输入框垂直对齐 和输入框的距离太远 班主任的提示也一样 最后的Button一行，需求要求右对齐，在QML的程序中没有实现 代码修改完以后的效果： 改变宽度试一下： 原代码说明： main.qml import QtQuick 2.12 import QtQuick.Window 2.12 Window { visible: true width: 640 height: 480 title: q
QT QML的元素布局的实现
08-24
主要介绍了QT QML的元素布局的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
QML中常见布局方法
weixin_42219627的博客
12-03 1481
QML中常见布局方法，包含锚定(anchors)、定位器(Row/Column/Grid/Flow)、布局管理器(RowLayout/ColumnLayout/GridLayout/StackLayout)
QT之QML布局相关总结
hsy12342611的专栏
12-24 1248
QT之QML布局总结
QML 中的 5 大布局
青春不老，奋斗不止！
02-25 3375
在 QML 中，可以通过多种方式对元素进行布局 - 手动定位、坐标绑定定位、锚定位（anchors）、定位器和布局管理器。
《快速掌握QML》第二章 布局
热爱代码
07-07 2330
在QML中，我们可以使用四种方式进行布局。最简单的就是设置元素的x和y属性，这就相当于在PyQt中使用控件的move()方法。其他三种分别是锚布局、布局定位器以及布局管理器。在本章，我们会详细了解这三种布局的使用方法。所谓锚布局，就是设置好子元素的某个锚定线相对于其他元素某个锚定线的位置。每个元素都 有六条锚定线：top顶部线、bottom底部线、left左侧线、right右侧线、horizontalCenter水平居中线以及verticalCenter垂直居中线。如下图所示。在QML代码中，我们通过设置元
QML 布局
qthello
05-06 1595
项目原因，用了一年的QML,对QML并不看好，Qt在大力的布局移动端，但是面对强大的android生态，难免有点弱小，但是在传统的PC端领域，仍然是个不错的选错。 现在对布局相关知识做一个梳理，涉及到的类有三种： 定位器：Row，Column，Grid，Flow 布局管理器：RowLayout，GridLayout，Colu...
Qml学习——布局
weixin_45001971的博客
02-09 878
Qml学习——布局
QML之Row水平定位器
Luck-Dream的博客
06-06 5390
Row为QML中一个水平自动布局定位器，需要设置的属性不多。下面详细说明。 Rectangle{ anchors.fill: parent color: "black" Row{ //水平布局子对象 y:10 spacing: 20 //相邻项的间隔 an
QML教程（六）布局
Good Luck
01-02 695
每个项目有七条锚线：左、右、垂直中心、顶部、底部、基线和水平中心。三条垂直锚点线可以锚定到另一个项目的三个垂直锚点线中的任何一条，四个水平锚点线可以锚定到另一个项目的水平锚点线。对于想要以常规模式定位一组类型的常见情况，Qt Quick提供了一些定位器类型。例如，“行”将项目定位为水平相邻（形成一行）。通过设置项目的 x，y 属性，可以将项目放置在屏幕上的特定 x，y 坐标处。结合对这些属性使用绑定而不是常量值，还可以通过将 x 和 y 坐标设置为适当的绑定来轻松实现相对定位。
QML--元素布局
hw5230的博客
06-15 94
QML编程中可以使用x、y属性手动布局元素，但这些属性是与元素父对象左上角位置紧密相关的，不容易确定各子元素间的相对位置。为此，QML提供了定位器和锚点来简化元素的布局。
QML类型：Column（列定位器）
友善啊，朋友的博客
09-30 3253
一、描述 Column 是一种将其子项沿单个列定位的类型。它是不使用锚点的情况下垂直定位一系列项目的便捷方式。 下面是一个包含三个不同大小的矩形的列： Column { spacing: 2 Rectangle { color: "red"; width: 50; height: 50 } Rectangle { color: "green"; width: 20; height: 50 } Rectangle { color: "blue"; width: 50
QML笔记(三)之QML中的几种布局
我是黄同学博客
05-07 2139
一.前言 先前了解了QML的添加控件与绑定信号槽，那么控件的摆放就是一个问题，虽然可以手动去设置控件的位置，但是有些时候还是需要自动对齐啥的，这时候就需要用到布局，该篇文章先简单了解QML提供的布局方式，后续再做深入研究 二.QML布局方式 1.行布局（Row） import QtQuick 2.0 import QtQuick.Window 2.0 import QtQuick.Controls 2.1 Window{ visible: true width: 640 heigh
QML布局元素
世界需要程序员，而我就是其中一员！
04-25 577
QML使用anchors（锚）对元素进行布局。anchoring（锚定）是基础元素对象的基本属性，可以被所有的可视化QML元素使用。一个anchors（锚）就像一个协议，并且比几何变化更加强大。Anchors（锚）是相对关系的表达式，你通常需要与其它元素搭配使用。
QML 布局详解
希望能帮助大家，希望大家多多支持，你们的支持是我前进的动力。
03-22 1066
在QML中布局分为以下几种：绝对坐标、锚布局、定位器、布局管理器。
qml 布局左边距离
08-27
在QML中使用绝对坐标布局时，可以通过设置元素的x属性来控制其左边距离。在上面提供的代码中，Button元素的x属性被设置为100，这表示它与父元素的左边界之间的距离是100个单位。因此，Button元素与父元素的左边距离是100。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [《快速掌握QML》第二章 布局](https://blog.csdn.net/La_vie_est_belle/article/details/125617071)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [QML布局](https://blog.csdn.net/Hyc_cheng/article/details/112213792)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值