HarmonyOS应用开发学习笔记 ArkTS 布局概述

一、布局概述

布局指用特定的组件或者属性来管理用户页面所放置UI组件的大小和位置。在实际的开发过程中,需要遵守以下流程保证整体的布局效果

  • 确定页面的布局结构。
  • 分析页面中的元素构成。
  • 选用适合的布局容器组件或属性控制页面中各个元素的位置和大小约束。

二、布局结构

在这里插入图片描述
布局元素的组成

在这里插入图片描述

  • 组件区域(蓝区方块):组件区域表明组件的大小,width、height属性设置该区域的大小。
  • 组件内容区(黄色方块):组件区域大小减去组件的padding值,组件内容区大小会作为组件内容(或者子组件)进行大小测算时的布局测算限制。
  • 组件内容(绿色方块):组件内容本身占用的大小,比如文本内容占用的大小。组件内容和组件内容区不一定匹配,比如设置了固定的width和height,此时组件内容区大小就是设置的width和height减去padding值,但文本内容则是通过文本布局引擎测算后得到的大小,可能出现文本真实大小小于设置的组件内容区大小。当组件内容和组件内容区大小不一致时,align属性生效,定义组件内容在组件内容区的对齐方式,如居中对齐。
  • 组件布局边界(虚线部分):组件通过margin属性设置外边距时,组件布局边界就是组件区域加上margin的大小。

三、声明式UI提供了以下8种常见布局

关键字描述
Row、Column线性布局
Stack层叠布局
Flex弹性布局
RelativeContainer相对布局
GridRow、GridCol栅格布局
List列表
Grid网格
Swiper轮播
布局应用场景
线性布局(Row、Column)如果布局内子元素超过1个,且能够以某种方式线性排列时优先考虑此布局。
层叠布局(Stack)组件需要有堆叠效果时优先考虑此布局,层叠布局的堆叠效果不会占用或影响其他同容器内子组件的布局空间。例如Panel作为子组件弹出时将其他组件覆盖更为合理,则优先考虑在外层使用堆叠布局。
弹性布局(Flex)弹性布局是与线性布局类似的布局方式。区别在于弹性布局默认能够使子组件压缩或拉伸。在子组件需要计算拉伸或压缩比例时优先使用此布局,可使得多个容器内子组件能有更好的视觉上的填充容器效果。
相对布局(RelativeContainer)相对布局是在二维空间中的布局方式,不需要遵循线性布局的规则,布局方式更为自由。通过在子组件上设置锚点规则(AlignRules)使子组件能够将自己在横轴、纵轴中的位置与容器或容器内其他子组件的位置对齐。设置的锚点规则可以天然支持子元素压缩、拉伸,堆叠或形成多行效果。在页面元素分布复杂或通过线性布局会使容器嵌套层数过深时推荐使用。
栅格布局(GridRow、GridCol)栅格是多设备场景下通用的辅助定位工具,通过将空间分割为有规律的栅格。栅格不同于网格布局固定的空间划分,它可以实现不同设备下不同的布局,空间划分更随心所欲,从而显著降低适配不同屏幕尺寸的设计及开发成本,使得整体设计和开发流程更有秩序和节奏感,同时也保证多设备上应用显示的协调性和一致性,提升用户体验。推荐手机、大屏、平板等不同设备,内容相同但布局不同时使用。
媒体查询(@ohos.mediaquery)媒体查询可根据不同设备类型或同设备不同状态修改应用的样式。例如根据设备和应用的不同属性信息设计不同的布局,以及屏幕发生动态改变时更新应用的页面布局。
列表(List)使用列表可以轻松高效地显示结构化、可滚动的信息。在ArkUI中,列表具有垂直和水平布局能力和自适应交叉轴方向上排列个数的布局能力,超出屏幕时可以滚动。列表适合用于呈现同类数据类型或数据类型集,例如图片和文本。
网格(Grid)网格布局具有较强的页面均分能力,子组件占比控制能力,是一种重要自适应布局。网格布局可以控制元素所占的网格数量、设置子组件横跨几行或者几列,当网格容器尺寸发生变化时,所有子组件以及间距等比例调整。推荐在需要按照固定比例或者均匀分配空间的布局场景下使用,例如计算器、相册、日历等。
轮播(Swiper)轮播组件通常用于实现广告轮播、图片预览、可滚动应用等。

1、布局位置

方式关键代码描述
绝对定位position使用position实现绝对定位,设置元素左上角相对于父容器左上角偏移位置。在布局容器中,设置该属性不影响父容器布局,仅在绘制时进行位置调整。
相对定位offset使用offset可以实现相对定位,设置元素相对于自身的偏移量。设置该属性,不影响父容器布局,仅在绘制时进行位置调整。

2、对子元素的约束

方式关键代码描述
拉伸flexGrow和flexShrink属性1、flexGrow基于父容器的剩余空间分配来控制组件拉伸。2、flexShrink设置父容器的压缩尺寸来控制组件拉伸。
缩放aspectRatioaspectRatio属性指定当前组件的宽高比来控制缩放,公式为:aspectRatio=width/height。
占比layoutWeight1. 将子组件的宽高设置为父组件宽高的百分比。2. layoutWeight属性,使得子元素自适应占满剩余空间。
隐藏displayPriority通过displayPriority属性来控制页面的显示和隐藏。

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

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

相关文章

【JUC】进程和线程

目录 📢什么是进程?🎡什么是线程?🚀进程和线程的区别?🎢Java 线程和操作系统的线程有啥区别?🎖️JDK21的虚拟线程🎯虚拟线程和平台线程的对比 📢什么是进程? 进程是程序的一次执…

Zabbix“专家坐诊”第223期问答汇总

来源:乐维社区 问题一 Q:Zabbix 5.0安装完mysql之后怎么备份?忘记mysql当时创建的密码了,怎么样能查看设置的密码? A:mysql初始化密码在 /var/log/mysqld.log中可以看到,搜关键字temporary pas…

Android studio TabHost应用设计

一、xml布局文件: 添加TabHost控件 <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.…

【算法分析与设计】移动零

题目 给定一个数组 nums&#xff0c;编写一个函数将所有 0 移动到数组的末尾&#xff0c;同时保持非零元素的相对顺序。 请注意 &#xff0c;必须在不复制数组的情况下原地对数组进行操作。 示例 1: 输入: nums [0,1,0,3,12] 输出: [1,3,12,0,0] 示例 2: 输入: nums [0…

电能计量芯片RN8209

电能计量芯片RN8209 简介2、操作2.1、复位2.2 模数转换2.3 有功功率2.4 无功功率2.5 有效值2.4 能量计算 RN8209中文手册 点击下载 简介 2、操作 2.1、复位 2.2 模数转换 2.3 有功功率 RN8209 提供两路有功功率的计算和校正&#xff0c;分别为电流 A 和电压有功功率计算和校正…

【笔记------freemodbus】一、stm32的裸机modbus-RTU从机移植(HAL库)

freemodbus的官方介绍和下载入口&#xff0c;官方仓库链接&#xff1a;https://github.com/cwalter-at/freemodbus modbus自己实现的话往往是有选择的支持几条指令&#xff0c;像断帧和异常处理可能是完全不处理的&#xff0c;用freemodbus实现的话要简单很多&#xff0c;可移植…

Linux Lha命令教程:学习如何管理.lzh文件(附案例详解和注意事项)

Linux lha命令介绍 lha&#xff08;LHarc&#xff09; 是一种用于文件压缩和解压缩的工具&#xff0c;广泛应用在多个系统中&#xff0c;包括 Windows 和 Linux。利用此命令&#xff0c;用户可以方便地管理 .lzh 或 .lha 文件。它支持多种压缩算法&#xff0c;包括LZH、LZ5、L…

【leetcode100-033】【链表】排序链表

【题干】 给你链表的头结点 head &#xff0c;请将其按 升序 排列并返回 排序后的链表 。 【思路】 递归版归并法链表版&#xff5e;没什么特别好说的&#xff08;非递归版归并也是可以哒&#xff0c;但是马上要考试了今天懒得写了&#xff01;打个flag在这里也许哪天想起来…

linux线程重启

以下是获取线程id和重启指定线程的示例代码&#xff1a; #include <stdio.h> #include <pthread.h>// 线程函数&#xff0c;用来打印线程ID void *print_thread_id(void *arg) {printf("Thread ID: %lu\n", pthread_self());return NULL; }int main() {…

PR如何在一个视频里添加多个画面?多窗口画中画PR模板视频素材

Premiere Pro 2021模板&#xff0c;多窗口布局&#xff0c;多画面组合&#xff0c;小窗口视频&#xff0c;画中画视频效果制作素材PR模板mogrt文件。 4K、HD可调整到任何分辨率。 100多窗口布局样式。 来自PR模板网&#xff1a;https://prmuban.com/37059.html

深入了解pnpm:一种高效的包管理工具

✨专栏介绍 在当今数字化时代&#xff0c;Web应用程序已经成为了人们生活和工作中不可或缺的一部分。而要构建出令人印象深刻且功能强大的Web应用程序&#xff0c;就需要掌握一系列前端技术。前端技术涵盖了HTML、CSS和JavaScript等核心技术&#xff0c;以及各种框架、库和工具…

Unity | 渡鸦避难所-6 | 有限状态机控制角色行为逻辑

1 有限状态机简介 有限状态机&#xff08;英语&#xff1a;finite-state machine&#xff0c;缩写&#xff1a;FSM&#xff09;&#xff0c;简称状态机&#xff0c;是表示有限个状态以及在这些状态之间的转移和动作等行为的数学计算模型 在游戏开发中应用有限状态机&#xff…

#Uniapp:编译器#ifdef --- #endif #ifndef --- #endif

编译器#ifdef — #endif &#ifndef — #endif uni-app能实现一套代码、多端运行&#xff0c;核心是通过编译器 运行时实现的 定义 以 #ifdef 或 #ifndef 加 %PLATFORM% 开头&#xff0c;以 #endif 结尾。 #ifdef&#xff1a;if defined 仅在某平台存在#ifndef&#xff…

JavaWeb——后端之登录功能

6. 登录功能 6.1 登录认证 只进行用户名和密码是否存在的操作 Slf4j RestController public class LoginController {Autowiredpublic EmpService empService;PostMapping("/login")public Result login(RequestBody Emp emp) {log.info("{}员工登录", …

ASP .net core微服务实战

>>>>>>>>>>>>>>开发<<<<<<<<<<<<<<<< 0)用户 用户到nginx之间需要用https&#xff0c;避免被监听。 1)nginx // 做统一的分发&#xff0c;到微服务&#xff0c;相当于网关,提供统…

APP出海需知——Admob广告变现竞价策略

越来越多的出海公司更加重视应用的广告变现&#xff0c;Admob因其提供丰富的广告资源&#xff0c;稳定的平台支持&#xff0c;被广泛采用接入。 Admob广告变现策略 1、bidding竞价策略 Bidding目前是Admob广泛推广的较成熟的变现方案&#xff0c;当竞价网络和瀑布流混合时&a…

第二百五十四回

文章目录 1. 概念介绍2. 思路与方法2.1 实现思路2.2 实现方法 3. 代码与效果3.1 示例代码3.2 运行效果 4. 内容总结 我们在上一章回中介绍了"如何给图片添加阴影"相关的内容&#xff0c;本章回中将介绍自定义Radio组件.闲话休提&#xff0c;让我们一起Talk Flutter吧…

socket通信实现TCP协议的同步通信

实现tcp通信&#xff0c;一般第一想到的是用netty框架&#xff0c;但是netty实现的通信一般是异步&#xff0c;发送消息后&#xff0c;不需要等到回复。 最近遇到一个需求时&#xff0c;与某个网关进行tcp通信&#xff0c;发送请求消息之后会立马回复&#xff0c;并且不同的请…

JAVA:解析Event事件机制与应用举例

1、简述 Java事件机制是一种基于观察者模式的设计模式&#xff0c;用于处理对象之间的松耦合通信。本篇技术博客将深入探讨Java事件机制的原理&#xff0c;并通过实际应用举例展示如何在项目中灵活利用该机制。 2、基本原理 Java事件机制基于观察者模式&#xff0c;包含以下…

【AI视野·今日NLP 自然语言处理论文速览 第六十七期】Mon, 1 Jan 2024

AI视野今日CS.NLP 自然语言处理论文速览 Mon, 1 Jan 2024 Totally 42 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computation and Language Papers Principled Gradient-based Markov Chain Monte Carlo for Text Generation Authors Li Du, Afra Amini, Lucas…