当前位置: 首页 > news >正文

qml之Control类型布局讲解,padding属性和Inset属性细讲

1、Control布局图

在这里插入图片描述

2、如何理解?

*padding*Inset参数如何理解呢?

//main.qml
import QtQuick 2.0
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 1.4
import QtQml 2.12ApplicationWindow {id: windowvisible: truewidth: 500height: 320Frame {id: frameanchors.fill: parentanchors.margins: 40background: Rectangle {color: "green"border {color: "blue"width: 2}}contentItem: Rectangle {id: rectanglecolor: "red"Text {text: "ContentItem"anchors.verticalCenter: parent.verticalCenteranchors.horizontalCenter: parent.horizontalCenterfont {pointSize: 25bold: true}}}Component.onCompleted: {console.log(frame.leftPadding, frame.rightPadding,frame.topPadding, frame.bottomPadding)console.log(frame.leftInset, frame.rightInset, frame.topInset,frame.bottomInset)}}
}

我们以Frame来讲解,因为它也是属于Control类型的。
上述画了一个带有蓝色边框的Frame,如下图所示:
在这里插入图片描述

并且打印了*padding*Inset系列的初始值,,打印结果如下:

在这里插入图片描述

也就是,*padding系列的默认值是12,*Inset系列的默认值是0。

3、padding理解

请添加图片描述

上述中,我对padding进行了动态改变,,padding实际上就是控件ContentItem内容到控件Frame边框的距离。

在这里插入图片描述

4、Inset理解

//main.qml
import QtQuick 2.0
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 1.4
import QtQml 2.12ApplicationWindow {id: windowvisible: truewidth: 500height: 320Frame {id: frameanchors.fill: parentanchors.margins: 40background: Rectangle {color: "green"border {color: "blue"width: 2}}padding: 40contentItem: Rectangle {id: rectanglecolor: "red"Text {text: "ContentItem"anchors.verticalCenter: parent.verticalCenteranchors.horizontalCenter: parent.horizontalCenterfont {pointSize: 25bold: true}}}Component.onCompleted: {console.log(frame.leftPadding, frame.rightPadding,frame.topPadding, frame.bottomPadding)console.log(frame.leftInset, frame.rightInset, frame.topInset,frame.bottomInset)}}
}

在这里插入图片描述

接着添加

 leftInset: 40
{// ...padding: 40leftInset: 40		// 新添加的// ...
}

此时运行如下图所示:
在这里插入图片描述

也即是说 *Inset裁剪的对象是Frame

继续加大leftInset的值,假如设置为60,运行如下图所示:
在这里插入图片描述
可以看出,其只是针对Frame(Control)整个背景来说的,,
并不会裁剪ContentItem内容

假如需要值剩下ContentItem,只需将所有的Inset值设置为与padding值想通过即可。
在这里插入图片描述
在这里插入图片描述

5、利用Inset解决一个Page头部的问题

qml中解决Page控件头部元素Margin不生效的问题

http://www.lryc.cn/news/301795.html

相关文章:

  • 【Jvm】性能调优(拓展)Jprofiler如何监控和解决死锁、内存泄露问题
  • 运行错误(竞赛遇到的问题)
  • nodename nor servname provided, or not known
  • 前端vue金额用逗号分隔
  • vulvhub-----Hacker-KID靶机
  • 遨博I20协作臂关节逆解组Matlab可视化
  • 力扣题目训练(15)
  • PCB差模辐射是如何产生的
  • 车载诊断协议DoIP系列 —— 协议中术语解释和定义
  • 【退役之重学前端】关于在控制台得到undefined的事
  • 指数和估计六大问题
  • 【软件相关】基于Alist挂载云盘到本地文件资源管理器
  • Java多线程系列——锁
  • 蓝牙BLE学习-GAP
  • 算法训练营day28(补), 贪心算法2
  • Vue核心基础4:绑定样式、条件渲染、列表渲染
  • go-zero读取mysql部分字段
  • 反转一个单链表
  • 拿捏c语言指针(中)
  • 鸿蒙语言ArkTS(更好的生产力与性能)
  • VBA技术资料MF120:打印固定标题行列
  • MongoDB聚合运算符:$add
  • 《剑指Offer》笔记题解思路技巧优化 Java版本——新版leetcode_Part_4
  • 数据库第四次实验
  • 基于PPNSA+扰动算子的车间调度最优化matlab仿真,可以任意调整工件数和机器数,输出甘特图
  • UnityShader——06UnityShader介绍
  • 人工智能学习与实训笔记(一):零基础理解神经网络
  • LeetCode刷题小记 一、【数组】
  • iOS总体框架介绍和详尽说明
  • 【C++】const与constexpr详解