Qt Quick中控件的定位

参考文档:​​https://doc.qt.io/qt-6/qtquick-positioning-topic.html​

几种定位方式

  • 绝对定位(通过设置x,y的值)
  • 相对定位(在Qt Quick中也叫锚定位)
  • 定位器
  • 布局

绝对定位

请看代码

import QtQuickWindow {    width: 640    height: 480    visible: true    title: qsTr("Hello World")    Rectangle {       width: 200       height: 200       x: 20       y: 30       color: "green"       Rectangle {           x: 20           y: 5           width: 150           height: 100           color: "gray"       }    }}

运行效果

Qt Quick中控件的定位

使用x,y定位时,它是相对于父元素的。

还可以通过属性绑定功能实现动态布局:

[En]

You can also achieve dynamic layout through the function of attribute binding:

import QtQuickimport QtQuick.ControlsWindow {    width: 640    height: 480    visible: true    title: qsTr("Hello World")    Rectangle {        id: rect1        width: 50        height: 60        x: 20        y: 30        color: "green"    }    Rectangle {        x: rect1.x + rect1.width + 5        y: rect1.y + rect1.height + 1        width: 20        height: 20        color: "gray"    }    Flow {        anchors.horizontalCenter: parent.horizontalCenter        anchors.bottom: parent.bottom        function move(x, y){            rect1.x += x * 5            rect1.y += y * 5        }        Button{            text: "+x"            onClicked: parent.move(1, 0)        }        Button{            text: "-x"            onClicked: parent.move(-1, 0)        }        Button{            text: "+y"            onClicked: parent.move(0, 1)        }        Button{            text: "-y"            onClicked: parent.move(0, -1)        }    }}

Qt Quick中控件的定位

在按钮的点击事件中,我们只改变了​ ​rect1​​的位置,灰色小矩形的位置也会跟关变化。

相对定位(锚定位)

关于锚定位的描述:​​https://doc.qt.io/qt-6/qtquick-positioning-anchors.html​

根据文件的描述,可以获得以下信息:

[En]

The following information can be obtained according to the description of the document:

  • 每个控件都7条锚定线如下图示(还有一条叫​ ​baseline​​跟字体相关的)

Qt Quick中控件的定位

设置格式

anchors.: itemId.;# 例如:Rectangle { id: rect1; ... }Rectangle { id: rect2; anchors.left: rect1.right; ... }
  • 留白与偏移量
    horizontalCenterOff setverticalCenterOffset baselineOffset

Qt Quick中控件的定位

第一条所有锚索都有相应的偏移量

[En]

Article 1 all anchoring lines have corresponding offsets

anchors.Margin/OffsetRectangle { id: rect1; ... }Rectangle { id: rect2;           anchors.left: rect1.right;            anchors.leftMargin: 5; ... }
  • 容器只能与兄弟元素和直接父元素锚定
    [En]

    containers can only be anchored with sibling elements and direct parents*

bad codeItem {    id: group1    Rectangle { id: rect1; ... }}Item {    id: group2    Rectangle { id: rect2; anchors.left: rect1.right; ... }    // invalid anchor!}

定位器

参考文档: ​​​https://doc.qt.io/qt-6/qtquick-positioning-layouts.html​

定位器,它只定位子元素的大小,而不修改子元素的大小。

[En]

Locator, which only locates and does not modify the size of child elements.

Column

import QtQuickimport QtQuick.ControlsWindow {    width: 640    height: 480    visible: true    title: qsTr("Positioner")   Column {       Repeater {           model: 10           Rectangle{               height: txt.height               width: txt.width               color: index % 2 == 0? "skyblue":"gray"                Text {                   id: txt                   text: qsTr("text" + index)                   font.pointSize: 24                   color: index % 2 == 0? "red":"green"               }           }       }   }}

Qt Quick中控件的定位

row

import QtQuickimport QtQuick.ControlsWindow {    width: 640    height: 480    visible: true    title: qsTr("Positioner")   Row {       Repeater {           model: 10           Rectangle{               height: txt.height               width: txt.width               color: index % 2 == 0? "skyblue":"gray"                Text {                   id: txt                   text: qsTr("text" + index)                   font.pointSize: 24                   color: index % 2 == 0? "red":"green"               }           }       }   }}

Qt Quick中控件的定位

超出了范围也不会折行

Flow

import QtQuickimport QtQuick.ControlsWindow {    width: 640    height: 480    visible: true    title: qsTr("Positioner")   Flow {       width: Window.width       Repeater {           model: 10           Rectangle{               height: txt.height               width: txt.width               color: index % 2 == 0? "skyblue":"gray"                Text {                   id: txt                   text: qsTr("text" + index)                   font.pointSize: 24                   color: index % 2 == 0? "red":"green"               }           }       }   }}

必须要给Flow设置一个宽度,才有换行的功能

Grid

import QtQuickimport QtQuick.ControlsWindow {    width: 640    height: 480    visible: true    title: qsTr("Positioner")   Grid {       width: Window.width       columns: 3       Repeater {           model: 10           Rectangle{               height: txt.height               width: txt.width               color: index % 2 == 0? "skyblue":"gray"                Text {                   id: txt                   text: qsTr("text" + index)                   font.pointSize: 24                   color: index % 2 == 0? "red":"green"               }           }       }   }}

Qt Quick中控件的定位

一般来说,只要指定列,就可以指定行和列

[En]

You can specify rows and columns, generally speaking, as long as you specify columns

LayoutMirroring

import QtQuickimport QtQuick.ControlsWindow {    width: 640    height: 480    visible: true    title: qsTr("Positioner")    LayoutMirroring.enabled: true    LayoutMirroring.childrenInherit: true   Grid {       width: Window.width       columns: 3       Repeater {           model: 10           Rectangle{               height: txt.height               width: txt.width               color: index % 2 == 0? "skyblue":"gray"                Text {                   id: txt                   text: qsTr("text" + index)                   font.pointSize: 24                   color: index % 2 == 0? "red":"green"               }           }       }   }}

Qt Quick中控件的定位

Positioner

这是一个包含定位器详细信息的附加属性

[En]

This is an additional property that contains the details of the locator

Grid {    Repeater {        model: 16        Rectangle {            id: rect            width: 30; height: 30            border.width: 1            color: Positioner.isFirstItem ? "yellow" : "lightsteelblue"            Text { text: rect.Positioner.index }        }    }}

参考文档:​​https://doc.qt.io/qt-6/qml-qtquick-positioner.html​

Original: https://blog.51cto.com/u_12072082/5582381
Author: luan_225
Title: Qt Quick中控件的定位

原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/500705/

转载文章受原作者版权保护。转载请注明原作者出处!

(0)

大家都在看

  • 数百个模型放在面前,金融机构要如何高效管理

    疫情推动金融机构加速数字化转型。依托人工智能、大数据等技术,金融机构建立各类模型,特别是以机器学习为代表的数据模型,被广泛运用在风险计量、客户准入、资本计量、拨备计提、客户管理、反…

    Python 2023年9月30日
    099
  • Python的日志输出

    一、 基础使用 程序都有记录日志的需求,并且日志中包含的信息既有正常的程序访问日志,还可能有错误、警告等信息输出。python的logging模块提供了标准的日志接口,可以通过它存…

    Python 2023年6月9日
    0135
  • 大数据:豆瓣电视剧爬虫反爬代理IP、spark清洗、flask框架做可视化

    豆瓣电影大数据项目全步骤 1.豆瓣爬虫: 我开始写豆瓣电视剧爬虫时觉得很简单,但在实操时出现了封IP的情况,导致我苦恼了好久,现在终于写出来了 废&#…

    Python 2023年8月13日
    082
  • python安装教程(Windows最新)

    python学习资料下载地址:python学习资料整理 前些天买了新的笔记本电脑,于是想出一些软件的安装和环境的配置教程。本文介绍的是python的详细安装教程和环境变量的配置。(…

    Python 2023年8月1日
    098
  • Python操作Redis详解

    介绍 Redis是一个开源的基于内存也可持久化的Key-Value数据库,采用ANSI C语言编写。它拥有丰富的数据结构,拥有事务功能,保证命令的原子性。由于是内存数据库,读写非常…

    Python 2023年8月2日
    0104
  • 微信支付v3接口的 官方 Java SDK

    啰嗦几句:微信支付v3版接口麻烦吗?在对接微信支付v3接口时,本来是一件很简单的事情,其实微信支付v3接口并不是很复杂,但是微信团队的管理很混乱,给我们开发者带来了巨大的麻烦。 微…

    Python 2023年10月16日
    0111
  • Django中的关系映射

    Django中的关系映射 学习Django的ORM需要掌握三个维度 如何建表 如何建立数据 如何对数据进行查询 一个人对应一个身份证 class People(models.Mod…

    Python 2023年8月6日
    090
  • Seaborn的简述

    Seaborn(seaborn是python中的一个可视化库,是对matplotlib进行二次封装而成,既然是基于matplotlib,所以seaborn的很多图表接口和参数设置与…

    Python 2023年8月2日
    0124
  • GO语言学习——接口二、值接收者和指针接收者、接口和类型的关系、空接口

    值接收者和指针接收者 使用值接收者实现接口与使用指针接收者实现接口的区别? 使用值接收者实现接口:结构体类型和结构体指针类型的变量都能存 使用指针接收者实现接口:只能存结构体指针类…

    Python 2023年6月10日
    0125
  • 人工智能内容生成元年—AI绘画原理解析

    AIGC体验生成 一、背景 2022年AIGC(AI生成内容)焕发出了勃勃生机,大有元年之势,技术与应用迭代都扎堆呈现。在各种新闻媒体处可以看到诸多关于学术前沿研究,以及相应落地的…

    Python 2023年9月29日
    0112
  • Pytest + Selenium自用框架

    重新梳理了一下框架,顺带稍改良了一下。 本次以CSDN的登录为例,搭一个WEB自动化框架 基本框架 1、创建配置文件 配置文件必须创建在项目根目录 创建的配置文件名称,三选一: p…

    Python 2023年9月10日
    077
  • Linux 利用inotify和rsync服务实现数据实时同步

    利用rsync结合cron计划任务实现: rsync -av –delete /data/ 10.0.0.12:/back -a:保&…

    Python 2023年10月17日
    096
  • 测试平台(二)后端开发(3)实现测试用例增删改查

    前言 本章主要讲述【测试用例】增删改查的实现 环境 flask python3.6 mysql5.7 一、具体代码实现 1、controller层/testcase_control…

    Python 2023年8月12日
    0102
  • java实例–每日一练

    数组反转 给一个整型数组arr,数组元素为 10, 20, 30, 40, 50。 目标:实现数组的反转。 方法:第一种:使用自定义的 reverse 方法将数组进行反转 第二种:…

    Python 2023年6月12日
    0137
  • matplotlib入门之抛砖引玉

    1、基本概念 2、新建一个简单的demo 3、”美化” 4、如何在一个Axes同时画多个曲线 5、数据类型 6、plt在jupyter和pycharm中使用…

    Python 2023年9月4日
    098
  • aiohttp模块的引出

    先导包 import requests  import asyncio  import time 设置开始时间 start=time.time() 通过flask框架怎么搞出来的u…

    Python 2023年8月14日
    0104
亲爱的 Coder【最近整理,可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球