首页 > 其他分享 >学习笔记(六):ArkUi-线性布局 (Row/Column)常用属性

学习笔记(六):ArkUi-线性布局 (Row/Column)常用属性

时间:2024-10-27 17:09:35浏览次数:7  
标签:justifyContent 排列 FlexAlign 主轴 Column 元素 方向 ArkUi Row

一、space属性

设置排列方向上子元素的间距,使各子元素在排列方向上有等间距效果。

 

二、alignItems属性

设置子元素在交叉轴(排列方向的垂直方向)上的对齐方式。且在各类尺寸屏幕中,表现一致。

其中,交叉轴为垂直方向时,取值为VerticalAlign类型,水平方向取值为HorizontalAlign类型。

1、垂直排列示例:

2、水平排列示例:

 

三、justifyContent属性

设置子元素在容器主轴上的排列方式。可以从主轴起始位置开始排布,也可以从主轴结束位置开始排布,或者均匀分割主轴的空间

1、justifyContent(FlexAlign.Start) 主轴方向首段对齐

 

2、justifyContent(FlexAlign.Center)  主轴方向中心对齐

3、justifyContent(FlexAlign.End) 主轴方向末端对齐

4、justifyContent(FlexAlign.SpaceBetween) 主轴方向均匀分配

 5、justifyContent(FlexAlign.SpaceAround)

主轴方向均匀分配元素,相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。

6、justifyContent(FlexAlign.SpaceEvenly)

主轴方向均匀分配元素,相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样

 

 

官方示例:

1、Column容器内子元素在垂直方向上的排列图

2、Row容器内子元素在水平方向上的排列图

 

 

 

 

 

 

 

 

 

标签:justifyContent,排列,FlexAlign,主轴,Column,元素,方向,ArkUi,Row
From: https://www.cnblogs.com/xqxacm/p/18508111

相关文章

  • Two Types of Growth(成长的2种模式 1 )
    Anythingyoutrytoimprovewillhaveagrowthcurve.Imagineyouraneverydayandyoutrackedyourspeedtofinisha5-milecourse.Smoothingoutthenoise,overenoughtimeyou’dprobablygetagraphlikethis:任何你试图提高水平的东西都有一个增长曲线......
  • Rust的Reborrow机制
    最近,在使用Rust时遇到了Reborrow的概念,记录下来以备以后参考。1.起因起因准备对数据进行Min-Max标准化处理,也就是将一系列数据映射到一个新的范围。首先,需要遍历数据,找出其中的最大值和最小值,然后通过公式改变原始数据集的值。Min-Max公式:标准化后的值=(原始值-最小值)/......
  • PbootCMS错误提示:执行SQL发生错误!错误:no such column: def1
    原因:升级过程中SQL语句未执行成功。解决方案:执行以下SQL语句:----------------------------------Sqlite数据库升级脚本--适用于PbootCMS3.0.0版本升级至3.0.6------------------------------------新增多图标题字段ALTERTABLEay_contentADDCOLUM......
  • 直观解释注意力机制,Transformer的核心 | Chapter 6 | Deep Learning | 3Blue1Brown
    目录前言1.前情提要:词嵌入2.注意力是什么?Mole是什么?Tower又是什么?3.注意力模式:“一个毛茸茸的蓝色生物漫步于葱郁的森林”,名词与形容词,查询与键4.掩码:看前不看后5.上下文窗口大小6.值矩阵7.参数有多少8.交叉注意力9.多头注意力10.输出矩阵11.加深网络12.结语......
  • 直观解释大语言模型如何储存事实 | Chapter 7 | Deep Learning | 3Blue1Brown
    目录前言1.大语言模型中的事实储存在哪里?2.快速回顾一下Transformer3.针对示例所做的假设4.多层感知器内部机理5.参数统计6.叠加7.下期预告相关资料结语前言3Blue1Brown视频笔记,仅供自己参考这几个章节主要解析GPT背后的Transformer,本章主要是剖析Tra......
  • 鸿蒙编程江湖:ArkUI 的声明式 UI 编程与状态管理
    本文旨在深入探讨华为鸿蒙HarmonyOSNext系统(截止目前API12)的技术细节,基于实际开发实践进行总结。主要作为技术分享与交流载体,难免错漏,欢迎各位同仁提出宝贵意见和问题,以便共同进步。本文为原创内容,任何形式的转载必须注明出处及原作者。ArkTS的UI编程范式ArkUI是华为鸿蒙......
  • GBase 8a的如何拿到行号,rowid,类似oracle的rowid
    本文介绍GBase8a数据库集群内部,对没一行数据的行号rowid的方案。如Oracle等数据库,提供了rowid来唯一标识一行数据,在GBase里也提供了rowid,但因为是MPP,所以在随机分布表里,每个节点是各自独立的,只有复制表才能保证一致性。测试环境2节点集群[gbase@localhost~]$gcadminCLUST......
  • HarmonyOS:ArkUI最佳实践(2)状态管理最佳实践
    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(MaoistLearning)➤博客园地址:为敢技术(https://www.cnblogs.com/strengthen/ )➤GitHub地址:https://github.com/strengthen➤原文地址:https://www.cnblogs.com/strengthen/p/......
  • HarmonyOS:ArkUI最佳实践(1)ForEach循环渲染
    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(MaoistLearning)➤博客园地址:为敢技术(https://www.cnblogs.com/strengthen/ )➤GitHub地址:https://github.com/strengthen➤原文地址:https://www.cnblogs.com/strengthen/p/......
  • PbootCMS执行SQL发生错误!错误:no such column: def1
    当您在升级PbootCMSv3.0.6版本时遇到“执行SQL发生错误!错误:nosuchcolumn:def1”或“执行SQL发生错误!错误:duplicatecolumnname:picstitle”的提示,通常是因为数据库字段没有正确添加或已经存在。以下是一些解决方法:解决步骤备份数据库:在进行任何数据库操作之前,务必先备......