qml保姆级教程一:布局组件

已于 2023-10-04 19:33:53 修改
阅读量938 收藏 15
点赞数
分类专栏： QML 文章标签： c++ qt
于 2023-09-29 13:32:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_73548574/article/details/133390174
版权

💂 个人主页:pp不会算法v
🤟 版权: 本文由【pp不会算法v】原创、在CSDN首发、需要转载请联系博主
💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦

QML系列教程

QML教程一：布局组件

文章目录

锚布局anchors

属性介绍

anchors.top : AnchorLine

设置锚布局的顶部的位置
在这里插入图片描述

anchors.bottom :AnchorLine

设置锚布局的底部的位置
在这里插入图片描述

anchors.left : AnchorLine

设置锚布局的左边框的位置
在这里插入图片描述

anchors.right : AnchorLine

设置锚布局的右边框的位置
在这里插入图片描述

anchors.horizontalCenter : AnchorLine

设置锚布局的水平中心线
在这里插入图片描述

anchors.verticalCenter : AnchorLine

设置锚布局的竖直中心线
在这里插入图片描述

anchors.baseline : AnchorLine

baseline就是控件或者窗口的最上方的基准线也就是上边框

在这里插入图片描述

anchors.fill : Item

将这个控件的大小和位置设置为和指定控件的大小和位置完全相等
在这里插入图片描述

anchors.centerIn : Item

将要锚布局设置为item的中央
在这里插入图片描述

anchors.margins : real

锚布局的边距

anchors.topMargin : real

锚布局的上边距
在这里插入图片描述

anchors.bottomMargin : real

锚布局的下边距

anchors.leftMargin : real

锚布局的左边距

anchors.rightMargin : real

锚布局的右边距

anchors.horizontalCenterOffset : real

锚布局水平方向中心线的偏移量，正数表示向右偏移，负数表示向左偏移在这里插入图片描述

anchors.verticalCenterOffset : real

锚布局竖直方向中心线的偏移量，正数表示向下偏移，负数表示向上偏移

anchors.baselineOffset : real

在这里插入图片描述

anchors.alignWhenCentered : bool

在对齐的时候其他锚点位置是否不变，默认值为false,，alignWhenCentered属性仅在使用anchors.centerIn或anchors.fill: parent进行居中对齐时才起作用。如果没有应用这些属性，alignWhenCentered将不会生效。

垂直布局Column

在这里插入图片描述

属性

padding : real

垂直布局和锚布局的间距 值为实数 默认为0
在这里插入图片描述

spacing : real

垂直布局中项与项之间的距离 值为实数 默认为0
在这里插入图片描述

topPadding : real

垂直布局中第一项顶部和所在锚布局的上边框的距离 值为实数 默认为0
在这里插入图片描述

bottomPadding : real

垂直布局中最后一项底部和所在锚布局的上边框的距离 值为实数 默认为0

leftPadding : real

垂直布局中所有项顶部和所在锚布局的左边框的距离 值为实数 默认为0

rightPadding : real

垂直布局中所有项顶部和所在锚布局的左右边框的距离 值为实数 默认为0

populate : Transition

Column布局首次生成的时候其中的项的动画效果
例如下面这个就是生成的时候项的透明度从0变为1，时长为1000毫秒
在这里插入图片描述

add : Transition

添加项的时候的动画效果
例如下面我为添加项时添加了一个从右滑到左的效果

在这里插入图片描述

move : Transition

移动项的时候的动画效果
例如下面我为移动项的时候添加了一个弹动的效果
在这里插入图片描述

水平布局

属性

add : Transition
bottomPadding : real
leftPadding : real
move : Transition
padding : real
populate : Transition
rightPadding : real
spacing : real
topPadding : real

上面这几个属性和垂直布局一样就不再赘述了

layoutDirection : enumeration

布局的排列方向 ，有两个取值从左到右
Qt.LeftToRight，从右到左Qt.RightToLeft，默认值是从左到右
默认效果:
在这里插入图片描述
设置为从右到左的效果:
在这里插入图片描述

effectiveLayoutDirection : enumeration

这是一个只读属性，表示实际的布局方向，收到layoutDirection属性的影响，是由 QML 引擎根据子项和布局的方向等因素计算出来的

信号和槽

positioningComplete()&onPositioningComplete()

该信号在布局完成时发出。
相应的处理程序是onPositioningComplete。
该信号在Qt 5.9中引入。
在这里插入图片描述
从上图发现布局初始化的时候会发出positionComplete这个信号
而且当改动布局完成的时候也会触发该信号

函数

forceLayout()

Row通常每帧定位其子对象一次。这意味着在脚本块内部，底层子级可能已经更改，但Row尚未相应更新。
此方法强制Row立即对其子级中任何未完成的更改作出响应。

简而言之就是强制刷新

网格布局GridLayout

属性

columns : int

列数

rows : int

行数

rowSpacing : real

行与行之间的间隔

columnSpacing : real

列与列之间的间隔

flow : enumeration

此属性保存未设置显式单元格位置的项的流向。它与columns或rows属性一起使用，它们分别指定何时将流重置为下一行或下一列；
可能取值右两个: GridLayout.LeftToRight ,GridLayout.TopToBottom

layoutDirection : enumeration

布局的方向这个和水平布局Row的layoutDirection一样

属性综合演示

在这里插入图片描述

在这里插入图片描述

流式布局Flow

属性

add : Transition
bottomPadding : real
effectiveLayoutDirection : enumeration
flow : enumeration
layoutDirection : enumeration
leftPadding : real
move : Transition
padding : real
populate : Transition
rightPadding : real
spacing : real
topPadding : real
这些属性上面都讲了的

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

在这里插入图片描述

信号和槽

positioningComplete()&onPositioningComplete()

同上

函数

forceLayout

同上

布局管理器

属性

alignment : Qt.Alignment
可能取值如下:
Qt::AlignLeft
Qt::AlignHCenter
Qt::AlignRight
Qt::AlignTop
Qt::AlignVCenter
Qt::AlignBottom
Qt::AlignBaseline

不冲突的取值可以用 '|'分割一起作为属性值

默认值:Qt.AlignVCenter | Qt.AlignLeft

bottomMargin : real 下边距

column : int 列
columnSpan : int 列宽
row : int 行
rowSpan : int 行框
fillHeight : bool 填充高度
fillWidth : bool 填充宽度
leftMargin : real 左边距
rightMargin : real 右边距
topMargin : real 上边距
margins : real 边距
maximumHeight : real 最大高度
maximumWidth : real 最大宽度
minimumHeight : real 最小高度
minimumWidth : real 最小狂赌
preferredHeight : real 首选高度
preferredWidth : real 首选宽度

pp不会算法^v^
关注
  • 0
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
QML：第一个QML项目分析
02-24
QML是一种声明式语言，它提供了一组接口用来描述可视化组件以及他们之间的互动。它是一个高度可读的语言，并且被设计成使组件以一个动态的方式相互连接。同时它使组件很容易被复用以及创建定制的用户界面。使用Qt...
QMLSharedComponents:QtQML 的共享组件
06-02
QML 面板 概述 面板以简单快捷的方式为 Qt/QML 应用程序创建可调整大小/可移动的面板，就像 QML 一样。... { id: "panel1", container: mainContainer, qml: "qrc:/MyPanel1.qml", name: "Panel 1", percentW
QML学习及实战
qq_44891434的博客
06-14 863
QML学习笔记，及其日常用的一些ui实战，以及QML和C++之间的相互通信；
QML小程序：布局元素的展示
03-18
在QML（Qt Meta Language）...总之，QML的anchors系统是构建用户界面的关键工具之一，通过它，我们可以轻松地实现组件的动态布局，适应不同屏幕尺寸和设备。熟练掌握anchors的使用，能让你在QML小程序开发中游刃有余。
QT QML的元素布局的实现
08-24
QT QML的元素布局实现 在 Qt QML 中，元素布局是指在用户界面中排列元素的方式，以便在不同的设备上正确地显示应用程序。Qt QML 提供了多种方式来实现元素布局，本文将详细介绍 QT QML 的元素布局实现。 一、 ...
C语言 之 理解指针（1）
fallzzzzz的博客
07-20 1268
就是先获取该数组的首元素的地址，从前面我们知道，指针的类型的作用是指针+1 所跳过的字节数，int为整形，大小为4个字节，所以p+1就跳过4个字节，p+2就跳过8个字节，计算机的CPU（中央处理器）在处理数据的时候，需要的数据是在内存中读取的，处理后数据也会放回内存中，如果想对这些空间进行高效的管理，就可以。并且我们知道，数组的元素存放是随着下标增长，内存地址变大的。上面的代码创建了一个整型变量n，因为一个整形的大小是4个字节，所以内存中申请了4个字节，⽤于存放整数10，其中每个字节都有地址。
C++ | Leetcode C++题解之第283题移动零
Ddddddd_158的博客
07-25 467
C++ | Leetcode C++题解之第283题移动零
【C++】C++中的find方法介绍
qq_35902025的博客
07-25 316
find 函数是 std::string 类中非常有用的成员函数之一，它提供了灵活的方式来查找子字符串或字符。使用 npos 可以检查查找操作是否成功。
《Cross-Modal Dynamic Transfer Learning for Multimodal Emotion Recognition》
buyaotutou的博客
07-25 1105
例如：第一章 Python 机器学习入门之pandas的使用文章链接Multimodal Emotion Recognition is an important research area for developing human-centric applications, especially in the context of video platforms. Most existing models have attempted to develop sophisticated fusion tech
C++ primer plus 第16章string 类和标准模板库, 关联容器
zhyjhacker的博客
07-25 727
C++ primer plus 第16章string 类和标准模板库, 关联容器。
【C++】选择结构-多条件if语句
weixin_58995084的博客
07-24 232
else if{若第一个条件未满足，执行此条件} {第二个条件满足执行此操作}else if{若第二个条件未满足，执行此条件} {第三个条件满足执行此操作}else{若所有条件都不满足执行此操作}多条件if语句格式为。
Windows图形界面(GUI)-MFC-C/C++ - Dialog
最新发布
0xCC说逆向
07-25 1088
流程打开资源视图：在Visual Studio中，右键点击资源文件夹（通常是），选择“添加” -> “资源”。添加对话框资源：在弹出的对话框中选择“Dialog”，然后点击“新建”。设计对话框：在资源编辑器中，你可以拖放控件到对话框上，如按钮、文本框、列表框等。拓展资源ID：每个对话框都有一个唯一的资源ID，用于在代码中引用。对话框编辑器：用于可视化地设计和布局对话框。
C：图案打印
2401_85010100的博客
07-23 910
空心正方形，空心三角形，X形，沙漏图案打印
每日OJ_牛客_字符串转整数
参考书籍：《C语言程序设计》《数据结构》《C++ Primer》《Effective C++》《STL源码剖析》《现代操作系统》《UNIX环境高级编程》《图解TCP/IP》《图解HTTP》《Linux高性能服务器编程》《剑指Offer》《算法导论》
07-24 208
每日OJ_牛客_字符串转整数（本题本质是模拟实现实现C库函数atoi，不过参数给的string对象。关键是要处理几个关键边界条件：）
C++ //练习 15.28 定义一个存放Quote对象的vector，将Bulk_quote对象传入其中。计算vector中所有元素总的net_price。
Made in Code
07-25 582
C++ Primer（第5版） 练习 15.28
c语言第四天笔记
m0_74916669的博客
07-25 2126
比如：我们从磁盘里读取信息，先把读出的数据放在缓冲区，计算机再直接从缓冲区中取数据，等缓 冲区的数据取完后再去磁盘中读取，这样就减少磁盘的读写次数，再加上计算机对缓冲区的操作大大 快于磁盘的操作，故应用缓冲区可大大提高计算机的运行速度。缓冲区又称为缓存，它是内存空间的一部分。也就是说，在内存空间中预留了一定的存储空间， 这些存储空间用来缓冲输入 或者输出的数据，这部分预留的空间叫做缓冲区。2. 如果非要进行有符号的移位运算，那么左移的时候，空出来的补0，右移的时候，空出来的补符号 位（原码阶段）
C语言100基础拔高题（3）
2303_78660417的博客
07-23 895
解题思路：通过switch语句来判断第一个字母，如果遇到字母相同的，在case语句中继续使用if语句来进行第二个字母的判断。解题思路：首先通过判断得出它是几位数，接着有几位数就输出几次，每次都输出最右边的数字。解题思路：我们这里假设它是按照从小到大的顺序进行排序，首先判断它是否大于最右边的数，如果小于，则考虑插入到中间的情况。解题思路：质数又称素数，有无限个。解题思路：通过设置一个新数组，来接收除了要删除字母以外的其他字母。解题思路：得到输入的5位数的个位，十位，千位，万位上的数字，再对其进行比较。
＜＜C++ Primer Plus（第6版）＞＞12.1 动态内存和类：知识记录
gsp1004的博客
07-25 877
虽然原书中提到用等号来初始化值可能会导致调用赋值运算符(多执行赋值的步骤，效率低)，但是我实测并没有此问题。当然，这个结果是符合预期的，毕竟明明是没必要去多执行一次赋值运算符来赋值的。但是不排除别的环境，别的VS版本，甚至在别的优化等级下表现不同。所以建议自行测试。即便如此，还是建议初始化一个对象使用变量后面用括号赋值初始化的值的方式: StringBad ditto(motto);来规避可能的歧义和不确定的执行流程。默认的复制构造函数和默认的赋值运算符都是浅拷贝/浅复制。
【C++初阶】string类
2301_78022459的博客
07-24 906
【C++初阶】string类
qml listview 窗口跳转
07-20
### 回答1： 在QML中，我们可以使用ListView实现窗口跳转功能。下面是一种常见的实现方式： 首先，我们需要一个存储窗口信息的模型。可以使用一个自定义的数据模型来实现，也可以使用Qt提供的ListModel。 接下来，我们在QML中创建一个ListView，并将该模型设置为其model属性。ListView会根据模型的内容自动生成相应的窗口。 在ListView的delegate属性中，我们可以定义窗口的外观和交互方式。可以使用Rectangle或Item作为窗口的外观，根据需要进行定制。 在窗口外观的交互部分，我们可以添加一个MouseArea来接收鼠标点击事件。在该事件的处理函数中，我们可以获取点击的索引值，并根据需求执行相应的窗口跳转操作。 对于窗口跳转操作，有多种方式可供选择。例如，我们可以使用StackView或StackWindow来进行窗口切换。也可以直接更改显示内容的属性值，实现窗口内容的动态刷新。 在实际开发中，还可以根据具体需求进行更多的定制。例如，可以添加动画效果、设置窗口间的传参、处理窗口关闭等。 总之，使用ListView实现窗口跳转功能的基本步骤包括：创建一个存储窗口信息的模型、将其设置为ListView的model属性、在delegate中定义窗口的外观和交互方式、处理窗口的跳转操作。通过这种方式，我们可以方便地实现在QML中的窗口跳转。 ### 回答2： 在QML中，要实现ListView的窗口跳转，可以通过以下步骤来实现： 1. 创建至少两个QML文件，分别表示不同的窗口。例如，我们可以创建一个名为"MainPage.qml"的主页面和一个名为"DetailPage.qml"的详细页面。 2. 在"MainPage.qml"中创建一个ListView，并设置model为一个代表数据源的ListModel，例如： ListView { model: myModel delegate: Item { // 设置列表项的外观 } } 3. 在"MainPage.qml"中，为ListView的每个列表项添加一个点击事件处理函数，当点击某个列表项时，触发该事件。在该事件处理函数中，可以执行窗口跳转的逻辑，例如： ListView { //... delegate: Item { //... MouseArea { //... onClicked: { // 执行窗口跳转逻辑，例如： var component = Qt.createComponent("DetailPage.qml"); if (component.status === Component.Ready) { var detailPage = component.createObject(parent); // parent为当前页面的父项 // 可以传递数据给DetailPage.qml，例如： detailPage.itemData = model.get(index); } } } } } 4. 在"DetailPage.qml"中，根据需求设计详细页面的布局和内容。 通过以上步骤，当在"MainPage.qml"的ListView中点击某个列表项时，会触发相应的事件处理函数，在该函数中创建并显示"DetailPage.qml"的实例，并根据需要进行数据传递。这样就实现了QML中ListView的窗口跳转。 ### 回答3： QML 中的 ListView 是一个用于显示一个可滚动的列表的控件，它可以用于在窗口中展示一组数据。要实现窗口跳转，可以通过以下步骤： 1. 首先，确保在 QML 中引入 QtQuick 模块，以便使用 ListView 组件： ```qml import QtQuick 2.0 ``` 2. 创建一个 ListView 组件并指定其属性，比如宽度、高度、布局方向等等。 ```qml ListView { width: 200 height: 300 orientation: ListView.Vertical // 设置布局方向为垂直 model: ListModel { ... } // 设置列表的数据 } ``` 3. 在 ListView 的 model 属性中，通过 ListModel 创建一个数据模型，定义列表的内容。可以使用自定义的对象或者简单的字符串等。 ```qml model: ListModel { ListElement { text: "Item 1" } // 第一个列表项 ListElement { text: "Item 2" } // 第二个列表项 // ... } ``` 4. 在 ListView 的 delegate 属性中，定义每个列表项的外观。可以使用自定义的组件或者内置的 Item 组件。 ```qml delegate: Item { width: parent.width height: 50 Rectangle { width: parent.width height: parent.height color: index % 2 === 0 ? "lightgray" : "white" // 每隔一个变换背景色 Text { anchors.centerIn: parent text: model.text // 显示列表项的文本 } MouseArea { anchors.fill: parent onClicked: { // 在此处进行窗口跳转操作，比如使用 StackView 或改变当前窗口的 visible 属性等 } } } } ``` 5. 在 MouseArea 的 onClicked 信号中编写窗口跳转的代码。具体的实现方式取决于你使用的窗口管理器或导航机制。 以上就是利用 QML 中的 ListView 组件实现窗口跳转的基本步骤。根据具体的需求，你可能需要进一步扩展和优化代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

pp不会算法^v^

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值