HarmonyOS Flex布局

news2024/9/23 15:20:23

在这里插入图片描述

前置知识:

  • 一次开发,多端部署:一套代码工程,一次开发上架,多端按需部署。支撑开发者快速高效的开发支持多种终端设备形态的应用,实现对不同设备兼容的同时,提供跨设备的流转、迁移和协同的分布式体验
  • 自适应布局:当外部容器大小发生变化时,元素可以根据相对关系自动变化以适应外部容器变化的布局能力。相对关系如占比、固定宽高比、显示优先级等。常见的自适应布局有:线性布局、层叠布局、弹性布局、相对布局等。自适应布局能力可以实现界面显示随外部容器大小连续变化
  • 响应式布局:当外部容器大小发生变化时,元素可以根据断点、栅格或特定的特征(如屏幕方向、窗口宽高等)自动变化以适应外部容器变化的布局能力。
  • Navigation:页面根容器,一般用于分栏布局场景使用。

Flex布局:
提供了更加灵活和有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。广泛应用于页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等场景

  1. 主轴和交叉轴
    1. 主轴:Flex布局的主轴是水平方向(默认)或垂直方向(通过设置方向),子元素默认沿主轴排列
    2. 交叉轴:垂直于主轴的轴线,用于设置子元素在交叉轴方向的对齐方式
  2. 布局方向
    1. 默认方向:主轴为水平方向(FlexDirection.Row),子元素从起始端沿着水平方向开始排布
    2. 其他方向:可以通过设置方向参数(如FlexDirection.RowReverse、FlexDirection.Column、FlexDirection.ColumnReverse)来改变主轴方向
  3. 布局换行
    1. 单行布局:子元素在主轴方向上的尺寸之和小于容器的主轴尺寸时,所有子元素在同一行排列
    2. 多行布局:子元素在主轴方向上的尺寸之和大于容器的主轴尺寸时,容器会换行,每一行子元素按照主轴方向排列
    3. wrap属性:控制多行布局时的换行方式,包括FlexWrap.NoWrap(默认值)、FlexWrap.Wrap和FlexWrap.WrapReverse
  4. 主轴对齐方式
    1. 对齐方式:可以通过justifyContent参数设置子元素在主轴方向上的对齐方式,包括FlexAlign.Start、FlexAlign.Center、FlexAlign.End和FlexAlign.SpaceBetween等
  5. 交叉轴对齐方式
    1. 对齐方式:可以通过alignItems参数设置子元素在交叉轴方向上的对齐方式,包括ItemAlign.Auto、ItemAlign.Start、ItemAlign.Center、ItemAlign.End、ItemAlign.Stretch、ItemAlign.Baseline和ItemAlign.End
  6. 自适应拉伸
    1. 通过设置子元素的flexBasisflexGrow属性,可以实现子元素的自适应布局 flexBasis设置子元素在主轴方向上的基准尺寸,flexGrow设置子元素在主轴方向上分配剩余空间的比例。flexShrink:设置子元素在主轴方向上压缩的比例

建议使用Column/Row替代Flex,性能会得到提升

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

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

相关文章

Protobuf:原理、用法与 C++ 实践

在当今的软件开发领域,高效的数据序列化和通信协议是构建高性能、可扩展系统的关键。Protobuf(Protocol Buffers)作为一种流行的开源序列化框架,正因其出色的性能、简洁的语法和跨语言支持而备受青睐。本文将深入探讨 Protobuf 的…

织梦cms站长导航网站源码

介绍: 源码仅供技术参考严禁商业用途!版权归原作者所有! 源码上传 到服务器 导航源码安装:域名/install/ 后台信息 后台地址:域名/dede 后台账号:admin 后台密码:7206876 代码下载&#x…

【代码随想录】区间和——前缀和方法

本博文为《代码随想录》学习笔记,原文链接:代码随想录 题目 原题链接:58. 区间和(第九期模拟笔试) 题目描述 给定一个整数数组 Array,请计算该数组在每个指定区间内元素的总和。 输入描述 第一行输入为…

求职 day13总结

总结一下周一的平安寿险电话面(7月29)和周二(7月30)华为od的技术一面、二面、(8月1)资面和等结果流程。 面试前压力挺大的,毕竟这么久还没有技术面过。周日还想再推一下od技术面时间&#xff0…

【C语言】数据结构前言

🦄个人主页:小米里的大麦-CSDN博客 🎏所属专栏:C语言数据结构_小米里的大麦的博客-CSDN博客 🎁代码托管:黄灿灿/数据结构 (gitee.com) ⚙️操作环境:Visual Studio 2022 目录 C语言数据结构前言 1. 什么是数据结构? 2. 什么是算…

矩阵的导数运算

1. 标量方程对向量的导数 一维方程f(y)求极值即求导,令 二维方程f(y1,y2)求极值即求偏导,令 如果一个标量方程f(y1,y2,...ym)有m个自变量,求取它的极值就需要求取m组的方程组。当然可以用一种简洁的方式来表达它,比如二维方程f(y1,y2)可以把其中的变量写成向量的形式,此…

sed 命令与正则表达式

sed 是非交互式的编辑器。它不会修改文件,除非使用 shell 重定向来保存结果。默认情况下,所有的输出行都会被打印到屏幕上。 sed 编辑器逐行处理文件(或输入),并将结果打印到屏幕上。 具体过程如下:首先 …

Llama 3.1论文中文对照翻译

The Llama 3 Herd of Models 模型群 Llama 3 Llama Team, Al Meta 1 {}^{1} 1 Llama 团队,Meta Al 1 {}^{1} 1 1 {}^{1} 1 A detailed contributor list can be found in the appendix of this paper. 1 {}^{1} 1 详细的贡献者名单可在本文附录中找到。 Mod…

计算机的错误计算(五十七)

摘要 展示 函数的错误计算。 由计算机的错误计算(五十五)知,国际IEEE 754 标准给出的 函数的定义域是. 那么,在这个实数域范围内,软件的实现效果怎样? 例1. 已知 在数学软件 Maple 中计算 在Maple …

【ML】Auto-encoder

【ML】Auto-encoder 1. Auto-encoder自编码器的基本结构自编码器的特点自编码器的应用场景总结 2. Discrete Representation3. Anomaly Detection3.1 异常检测的特点3.2 常见的异常检测方法3.3 应用场景3.4 总结 1. Auto-encoder 自编码器(Auto-encoder&#xff0…

大模型时代的机遇与挑战

从技术突破到技术社会的融合发展 沈向洋 通用人工智能时代,我们应该怎样思考大模型? 思考 1 算力是门槛 算力成长(来自EPOCH AI) GPT4 2x1025 GPU算力增长 影响算力的两大要素:模型大小(参数量N&#x…

cesium自定图弹框

token记得换成您自己的!!! 申请cesium的token 官网【Cesium: The Platform for 3D Geospatial】 pickEllipsoid在加载地形的情况下有一定误差,地形凹凸程度越大,误差越大。 pickPosition在depthTestAgainstTerrain…

★ C++进阶篇 ★ 继承

Ciallo&#xff5e;(∠・ω< )⌒☆ ~ 今天&#xff0c;我将继续和大家一起学习C进阶篇第一章----继承 ~ 目录 一 继承的概念及定义 1.1 继承的概念 1.2 继承定义 1.2.1 定义格式 1.2.2 继承⽗类成员访问⽅式的变化 1.3 继承类模板 二 父类和子类对象赋值兼容转换…

Spring -- 事务

Spring中事务的操作分为两类:(1)编程式事务 – 手动写代码操作事务(2)声明式事务 – 利用注解开启事务和提交事务 1. 编程式事务 准备Controller RestController RequestMapping("/user") public class UserInfoController {Autowiredprivate UserInfoService use…

用Manim创建条形图【BarChart】

BarChart是Manim库中用于创建条形图的函数。它允许用户通过一组值创建一个条形图&#xff0c;其参数可以调整条形的外观和布局。 BarChart(values, bar_namesNone, y_rangeNone, x_lengthNone, y_lengthNone, bar_colors[#003f5c, #58508d, #bc5090, #ff6361, #ffa600],bar_w…

信息安全服务资质CCRC认证需要哪些条件?

CCRC认证是中国信息安全认证中心开展的信息安全服务资质认证&#xff0c;涵盖7个方向&#xff0c;包括安全集成、安全运维、风险评估、应急处理、软件安全开发、灾难备份与恢复、网络安全审计。每个认证方向的资质级别分为一级、二级、三级&#xff0c;一级最高&#xff0c;三级…

网络基础篇~路由、网络类型和相关命令

一、安装Cisco模拟器 功能&#xff1a;Cisco Packet Tracer&#xff0c;是Cisco官方提供的网络模拟器&#xff0c;专门用于教学和学习网络技术。它提供了广泛的Cisco设备模拟&#xff0c;并具有一个直观的界面&#xff0c;可用于创建、配置和模拟网络拓扑。 &#xff08;一&…

基于vue框架的Android共享停车位i00t4(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。

系统程序文件列表 项目功能&#xff1a;用户,车位主,车位出租,车位预约,取消预约 开题报告内容 基于Vue框架的Android共享停车位系统 开题报告 一、研究背景及意义 1.1 研究背景 随着城市化进程的加速&#xff0c;私家车数量急剧增加&#xff0c;停车难问题日益凸显&…

玛雅房产系统源码开发与技术功能解析

引言 随着房地产市场的蓬勃发展&#xff0c;房产管理系统&#xff08;Real Estate Management System, REMS&#xff09;作为提升行业效率、优化资源配置的关键工具&#xff0c;其重要性日益凸显。房产系统源码开发不仅涉及复杂的业务逻辑处理&#xff0c;还融合了先进的软件开…

无人机之热成像篇

一、定义 无人机热成像技术是指将热成像相机安装在无人机云台上&#xff0c;通过无人机的高空飞行能力和云台的稳定性&#xff0c;结合红外热成像技术对目标区域进行非接触式的温度测量和图像采集。该技术利用物体发出的红外辐射来生成图像&#xff0c;通过测量物体表面温度分布…