QML中常见布局方法

news2025/4/3 15:42:32

目录

  • 引言
  • 常见方法
    • 锚定(anchors)
    • 定位器
      • Row、Column
      • Grid
      • Flow
    • 布局管理器
      • RowLayout、ColumnLayout
      • GridLayout
      • StackLayout
  • 总结

引言

UI界面由诸多元素构成,如Label、Button、Input等等,各种元素需要按照一定规律进行排布才能提高界面的可读性、美观度,需要调整元素的绝对坐标,也就是x、y,使得界面上的元素保持一定的间距,通过间距表达元素之间的关联性或者是区别。

排布策略多种多样,诸如行排列、列排列、栅格排列等等,将元素排布的策略抽象出来,也就是我们所说的布局。Qt Quick中提供了多种布局方法,本文旨在展示不同的布局方法以及探讨其适合的使用场景。

常见方法

锚定(anchors)

在这里插入图片描述

锚定是Qt Quick中较为特殊的布局方式,通过设置Item的anchors属性去调整元素的水平、垂直位置,如上图所示比较重要的基准线AnchorLine有left、righit、top、bottom以及horizontalCenter、verticalCenter,还有一条baseline只针对Text元素不常用,类似文字下划线的位置。示例代码如下:

Rectangle {
    anchors.centerIn: parent
    width: 300
    height: 100
    color: Qt.rgba(247 / 255, 220 / 255, 111 / 255)

    Text {
        anchors.left: parent.left
        anchors.bottom: parent.top
        text: "To Be Continue"
        font.family: "Microsoft YaHei"
    }
}

需要注意的是,fill、centerIn的锚定对象不再是AnchorLine,而是Item,与上述的属性互斥。

定位器

anchors对于单个元素的布局非常灵活、适应性很高,但是对于多个元素的成组的布局而言,代码可读性不高且可拓展性较差。下面将以4个Rectangle的水平排列为例子,对比使用anchors和定位器的实现方案。

在这里插入图片描述
anchors实现代码如下:

Rectangle {
    id: rect1
    width: 200
    height: 100
    color: "gold"
}

Rectangle {
    id: rect2
    anchors.left: rect1.right
    width: 100
    height: 50
    color: "lightseagreen"
}

Rectangle {
    id: rect3
    anchors.left: rect2.right
    width: 80
    height: 150
    color: "lightcoral"
}

Rectangle {
    anchors.left: rect3.right
    width: 100
    height: 120
    color: "lightskyblue"
}

定位器实现代码如下:

Row {
    anchors.fill: parent

    Rectangle {
        width: 200
        height: 100
        color: "gold"
    }

    Rectangle {
        width: 100
        height: 50
        color: "lightseagreen"
    }

    Rectangle {
        width: 80
        height: 150
        color: "lightcoral"
    }

    Rectangle {
        width: 100
        height: 120
        color: "lightskyblue"
    }
}

可以看到使用anchors的实现方式,元素之间需要依次锚定,若需要在水平布局后继续追加,则需要延续这个规则,若需要调换两个元素的位置,需要调整自身的锚定和与之相关的元素的锚定,如rect2需要调整只末尾,在调整自身的anchors.left之外,还需要调整rect3的anchors.left,在界面元素较多的情况下很容易出现遗漏且很难排查。

而使用Row定位器的实现方式,Row会调整自身的所有子元素,将它们按照水平布局进行排布,子元素内部只需要考虑自身的宽高,相互之间并没有直接耦合关系,插入和调整顺序只需要整个代码段进行调节,后期对于间距的调整也可以通过定位器的spacing属性去调节。

Row、Column

Row和Column为行定位器和列定位器,顾名思义就是水平排布以及垂直排布,前面比较中有展示,此处不再赘述。

Grid

Grid为栅格定位器,一般用在元素较多的表单布局中,示例代码如下:

Grid {
    anchors.fill: parent
    columns: 3
    spacing: 5

    Rectangle {
        width: 100
        height: 100
        color: "gold"
    }

    Rectangle {
        width: 100
        height: 100
        color: "lightseagreen"
    }

    Rectangle {
        width: 100
        height: 100
        color: "lightcoral"
    }

    Rectangle {
        width: 100
        height: 100
        color: "lightskyblue"
    }
}

在这里插入图片描述

Flow

Flow为流定位器,功能与Grid类似,用于元素较多的布局,但是可以动态调整列的数量。可以看到Grid示例中固定了列数为3列,而其右侧还有空间并未被填满,Flow则为解决这个问题,示例代码如下:

Flow {
    anchors.fill: parent
    spacing: 5

    Rectangle {
        width: 100
        height: 100
        color: "gold"
    }

    Rectangle {
        width: 100
        height: 100
        color: "lightseagreen"
    }

    Rectangle {
        width: 100
        height: 100
        color: "lightcoral"
    }

    Rectangle {
        width: 100
        height: 100
        color: "lightskyblue"
    }
}

在这里插入图片描述

布局管理器

上述两种布局方式锚定和定位器都只针对元素的坐标,除了anchors.fill之外,都没有对元素的宽高进行调整,实际很多情况下是希望元素能够铺满整个窗口的,也就是元素的宽高能够跟随窗口宽度的变化而变化的。而布局管理器则是为了处理这种情况而出现的,示例代码如下:

RowLayout {
    anchors.fill: parent
    spacing: 5

    Rectangle {
        Layout.preferredWidth: 100
        Layout.fillHeight: true
        color: "gold"
    }

    Rectangle {
        Layout.fillWidth: true
        Layout.fillHeight: true
        color: "lightseagreen"
    }

    Rectangle {
        Layout.preferredWidth: 100
        Layout.fillHeight: true
        color: "lightcoral"
    }
}

在这里插入图片描述

可以看到,左右两个元素设置了固定的宽度Layout.preferredWidth为100,而中间的元素设置Layout.fillWidth填充宽度,在窗口调整时改变的是中间的元素而两侧不变。

布局管理器实现方式与定位器类似,都是管理子元素的位置信息,在使用时需要注意,原本的width、height将不再生效,取而代之的是附加属性Layout.preferredWidth、Layout.preferredHeight或是隐式宽高implicitWidth、implicitHeight,推荐使用附加属性。

Layout.preferredWidth : real
This property holds the preferred width of an item in a layout. If the preferred width is -1 it will be ignored, and the layout will use implicitWidth instead. The default is -1.

在实际使用时还有一个小技巧,可以使用空的Item元素设置Layout.fillWidth: true或Layout.fillHeight: true作为水平布局和垂直布局的弹簧使用,类似QBoxLayout::addStretch()去使用。

RowLayout、ColumnLayout

RowLayout、ColumnLayout为行布局和列布局,用法与Row、Column类似,附加属性Layout有很多参数可以调节,如fillWidth、maximumWidth、minimumWidth、margins等等。

GridLayout

GridLayout为栅格布局,用法与Grid类似,主要是通过附加属性Layout.row、Layout.column调整行号、列号,以此完成特殊的表单布局。

StackLayout

StackLayout为栈布局,主要用于多页签切换使用,示例代码如下:

StackLayout {
    id: stackLayout
    anchors.fill: parent

    Rectangle {
        color: "gold"
    }

    Rectangle {
        color: "lightseagreen"
    }

    Rectangle {
        color: "lightcoral"
    }

    Rectangle {
        color: "lightskyblue"
    }
}

Button {
    text: "Swich"
    font.family: "Microsoft YaHei"

    onClicked: {
        stackLayout.currentIndex = (stackLayout.currentIndex + 1) % stackLayout.count
    }
}

在这里插入图片描述

总结

对于单个相对独立的元素而言,推荐使用anchors。对于多个元素而言,布局定位器的功能更为强大,考虑到后续的可拓展性,多数情况下布局管理器比定位器更好,推荐使用布局管理器,根据开发需要可以酌情使用定位器。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1280808.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Java数据结构之《构造哈夫曼树》题目

一、前言: 这是怀化学院的:Java数据结构中的一道难度中等(偏难理解)的一道编程题(此方法为博主自己研究,问题基本解决,若有bug欢迎下方评论提出意见,我会第一时间改进代码,谢谢!) 后面其他编程题…

kgma转换flac格式、酷狗下载转换车载模式能听。

帮朋友下载几首歌到U盘里、发现kgma格式不能识别出来,这是酷狗加密过的格式,汽车不识别,需要转换成mp3或者flac格式,网上的一些辣鸡软件各种收费、限制、广告,后来发现一个宝藏网站,可以在线免费转换成flac…

长度最小的子数组(Java详解)

目录 题目描述 题解 思路分析 暴力枚举代码 滑动窗口代码 题目描述 给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其和 ≥ target 的长度最小的 连续子数组 [numsl, numsl1, ..., numsr-1, numsr] ,并返回其长度。如果不存在符合条…

MyBatis自动生成代码(扩展)

可以利用Mybatis-Generator来帮我们自动生成文件 1、自动生成实体类 可以帮助我们针对数据库中的每张表自动生成实体类 2、自动生成SQL映射文件 可以帮助我们针对每张表自动生成SQL配置文件,配置文件里已经定义好对于该表的增删改查的SQL以及映射 3、自动生成接…

数据层融合、特征层融合和决策层融合是三种常见的数据融合方式!!

文章目录 一、数据融合的方式有什么二、数据层融合三、特征层融合:四、决策层融合: 一、数据融合的方式有什么 数据层融合、特征层融合和决策层融合是三种常见的数据融合方式。 二、数据层融合 定义:数据层融合也称像素级融合,…

Chat-GPT原理

GPT原理 核心是基于Transformer 架构 英文原文: ​ Transformers are based on the “attention mechanism,” which allows the model to pay more attention to some inputs than others, regardless of where they show up in the input sequence. For exampl…

10 分钟解释 StyleGAN

一、说明 G在过去的几年里,生成对抗网络一直是生成内容的首选机器学习技术。看似神奇地将随机输入转换为高度详细的输出,它们已在生成图像、生成音乐甚至生成药物方面找到了应用。 StyleGAN是一种真正推动 GAN 最先进技术向前发展的 GAN 类型。当Karras …

6-13连接两个字符串

#include<stdio.h> int main(){int i0,j0;char s1[222],s2[333];printf("请输入第一个字符串&#xff1a;\n");gets(s1);//scanf("%s",s1);printf("请输入第二个字符串&#xff1a;\n");gets(s2);while(s1[i]!\0)i;while(s2[j]!\0)s1[i]s2…

python--自动化办公(Word)

python自动化办公之—Word python-docx库 1、安装python-docx库 pip install python-docx2、基本语法 1、打开文档 document Document() 2、加入标题 document.add_heading(总标题,0) document.add_heading(⼀级标题,1) document.add_heading(⼆级标题,2) 3、添加文本 para…

IdleStateHandler 心跳机制源码详解

优质博文&#xff1a;IT-BLOG-CN 一、心跳机制 Netty支持心跳机制&#xff0c;可以检测远程服务端是否存活或者活跃。心跳是在TCP长连接中&#xff0c;客户端和服务端定时向对方发送数据包通知对方自己还在线&#xff0c;保证连接的有效性的一种机制。在服务器和客户端之间一…

深度学习记录--梯度下降法

什么是梯度下降法&#xff1f; 梯度下降法是用来求解成本函数cost函数中使得J(w,b)函数值最小的参数(w,b) 梯度下降法的实现 通过对参数w,b的不断更新迭代&#xff0c;使J(w,b)的值趋于局部最小值或者全局最小值 如何进行更新&#xff1f; 以w为例&#xff1a;迭代公式 ww-…

Go连接mysql数据库

package main import ("database/sql""fmt"_ "github.com/go-sql-driver/mysql" ) //go连接数据库示例 func main() {// 数据库信息dsn : "root:roottcp(192.168.169.11:3306)/sql_test"//连接数据库 数据库类型mysql,以及数据库信息d…

【数据库】基于封锁的数据库调度器,以及等待锁处理的优先级策略

封锁调度器的体系结构 ​专栏内容&#xff1a; 手写数据库toadb 本专栏主要介绍如何从零开发&#xff0c;开发的步骤&#xff0c;以及开发过程中的涉及的原理&#xff0c;遇到的问题等&#xff0c;让大家能跟上并且可以一起开发&#xff0c;让每个需要的人成为参与者。 本专栏会…

LeedCode刷题---子数组问题

顾得泉&#xff1a;个人主页 个人专栏&#xff1a;《Linux操作系统》 《C/C》 《LeedCode刷题》 键盘敲烂&#xff0c;年薪百万&#xff01; 一、最大子数组和 题目链接&#xff1a;最大子数组和 题目描述 给你一个整数数组 nums &#xff0c;请你找出一个具有最大和的连…

开发猿的平平淡淡周末---2023/12/3

2023/12/3 天气晴 温度适宜 AM 早安八点多的世界&#xff0c;起来舒展了下腰&#xff0c;阳光依旧明媚&#xff0c;给平淡的生活带来了一丝暖意 日常操作&#xff0c;喂鸡&#xff0c;时政&#xff0c;洗漱&#xff0c;恰饭&#xff0c;肝会儿游戏 看会儿手机 ___看累…

“此应用专为旧版android打造,因此可能无法运行”,问题解决方案

当用户在Android P系统上打开某些应用程序时&#xff0c;可能会弹出一个对话框&#xff0c;提示内容为&#xff1a;“此应用专为旧版Android打造&#xff0c;可能无法正常运行。请尝试检查更新或与开发者联系”。 随着Android平台的发展&#xff0c;每个新版本通常都会引入新的…

[英语学习][6][Word Power Made Easy]的精读与翻译优化

[序言] 针对第18页的阅读, 进行第二次翻译优化以及纠错, 这次译者的翻译出现的严重问题: 没有考虑时态的变化导致整个翻译跟上下文脱节, 然后又有偷懒的嫌疑, 翻译得很随意. [英文学习的目标] 提升自身的英语水平, 对日后编程技能的提升有很大帮助. 希望大家这次能学到东西,…

基于SSM的职业高中智慧作业试题系统设计

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;JSP 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 一、…

基于Java SSM框架实现师生交流答疑作业系统项目【项目源码+论文说明】计算机毕业设计

基于java的SSM框架实现师生交流答疑作业系统演示 摘要 在新发展的时代&#xff0c;众多的软件被开发出来&#xff0c;给用户带来了很大的选择余地&#xff0c;而且人们越来越追求更个性的需求。在这种时代背景下&#xff0c;人们对师生交流平台越来越重视&#xff0c;更好的实…

【5G PHY】5G NR 如何计算资源块的数量?

博主未授权任何人或组织机构转载博主任何原创文章&#xff0c;感谢各位对原创的支持&#xff01; 博主链接 本人就职于国际知名终端厂商&#xff0c;负责modem芯片研发。 在5G早期负责终端数据业务层、核心网相关的开发工作&#xff0c;目前牵头6G算力网络技术标准研究。 博客…