【Qt之Quick模块】8. Quick基础、布局管理、布局管理器

这篇具有很好参考价值的文章主要介绍了【Qt之Quick模块】8. Quick基础、布局管理、布局管理器。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. 前言

Qt Quick编程,提供了多种布局方式。
如,静态布局,可以使用组件的x、y属性进行设置,或者进行绑定。
还可以使用锚anchors进行布局。
此外,还可以使用定位器以及定位管理器为多组件进行布局。
但使用布局管理器和锚会占用内存和实例化时间,若使用x、y、width、height等属性能完成需求,两者相较取其轻,则尽量就不要用布局管理器和锚进行布局了。

2. 定位器

定位器(Positioner)是管理声明式用户界面中项目位置的容器项目。位置定位器的行为方式类似于用于标准Qt小部件的布局管理器,但它们本身也是容器。
当需要按照规律的布局安排许多项目时,位置定位器使得工作更加简单。
Qt Quick布局也可以用于在用户界面中布置Qt Quick项目。它们管理声明式用户界面上项目的位置和大小,非常适合可调整大小的用户界面。
包含一些布局:

布局 描述
Column 将其子项在垂直方向上进行排列。
Flow 将其子项并排放置,必要时进行换行。
Grid 以网格形式排列其子项。
LayoutMirroring 用于反转布局行为的属性。
Positioner 提供附加属性,包含有关项在位置定位器中所在位置的详细信息。
Row 将其子项在水平方向上进行排列。

2.1. Column布局

Column布局用于垂直排列项。以下示例使用列项在外部项定义的区域中排列三个矩形项。spacing属性设置各矩形间的间隔。

import QtQuick

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

    Item {
        width: 310; height: 170

        Column {
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter

            spacing: 5

            Rectangle { color: "lightblue"; radius: 10.0
                        width: 300; height: 50
                        Text { anchors.centerIn: parent
                               font.pointSize: 24; text: "Hello" } }
            Rectangle { color: "gold"; radius: 10.0
                        width: 300; height: 50
                        Text { anchors.centerIn: parent
                               font.pointSize: 24; text: "World" } }
            Rectangle { color: "lightgreen"; radius: 10.0
                        width: 300; height: 50
                        Text { anchors.centerIn: parent
                               font.pointSize: 24; text: "China" } }
        }
    }
}

【Qt之Quick模块】8. Quick基础、布局管理、布局管理器,Qt之QML编程,qt,数据库,开发语言

2.2. Row布局

Row布局用于水平排列项。以下示例使用行项在由外部彩色矩形定义的区域中排列三个带有圆角的矩形项。spacing属性设置为在矩形项之间包含一小段空间。
要确保父矩形足够大,以便在水平居中的行项周围留有一些空间。

import QtQuick

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


    Rectangle {
        width: 320; height: 110
        color: "#c0c0c0"

        Row {
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter

            spacing: 5

            Rectangle { width: 100; height: 100; radius: 20.0
                        color: "#024c1c" }
            Rectangle { width: 100; height: 100; radius: 20.0
                        color: "#42a51c" }
            Rectangle { width: 100; height: 100; radius: 20.0
                        color: "white" }
        }
    }

【Qt之Quick模块】8. Quick基础、布局管理、布局管理器,Qt之QML编程,qt,数据库,开发语言

2.3. Grid布局

Grid布局用于将项以网格或表格形式放置。以下示例使用网格项将四个矩形项放置在一个2x2的网格中。与其他位置管理器一样,可以使用spacing属性指定项之间的间距。

 import QtQuick 2.0

 Rectangle {
     width: 112; height: 112
     color: "#303030"

     Grid {
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.verticalCenter: parent.verticalCenter
         columns: 2
         spacing: 6

         Rectangle { color: "#aa6666"; width: 50; height: 50 }
         Rectangle { color: "#aaaa66"; width: 50; height: 50 }
         Rectangle { color: "#9999aa"; width: 50; height: 50 }
         Rectangle { color: "#6666aa"; width: 50; height: 50 }
     }
 }

【Qt之Quick模块】8. Quick基础、布局管理、布局管理器,Qt之QML编程,qt,数据库,开发语言

水平和垂直间距之间没有任何区别,因此任何额外的空间都必须在项本身内添加。
网格中的任何空单元格都必须通过在网格定义的适当位置定义占位符项来创建。

2.4. Flow布局

Flow布局用于在页面上放置像单词一样的项,其中行或列中的项不重叠。
Flow布局以类似于网格项的方式排列项,项沿一个轴(次要轴)排列在一行中,并且以另一个轴(主要轴)沿着彼此放置的项的线排列。流动的方向以及项之间的间距由流和间距属性控制。
以下示例显示包含多个文本子项的Flow布局。这些项以类似于屏幕截图中显示的方式排列。

    Rectangle {
        color: "lightblue"
        width: 300; height: 200

        x : parent.x + 350
        y : 200

        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 }
        }
    }

【Qt之Quick模块】8. Quick基础、布局管理、布局管理器,Qt之QML编程,qt,数据库,开发语言

2.5. Transition使用过渡

以上四个定位器添加或删除一个子项目时,可以使用过渡(Transition),使操作具有动画效果。
四个定位都有add、move、populate属性,在给属性分配一个Transition对象。
add过渡:在定位器创建完毕后,向定位器添加一个子项,或是将子项通过更换父对象的方式变为定位器的子孩子时;
move过渡:在删除定位器中的子项时,或将子项更换父对象从定位器移除时;
populate过渡:定位器第一次创建时,只会运行一次。
此外,将项目的透明度设置为0时,会使用move过渡隐藏项目;当项目的透明度设为非0时,使用add过渡显示项目,定位器过渡只会影响项目的位置(x,y)。

import QtQuick

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

    Rectangle {
        width: 112; height: 112
        anchors.centerIn: parent
        color: "#303030"

        Grid {
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            columns: 2
            spacing: 6

            Rectangle { id:aa6666; color: "#aa6666"; width: 50; height: 50 }
            Rectangle { color: "#aaaa66"; width: 50; height: 50 }
            Rectangle { color: "#9999aa"; width: 50; height: 50 }
            Rectangle { color: "#6666aa"; width: 50; height: 50 }


            move: Transition {
                NumberAnimation{
                    properties: "x,y"
                    duration: 2000
                }

            }
            focus:true
            Keys.onSpacePressed: aa6666.visible = ! aa6666.visible
        }
    }
}

当按下空格键时,矩形的visible值会改变,矩形会使用move过渡进行移动
初始化:
【Qt之Quick模块】8. Quick基础、布局管理、布局管理器,Qt之QML编程,qt,数据库,开发语言
按下:
【Qt之Quick模块】8. Quick基础、布局管理、布局管理器,Qt之QML编程,qt,数据库,开发语言
结果:
【Qt之Quick模块】8. Quick基础、布局管理、布局管理器,Qt之QML编程,qt,数据库,开发语言

2.6. Repeater

Repeater类型用来创建大量重复或相似的项目。Repeater包含一个model和一个delegate属性。
delegate属性用来将model中的每个项进行可视化显示,Repeater通常会用于定位器中进行布局。

import QtQuick

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

    Grid{
        columns: 4
        spacing: 20
        Repeater{
            model: 12
            Rectangle {
                width: 50; height: 50
                color: "#aaaa66"
            }
        }
    }
}

设置model为12,列是4列,会自动计算为3行,可以用count属性获取项目数量,该属性为只读。
【Qt之Quick模块】8. Quick基础、布局管理、布局管理器,Qt之QML编程,qt,数据库,开发语言

2.7. Positioner

Column、Row、Grid、Flow这四个定位器都会附加一个Positioner类型的对象作为顶层子项,Positioner可以提供子项的索引等信息。
如下代码所示:

import QtQuick

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

    Grid{
        columns: 4
        spacing: 20
        Repeater{
            model: 12
            Rectangle {
                width: 50; height: 50
                color: Positioner.isLastItem ?"red" : "#aaaa66"
            }
        }
    }
}

创建12个子项,当是最后一个子项时,设置为red,其他为aaaa66
【Qt之Quick模块】8. Quick基础、布局管理、布局管理器,Qt之QML编程,qt,数据库,开发语言
#3. 锚anchors布局
除了更传统的Grid、Row和Column之外,Qt Quick还提供了一种使用锚的概念来布局项目的方法。每个项目都有7条不可见的“锚线”:左、水平中心、右、顶、垂直中心、基线和底。
【Qt之Quick模块】8. Quick基础、布局管理、布局管理器,Qt之QML编程,qt,数据库,开发语言
基线对应于文本所在的想象线。对于没有文本的项目,它与top相同。
Qt快速锚定系统允许定义不同项目的锚线之间的关系。例如,可以这样写:

 Rectangle { id: rect1; ... }
 Rectangle { id: rect2; anchors.left: rect1.right; ... }

rect2的左边缘绑定到rect1的右边缘,如下:
【Qt之Quick模块】8. Quick基础、布局管理、布局管理器,Qt之QML编程,qt,数据库,开发语言
或者

 Rectangle { id: rect1; ... }
 Rectangle { id: rect2; anchors.left: rect1.right; anchors.top: rect1.bottom; ... }

【Qt之Quick模块】8. Quick基础、布局管理、布局管理器,Qt之QML编程,qt,数据库,开发语言
通过指定多个水平或垂直锚点,可以控制项的大小。下面,rect2锚定在rect1的右侧和rect3的左侧。如果其中一个蓝色矩形被移动,rect2将根据需要拉伸和收缩:

 Rectangle { id: rect1; x: 0; ... }
 Rectangle { id: rect2; anchors.left: rect1.right; anchors.right: rect3.left; ... }
 Rectangle { id: rect3; x: 150; ... }

【Qt之Quick模块】8. Quick基础、布局管理、布局管理器,Qt之QML编程,qt,数据库,开发语言
锚定系统还允许为一个项目的锚指定边距和偏移量。边距指定要留给项目锚点外部的空白量,而偏移量允许使用中心锚线来操纵定位。一个项目可以通过leftMargin、rightMargin、topMargin和bottomMargin分别指定锚边距,或者使用锚。为所有四条边指定相同的边距值。锚点偏移量由horizontalCenterOffset, verticalCenterOffset和baselineOffset指定。
【Qt之Quick模块】8. Quick基础、布局管理、布局管理器,Qt之QML编程,qt,数据库,开发语言
如:

 Rectangle { id: rect1; ... }
 Rectangle { id: rect2; anchors.left: rect1.right; anchors.leftMargin: 5; ... }

【Qt之Quick模块】8. Quick基础、布局管理、布局管理器,Qt之QML编程,qt,数据库,开发语言

4. 布局管理器

Qt Quick布局管理器与定位器不同,布局管理器继承于Item,因此可以嵌套。Qt Quick 布局管理器与传统Qt Widgets 应用中的布局管理器很相似。
使用:

 import QtQuick.Layouts

4.1 特性

布局管理器有一些关键特性。这些特性使得开发者可以更灵活地控制组件(例如按钮、标签等UI元素)在界面上的排列和尺寸。

  1. 对齐方式:通过Layout.alignment属性,开发者可以指定组件的对齐方式。这决定了组件在网格中的位置。
  2. 可调整大小Layout.fillWidthLayout.fillHeight属性允许开发者设置组件的尺寸可以随着容器尺寸的变化而变化,以填充整个行或列。
  3. 尺寸约束Layout.minimumWidthLayout.preferredWidthLayout.maximumWidth属性允许开发者设置组件的最小、首选和最大宽度。这些属性可以用于确保组件不会太小或太大。同样,对于高度,可以将“Width”替换为“Height”。
  4. 间距spacingrowSpacingcolumnSpacing属性允许开发者设置组件之间的间距,行与行之间的间距,以及列与列之间的间距。
  5. 网格坐标:通过Layout.rowLayout.column属性,开发者可以指定组件所在的网格行和列。
  6. 自动网格坐标:结合使用flow, rows, 和 columns属性,GridLayout可以自动确定组件的行和列位置。
  7. 跨行或跨列:通过Layout.rowSpanLayout.columnSpan属性,开发者可以指定组件跨越的行数或列数。这使得组件可以在网格中跨越多个行或列。

4.2 大小

通过布局管理器调整大小,需要指定最小宽高,最佳宽高,最大宽高,如下:

import QtQuick
import QtQuick.Layouts

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


        RowLayout {
            anchors.fill: parent
            spacing: 6
            Rectangle {
                color: 'blue'
                Layout.preferredWidth: 100
                Layout.preferredHeight: 150
            }
            Rectangle {
                color: "plum"
                Layout.fillWidth: true
                Layout.fillHeight: true
            }
        }
}

【Qt之Quick模块】8. Quick基础、布局管理、布局管理器,Qt之QML编程,qt,数据库,开发语言

4.3 stackLayout

StackLayout栈控件可以管理多个项目,但只能显示一个,如下:

import QtQuick
import QtQuick.Layouts

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


    StackLayout {
        id: layout
        anchors.fill: parent
        currentIndex: 1
        Rectangle {
            color: 'teal'
            implicitWidth: 200
            implicitHeight: 200
        }
        Rectangle {
            color: 'plum'
            implicitWidth: 300
            implicitHeight: 200
        }
    }
    MouseArea{
        anchors.fill: parent
        onClicked: {
            if(layout.currentIndex === 1){
                layout.currentIndex = 0;
            }else{
                layout.currentIndex = 1;
            }
        }
    }
}

当点击屏幕时,来回切换视图
【Qt之Quick模块】8. Quick基础、布局管理、布局管理器,Qt之QML编程,qt,数据库,开发语言

5. 布局镜像

布局镜像属性用来在水平方向上镜像项目的锚布局、定位器和视图等。
LayoutMirroring.enabled: true:默认镜像只影响项目本身;
LayoutMirroring.childrenInherit: true:该项目下的所有子项目都会启用镜像
如下:将Rectangle从右往左显示

import QtQuick

Rectangle {
    width: 640
    height: 480
    visible: true

    LayoutMirroring.enabled: true
    LayoutMirroring.childrenInherit: true


    Row{
        anchors{
            left:parent.left;margins: 5
        }
        y:5; spacing: 5; padding: 5

        Repeater{
            model: 5
            Rectangle{
                color:"red"
                opacity: (5-index)/5
                width: 50;height: 50

                Text {
                    text: index +1
                    anchors.centerIn: parent
                    font{
                        bold: true
                    }
                }
            }
        }
    }
}

【Qt之Quick模块】8. Quick基础、布局管理、布局管理器,Qt之QML编程,qt,数据库,开发语言文章来源地址https://www.toymoban.com/news/detail-822604.html

到了这里,关于【Qt之Quick模块】8. Quick基础、布局管理、布局管理器的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Qt6 Qt Quick UI原型学习QML第六篇

    import QtQuick 2.12 :导入QtQuick模块的版本2.12,用于创建Qt快速应用程序的用户界面。 import QtQuick.Window 2.12 :导入QtQuick.Window模块的版本2.12,用于创建窗口对象。 import QtQuick.Controls 2.12 :导入QtQuick.Controls模块的版本2.12,用于创建用户界面控件。 Window {} :定义了一个窗口对象,

    2024年02月16日
    浏览(47)
  • Qt6 Qt Quick UI原型学习QML第七篇

    导入 QtQuick 2.12 导入 QtQuick.Window 2.12 导入 QtQuick.Controls 2.12 导入 QtQuick.Layouts 1.3 导入 Qt.labs.calendar 1.0 矩形 { id: root 属性 int duration: 3000 } 这段代码使用了QtQuick库来创建一个用户界面。其中的Rectangle是界面的根元素。 id: root : 为Rectangle元素指定唯一的标识符root。 property int durat

    2024年02月16日
    浏览(39)
  • Qt6 Qt Quick UI原型学习QML第三篇

    图像 Image(图片)元素 解释 这段代码是使用QtQuick 2.0库来创建一个Image(图片)元素的定义。以下是代码的解释: Image 元素是一个用于显示图像的控件。 id: root 是为Image元素指定了一个标识符,以便在代码中引用它。 signal clicked 定义了一个名为 clicked 的信号。信号用于在特

    2024年02月16日
    浏览(49)
  • Qt6 Qt Quick UI Prototype学习QML第一篇

    创建一个具有QML入口点的Qt Quick 2 UI项目。要使用它,您需要设置一个QML运行时环境,例如gmlscene。 仅当您正在进行原型设计时才使用此功能。您无法使用此创建完整的应用程序。请考虑使用Qt Quick application项目 Qt Quick UI原型主要用于快速创建交互式的用户界面(UI)原型。它

    2024年02月16日
    浏览(48)
  • QT Quick之quick与C++混合编程

            Qt quick能够生成非常绚丽界面,但有其局限性的,对于一些业务逻辑和复杂算法,比如低阶的网络编程如 QTcpSocket ,多线程,又如 XML 文档处理类库 QXmlStreamReader / QXmlStreamWriter 等等,在 QML 中要么不可用,要么用起来不方便,所以就有了quick和C++混合编程的需求。

    2024年02月12日
    浏览(38)
  • QT quick基础:组件gridview

    组件gridview与android中gridview布局效果相同。 一、下面记录qt quick该组件的使用方法。 方法一: 运行效果 方法二: 列表和代理分开。 效果图如上。 我自己的需求,点击gridview的item,修改对应item的图片,并且改变该item的字体颜色。上述代码中,Image没有点击信号,gridview也没

    2024年01月19日
    浏览(40)
  • Qt Quick基础用法+基本知识

    Qt 是一个跨平台的, 基于C++ 和 QML进行GUI开发的工具。 Qt 4.7 发布时,引入了 QML,用于移动开发,其全面支持触摸操作、流畅的动画效果等。但在 Qt 5 中,QML 已经不再局限于移动开发,也可用于开发传统的桌面程序。 相比之下,Qt Widgets 更“老”、更成熟,而 QML/Qt Quick 则更“

    2024年02月15日
    浏览(41)
  • Qt/QML编程之路:OpenGL的示例(39)

    Qt编程之后,会发现有版本问题,有时候一个示例不同的版本下可能会跑不同,有些Qt5跑不同Qt6已经完善,可以跑通。 我就看到有个关于OpenGL的示例: 这个示例是演示怎么基于OpenGL编程的,但是调试时却发现glViewXXX等gl打头的函数说找不到reference,或者什么link不上之类的错误

    2024年01月19日
    浏览(43)
  • Qt之qml和widget混合编程调用

    首先是创建一个widget项目 然后需要添加qml和quick的插件使用 QT += quickwidgets qml 接着要在界面上创建一个quickwidget和按钮 创建一个c++对象类 QObjectQml cpp实现文件 注册c++对象到系统中 接着c++的界面对象中调用即可 qml文件的实现如下: 运行结果如下:

    2024年02月14日
    浏览(35)
  • Qt/QML编程之路:QtMultimedia/Radio(41)

    Qt有一个神奇的组件,那就是Qtmultimedia,它有强大的功能: 看看很多多媒体功能,都能在这里找到,不仅audio、video,还有camera、sound和radio。 比如:

    2024年01月25日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包