QML “.NET研究”UI布局管理

简介: 概述使用Qt做过UI的一定对QHBoxLayout, QVBoxLayout, 和QGridLayout这三个最重要也最常使用的layout managers非常熟悉。那么在QML中又是如何控制和管理UI布局的呢?那么我们这篇文章就为大家介绍这些基础知识。

概述

使用Qt做过UI的一定对QHBoxLayout, QVBoxLayout, 和QGridLayout这三个最重要也最常使用的layout managers非常熟悉。那么在QML中又是如何控制和管理UI布局的呢?那么我们这篇文章就为大家介绍这些基础知识。

首先,QML同样允许大家使用硬编码的方式将位置数值直接写到代码中,但是这样做首先难以适应UI的调整,其次代码维护起来也很困难。因此我们不推荐这样做。推荐大家使用的是以下三种布局管理器:Row,、Column、Grid,以及使用Anchor进行布局。

Row

QML 中的 Row 元素会将其子控件都排列在同一行,相互不重叠。我们还可以使用它的spacing属性来定义子控件之间的距离。比如下列代码就会产生如图所示的效果:

 
 
Row {
spacing:
2
Rectangle { color:
" red " ; width: 50 ; height: 50 }
Rectangle { color:
" green " ; width: 20 ; height: 50 }
Rectangle { color:
" blue 上海徐汇企业网站制作="color: #000000;">" ; width: 50 上海徐汇企业网站设计与制作"color: #000000;">; height: 20 }
}

Column

QML 中的 Column元素会将其子控件都排列在同上海闵行企业网站制作一行,相互不重叠。我们还可以使用它的spacing 属性来定义子控件之间的距离。比如下列代码就会产生如图所示的效果:

 

Column { 
        spacing: 2 
        Rectangle { color: "red"; width: 50; height: 50 } 
        Rectangle { color: "green"; width: 20; height: 50 } 
     上海企业网站设计与制作   Rectangle { color: "blue"; width: 50; height: 20 } 
}

 

Grid

QML 中的 Grid元素会将其子控件都均匀地排列在一个网格内,相互不重叠,每一个子控件都被放置在一个网格单元的(0,0)位置,也就是左上角。Grid的rows 和columns属性定义网格的行数和列数,列数默认是4。我们还可以使用Grid的spacing 属性来定义网格单元之间的距离,这里注意水平和垂直方向的spacing都是一样的。比如下列代码就会产生如图所示的效果:

 

Grid { 
        columns: 3 
        spacing: 2 
        Rectangle { color: "red"; width: 50; height: 50 } 
        Rectangle { color: "green"; width: 20; height: 50 } 
        Rectangle { color: "blue"; width: 50; height: 20 } 
        Rectangle { color: "cyan"; width: 50; height: 50 } 
        Rectangle { color: "magenta"; width: 10; height: 10 } 
}

 

混合应用

我们还可以将Grid、Row 和 Column 进行混合应用。比如下面的代码会产生如图所示的效果:

 

Column {
        spacing: 2
           Rectangle { color: "red"; width: 50; height: 50 }
           Row {
                   spacing: 2
         Rectangle { color: "yellow"; width: 50; height: 50 }
         Rectangle { color: "black"; width: 20; height: 50 }
         Rectangle { color: "blue"; width:50; height: 20 }
   }
   Rectangle { color: "green"; width: 20; height: 50 }
}

 

Anchor

每一个item 都可以被认为具有 7 条隐藏的“anchor lines":left、 horizontalCenter、 right、 top、 verticalCenter、baseline、以及bottom,如下图所示:

其中baseline是指的文本所在的线,在上图中并未标出,如果item没有文字的话baselinw就和top的位置是相同的。除此之外,Anchor系统还提供了margins 和offsets。margins 是指一个item和外界之间所留有的空间,而offsets 则可以通过使用 center anchor lines来进行布局。如下图所示:

使用 QML anchoring系统,我们可以定义不同items之间的anchor lines之间的关系。例如:

 

Rectangle { id: rect1; ... }
Rectangle { id: rect2; anchors.left: rect1.right; anchors.leftMargin: 5; ... }

 

我们还可以使用多个anchors:

 

Rectangle { id: rect1; ... }
Rectangle { id: rect2; anchors.left: rect1.right; anchors.top: rect1.bottom; ... }

 

通过定义多个水平或垂直的anchors,我们还可以控制item的大小,例如:

 

Rectangle { id: rect1; x: 0; ... }
Rectangle { id: rect2; anchors.left: rect1.right; anchors.right: rect3.left; ... }
Rectangle { id: rect3; x: 150; ... }

 

注意:出于效率方面的考虑,我们只允许对一个item的邻居和之接父亲使用anchor定义。比如下面的定义是不合法的:

 

Item {
     id: group1
     Rectangle { id: rect1; ... }
 }
 Item {
     id: group2
     Rectangle { id: rect2; anchors.left: rect1.right; ... } 
}
目录
相关文章
|
2月前
鸿蒙使用 @Builder扩展出来的布局数据更新没法更新UI
鸿蒙使用 @Builder扩展出来的布局数据更新没法更新UI
69 1
|
4月前
|
开发框架 .NET 中间件
七天.NET 8操作SQLite入门到实战 - (2)第七天Blazor班级管理页面编写和接口对接
七天.NET 8操作SQLite入门到实战 - (2)第七天Blazor班级管理页面编写和接口对接
|
2天前
|
编解码 Android开发
【Android Studio】使用UI工具绘制,ConstraintLayout 限制性布局,快速上手
本文介绍了Android Studio中使用ConstraintLayout布局的方法,通过创建布局文件、设置控件约束等步骤,快速上手UI设计,并提供了一个TV Launcher界面布局的绘制示例。
10 1
|
16天前
分享一份 .NET Core 简单的自带日志系统配置,平时做一些测试或个人代码研究,用它就可以了
分享一份 .NET Core 简单的自带日志系统配置,平时做一些测试或个人代码研究,用它就可以了
|
4月前
|
Linux C# Android开发
.NET Avalonia开源、免费的桌面UI库 - SukiUI
.NET Avalonia开源、免费的桌面UI库 - SukiUI
234 5
|
25天前
|
前端开发 Linux API
Avalonia:一个.NET跨平台UI框架
Avalonia:一个.NET跨平台UI框架
49 0
|
2月前
|
人工智能 C#
Jvedio:.NET开源功能强大的本地视频管理神器
Jvedio:.NET开源功能强大的本地视频管理神器
|
2月前
|
前端开发
ElementPlus卡片如何能够一行呈四,黑马UI前端布局视频资料,element样式具体的细节无法修改,F12找到那个位置,可能在其他组件写了错误,找到那个位置,围绕着位置解决问题最快了,卡片下边
ElementPlus卡片如何能够一行呈四,黑马UI前端布局视频资料,element样式具体的细节无法修改,F12找到那个位置,可能在其他组件写了错误,找到那个位置,围绕着位置解决问题最快了,卡片下边
|
2月前
鸿蒙使用 @Builder扩展出来的布局数据更新没法更新UI
采用的方法是在修改数据时,通过`this.dArray.splice(index, 1, this.dArray[index])`替换指定元素,强制数组更新并反映到界面上。
74 0
|
3月前
|
机器学习/深度学习 JSON 测试技术
CNN依旧能战:nnU-Net团队新研究揭示医学图像分割的验证误区,设定先进的验证标准与基线模型
在3D医学图像分割领域,尽管出现了多种新架构和方法,但大多未能超越2018年nnU-Net基准。研究发现,许多新方法的优越性未经严格验证,揭示了验证方法的不严谨性。作者通过系统基准测试评估了CNN、Transformer和Mamba等方法,强调了配置和硬件资源的重要性,并更新了nnU-Net基线以适应不同条件。论文呼吁加强科学验证,以确保真实性能提升。通过nnU-Net的变体和新方法的比较,显示经典CNN方法在某些情况下仍优于理论上的先进方法。研究提供了新的标准化基线模型,以促进更严谨的性能评估。
105 0
下一篇
云函数