【QML】锚布局

news2024/11/15 2:11:55

文章目录

      • 1、锚(Anchors)
      • 2、一些示例

Qt Quick中有两套与布局管理相关的类库,一种是Item Positioner(定位器),一种是Item Layout(布局)

  • 定位器:Row(行定位器)、Column(列定位器)、Grid(网格定位器)、Flow(流式定位器)
  • 布局:RowLayout(行布局)、ColumnLayout(列布局)、GridLayout(网格布局),还有一种就是这篇文章的主角Anchors(锚布局)。

今天只讨论Anchors布局,了解锚点布局之前,先看一下他由哪些部分组成。

1、锚(Anchors)

anchors 提供了一种方式,让你可以通过指定一个元素与其他元素的关系来确定元素在界面中的位置,即锚布局。

你可以想象一下,每个 Item 都有 7 条不可见的辅线:左(left)、水平中心(horizontalCenter)、 上(top)、下(bottom)、右(right)、垂直中心(verticalCenter)、基线(baseline)。如下图所示:
锚结构

基线非上图对应于文本所坐的虚线,对于没有文本的项目而言,它于top相同。

使用 anchors 布局时,除了对齐锚线,还可以指定上(topMargin)、下(bottomMargin)、 左(leftMargin)、右(rightMargin)四个边的留白。如下图所示:

内边距
下面的示例指定leftMargin:

Rectangle {
	id: rect1
	color: "blue"
	//TODO...
}

Rectangle {
	id: rect2
	color: "red"
	//指定左边距
	anchors.left: rect1.rigth
	anchors.leftMargin: 5
	//TODO...
}

在这种情况下,rect2左边保留了5个像素点,如图所示:
在这里插入图片描述

而如果你想懒省事儿,也可以使用 margins 属性将四个边的留白设置成一样。

锚布局是最灵活的一种 Qt Quick 布局方式,使用它你可以随意摆布界面上那些可见元素,不过,如果你的界面元素很多,它也将是代码量最大的一种布局方式。

2、一些示例

  1. 两个矩形在窗口左侧,无间距:
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.4

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

    Rectangle {
        id: rect1
        width: 100
        height: 100
        color: "blue"
        anchors.left: parent.left
    }

    Rectangle {
        id: rect2
        width: 100
        height: 100
        color: "red"
        anchors.left: rect1.right
    }
}
  1. 上面的两个矩形挨得太紧了,要留点间距,可以通过指定 anchors.leftMargin 的留白来实现:
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.4

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

    Rectangle {
        id: rect1
        width: 100
        height: 100
        color: "blue"
        anchors.left: parent.left
        anchors.leftMargin: 20
    }

    Rectangle {
        id: rect2
        width: 100
        height: 100
        color: "red"
        anchors.left: rect1.right
        anchors.leftMargin: 60
    }
}
  1. 一个矩形水平居中,另一个矩形垂直居中:
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.4

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

    Rectangle {
        id: rect1
        width: 100
        height: 100
        color: "blue"
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        anchors.topMargin: 40
    }

    Rectangle {
        id: rect2
        width: 100
        height: 100
        color: "red"
        anchors.verticalCenter: parent.verticalCenter
        anchors.right: parent.right
        anchors.rightMargin: 40
    }
}
  1. centerln 表示将一个 Item 居中放置到一个 Item 内;fill 表示充满某个 Item:
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.4

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

    Rectangle {
        id: rect1
        color: "blue"
        anchors.fill: parent
    }

    Rectangle {
        id: rect2
        width: 100
        height: 100
        color: "red"
        anchors.centerIn: parent
    }
}

锚布局,在特定的一些情况下很好用,但是也有其不好的地方,就是代码的体系比较复杂,特别是在一个控件铺满的情景中,代码量相当冗余。
先说这么多吧,有说得不全的地方欢迎补充…

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

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

相关文章

【NLP经典论文阅读】Efficient Estimation of Word Representations in Vector Space(附代码)

❤️觉得内容不错的话,欢迎点赞收藏加关注😊😊😊,后续会继续输入更多优质内容❤️👉有问题欢迎大家加关注私戳或者评论(包括但不限于NLP算法相关,linux学习相关,读研读博…

UE4 c++ Mediaplayer取消自动播放,运行时首帧为黑屏的问题

0,前言 工作需要使用C制作一个ue4的视频插件,其中一个功能是能够选择 运行时是否自动播放 视频的功能。 在实现时遇见了一个问题,取消自动播放之后,运行时首帧是没有取到的,在场景里面看是黑色的。就这个问题我想到了使…

Kubernetes k8s 笔记

核心功能 容器编排和管理:Kubernetes可以自动化容器的部署、管理和扩展,使得应用程序可以在多个容器之间进行平滑的切换。自动化负载均衡:Kubernetes可以通过将请求分配到不同的容器来平衡负载,以确保应用程序的高可用性和性能。…

【大数据离线开发】8.4 Hive的查询、操作以及自定义函数

8.5 Hive的查询 执行SQL(HQL)。HQL是SQL的一个子集 案例:创建部门表,对数据进行查询 创建部门表 create table deptno(deptno int,dname string,loc string ) row format delimited fileds terminated by ,;导入数据 load data…

函数式编程:Lambda 表达式

函数式编程:Lambda 表达式 每博一文案 曾经读过的依然令我感动的句子,生活总是不如意,但往往是在无数痛苦中,但往往是在无数痛苦中,在重重矛盾 和艰难中才能成熟起来,坚强起来,爱情啊&#xf…

JMeter 控制并发数

文章目录一、误区二、正确设置 JMeter 的并发数总结没用过 JMeter 的同学,可以先过一遍他的简单使用例子 https://blog.csdn.net/weixin_42132143/article/details/118875293?spm1001.2014.3001.5501 一、误区 在使用 JMeter 做压测时,大家都知道要这么…

又拍云邵海杨 - 25年Linux老兵,聊聊运维的“术”与“道”

您好邵总,请您先做个自我介绍吧,聊聊您的履历和现状,让大家更好的认识您,了解您的背景也有助于读者理解后面的采访内容 我是来自又拍云的邵海杨,从1998年开始使用Linux至今快25年了,资深(老鸟)Linux系统运维…

Log Structure Merge Tree

LSM是一种基于日志追加写的数据结构,非常适合为具有高写入数据提供索引访问 LSM基于以下前提 内存读写速度远高于磁盘,但内存有限磁盘顺序读写速度远高于随机读写 结构 WAL WAL(write-ahead log)是用于在系统错误时提供持久化,在写入数据…

SpringBoot自动装配原理、条件注解及封装Starter

1.什么是 SpringBoot 自动装配? 我们现在提到自动装配的时候,一般会和Spring Boot联系在一起。但是实际上SpringFramework 早就实现了这个功能。Spring Boot 只是在其基础上,通过 SPI 的方式,做了进一步优化。 SpringBoot 定义了…

C++之string字符串不同类型间转换

📣📣📣📣📣📣📣📣 ✏️作者主页:枫霜剑客 📋 系列专栏:C实战宝典 🌲上一篇: VS2019加载解决方案时不能自动打开之前的文档&#xff08…

pytorch 笔记:torch.fft

1 FFT 进行一个维度的快速傅里叶变换 torch.fft.fft(input, nNone, dim- 1, normNone, *, outNone) 1.1 主要参数 input输入,需要傅里叶变换的tensorn 需要变换的tensor的长度,默认是input的长度 如果比input长度大,那么补0如果比input长度…

乐山持点科技:抖音极速版电商入驻指南

“抖音极速版电商”拥有海量活跃用户,着眼下沉市场,为消费者带来高性价比产业带源头好货。针对中小商家设立更宽松的经营要求、提供简单易上手的经营工具,助力商家轻松经营!来看入驻指南:一、抖音与抖音极速版电商入驻…

JavaScript基础五、语句

零、文章目录 文章地址 个人博客-CSDN地址:https://blog.csdn.net/liyou123456789个人博客-GiteePages:https://bluecusliyou.gitee.io/techlearn 代码仓库地址 Gitee:https://gitee.com/bluecusliyou/TechLearnGithub:https:…

float的表示范围为什么比long大

●很多人会有一个疑问, 一个用来表示小数的 float 为什么表示的范围会比 long 还要大呢 ? ●这次, 咱们就来详细说一说这个事情 从长计议 ●聊到这个话题, 我们就要从计算机存储数字这个位置说起了 ●计算机存储数字的方式其实就是 : 二进制 二进制是计算机中最基本的数字存储…

Java学习笔记 --- jQuery

一、jQuery介绍 jQuery,顾名思义,也就是JavaScript和查询(Query),它就是辅助JavaScript开发的js类库。它的核心思想是write less,do more(写得更少,做得更多)&#xff0c…

2023王道考研数据结构笔记第五章——树

第五章 树 5.1 树的基本概念 树是n(n≥0)个结点的有限集合,n 0时,称为空树。 空树——结点数为0的树 非空树——①有且仅有一个根节点 ​ ②没有后继的结点称为“叶子结点”(或终端结点) ​ ③有后继的结…

webStorm svn不显示的问题

看图就行了,怎么下载安装我就不说了,网上一搜全是

<JVM上篇:内存与垃圾回收篇>13 - 垃圾回收器

笔记来源:尚硅谷 JVM 全套教程,百万播放,全网巅峰(宋红康详解 java 虚拟机) 文章目录13.1. GC 分类与性能指标13.1.1. 垃圾回收器概述13.1.2. 垃圾收集器分类13.1.3. 评估 GC 的性能指标13.2. 不同的垃圾回收器概述13.…

JavaScript基础一、简介

零、文章目录 文章地址 个人博客-CSDN地址:https://blog.csdn.net/liyou123456789个人博客-GiteePages:https://bluecusliyou.gitee.io/techlearn 代码仓库地址 Gitee:https://gitee.com/bluecusliyou/TechLearnGithub:https:…

1.认识网络爬虫

1.认识网络爬虫网络爬虫爬虫的合法性HTTP协议请求与响应(重点)网络爬虫 爬虫的全名叫网络爬虫,简称爬虫。他还有其他的名字,比如网络机器人,网络蜘蛛等等。爬虫就好像一个探测机器,它的基本操作就是模拟人的行为去各个网站溜达&am…