鸿蒙开发入门day07-线性布局

于 2024-09-06 19:21:08 发布
阅读量1.5k 收藏 74
点赞数 83
分类专栏： 鸿蒙开发入门 文章标签： 华为 HarmonyOS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_73295475/article/details/141196932
版权

(创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，还请三连支持一波哇ヾ(＠^∇^＠)ノ）

目录

线性布局 (Row/Column)

概述

基本概念

布局子元素在排列方向上的间距

Column容器内排列方向上的间距

Row容器内排列方向上的间距

布局子元素在交叉轴上的对齐方式

Column容器内子元素在水平方向上的排列

Row容器内子元素在垂直方向上的排列

布局子元素在主轴上的排列方式

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

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

线性布局 (Row/Column)

概述

线性布局（LinearLayout）是开发中最常用的布局，通过线性容器Row和Column构建。线性布局是其他布局的基础，其子元素在线性方向上（水平方向和垂直方向）依次排列。线性布局的排列方向由所选容器组件决定，Column容器内子元素按照垂直方向排列，Row容器内子元素按照水平方向排列。根据不同的排列方向，开发者可选择使用Row或Column容器创建线性布局。

图1 Column容器内子元素排列示意图

图2 Row容器内子元素排列示意图

基本概念

  • 布局容器：具有布局能力的容器组件，可以承载其他元素作为其子元素，布局容器会对其子元素进行尺寸计算和布局排列。

  • 布局子元素：布局容器内部的元素。

  • 主轴：线性布局容器在布局方向上的轴线，子元素默认沿主轴排列。Row容器主轴为水平方向，Column容器主轴为垂直方向。

  • 交叉轴：垂直于主轴方向的轴线。Row容器交叉轴为垂直方向，Column容器交叉轴为水平方向。

  • 间距：布局子元素的间距。

布局子元素在排列方向上的间距

在布局容器内，可以通过space属性设置排列方向上子元素的间距，使各子元素在排列方向上有等间距效果。

Column容器内排列方向上的间距

图3 Column容器内排列方向的间距图

Column({ space: 20 }) {
  Text('space: 20').fontSize(15).fontColor(Color.Gray).width('90%')
  Row().width('90%').height(50).backgroundColor(0xF5DEB3)
  Row().width('90%').height(50).backgroundColor(0xD2B48C)
  Row().width('90%').height(50).backgroundColor(0xF5DEB3)
}.width('100%')

Row容器内排列方向上的间距

图4 Row容器内排列方向的间距图

Row({ space: 35 }) {
  Text('space: 35').fontSize(15).fontColor(Color.Gray)
  Row().width('10%').height(150).backgroundColor(0xF5DEB3)
  Row().width('10%').height(150).backgroundColor(0xD2B48C)
  Row().width('10%').height(150).backgroundColor(0xF5DEB3)
}.width('90%')

布局子元素在交叉轴上的对齐方式

在布局容器内，可以通过alignItems属性设置子元素在交叉轴（排列方向的垂直方向）上的对齐方式。且在各类尺寸屏幕中，表现一致。其中，交叉轴为垂直方向时，取值为VerticalAlign类型，水平方向取值为HorizontalAlign。

alignSelf属性用于控制单个子元素在容器交叉轴上的对齐方式，其优先级高于alignItems属性，如果设置了alignSelf属性，则在单个子元素上会覆盖alignItems属性。

Column容器内子元素在水平方向上的排列

图5 Column容器内子元素在水平方向上的排列图

  • HorizontalAlign.Start：子元素在水平方向左对齐。

Column({}) {
  Column() {
  }.width('80%').height(50).backgroundColor(0xF5DEB3)

  Column() {
  }.width('80%').height(50).backgroundColor(0xD2B48C)

  Column() {
  }.width('80%').height(50).backgroundColor(0xF5DEB3)
}.width('100%').alignItems(HorizontalAlign.Start).backgroundColor('rgb(242,242,242)')

  • HorizontalAlign.Center：子元素在水平方向居中对齐。

Column({}) {
  Column() {
  }.width('80%').height(50).backgroundColor(0xF5DEB3)

  Column() {
  }.width('80%').height(50).backgroundColor(0xD2B48C)

  Column() {
  }.width('80%').height(50).backgroundColor(0xF5DEB3)
}.width('100%').alignItems(HorizontalAlign.Center).backgroundColor('rgb(242,242,242)')

  • HorizontalAlign.End：子元素在水平方向右对齐。

Column({}) {
  Column() {
  }.width('80%').height(50).backgroundColor(0xF5DEB3)

  Column() {
  }.width('80%').height(50).backgroundColor(0xD2B48C)

  Column() {
  }.width('80%').height(50).backgroundColor(0xF5DEB3)
}.width('100%').alignItems(HorizontalAlign.End).backgroundColor('rgb(242,242,242)')

Row容器内子元素在垂直方向上的排列

图6 Row容器内子元素在垂直方向上的排列图

  • VerticalAlign.Top：子元素在垂直方向顶部对齐。

Row({}) {
  Column() {
  }.width('20%').height(30).backgroundColor(0xF5DEB3)

  Column() {
  }.width('20%').height(30).backgroundColor(0xD2B48C)

  Column() {
  }.width('20%').height(30).backgroundColor(0xF5DEB3)
}.width('100%').height(200).alignItems(VerticalAlign.Top).backgroundColor('rgb(242,242,242)')

  • VerticalAlign.Center：子元素在垂直方向居中对齐。

Row({}) {
  Column() {
  }.width('20%').height(30).backgroundColor(0xF5DEB3)

  Column() {
  }.width('20%').height(30).backgroundColor(0xD2B48C)

  Column() {
  }.width('20%').height(30).backgroundColor(0xF5DEB3)
}.width('100%').height(200).alignItems(VerticalAlign.Center).backgroundColor('rgb(242,242,242)')

  • VerticalAlign.Bottom：子元素在垂直方向底部对齐。

Row({}) {
  Column() {
  }.width('20%').height(30).backgroundColor(0xF5DEB3)

  Column() {
  }.width('20%').height(30).backgroundColor(0xD2B48C)

  Column() {
  }.width('20%').height(30).backgroundColor(0xF5DEB3)
}.width('100%').height(200).alignItems(VerticalAlign.Bottom).backgroundColor('rgb(242,242,242)')

布局子元素在主轴上的排列方式

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

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

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

justifyContent(FlexAlign.Start)：元素在垂直方向方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐。

Column({}) {
  Column() {
  }.width('80%').height(50).backgroundColor(0xF5DEB3)

  Column() {
  }.width('80%').height(50).backgroundColor(0xD2B48C)

  Column() {
  }.width('80%').height(50).backgroundColor(0xF5DEB3)
}.width('100%').height(300).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.Start)

  • justifyContent(FlexAlign.Center)：元素在垂直方向方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。

Column({}) {
  Column() {
  }.width('80%').height(50).backgroundColor(0xF5DEB3)

  Column() {
  }.width('80%').height(50).backgroundColor(0xD2B48C)

  Column() {
  }.width('80%').height(50).backgroundColor(0xF5DEB3)
}.width('100%').height(300).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.Center)

  • justifyContent(FlexAlign.End)：元素在垂直方向方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐。

Column({}) {
  Column() {
  }.width('80%').height(50).backgroundColor(0xF5DEB3)

  Column() {
  }.width('80%').height(50).backgroundColor(0xD2B48C)

  Column() {
  }.width('80%').height(50).backgroundColor(0xF5DEB3)
}.width('100%').height(300).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.End)

  • justifyContent(FlexAlign.SpaceBetween)：垂直方向均匀分配元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。

Column({}) {
  Column() {
  }.width('80%').height(50).backgroundColor(0xF5DEB3)

  Column() {
  }.width('80%').height(50).backgroundColor(0xD2B48C)

  Column() {
  }.width('80%').height(50).backgroundColor(0xF5DEB3)
}.width('100%').height(300).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.SpaceBetween)

  • justifyContent(FlexAlign.SpaceAround)：垂直方向均匀分配元素，相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。

Column({}) {
  Column() {
  }.width('80%').height(50).backgroundColor(0xF5DEB3)

  Column() {
  }.width('80%').height(50).backgroundColor(0xD2B48C)

  Column() {
  }.width('80%').height(50).backgroundColor(0xF5DEB3)
}.width('100%').height(300).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.SpaceAround)

  • justifyContent(FlexAlign.SpaceEvenly)：垂直方向均匀分配元素，相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。

Column({}) {
  Column() {
  }.width('80%').height(50).backgroundColor(0xF5DEB3)

  Column() {
  }.width('80%').height(50).backgroundColor(0xD2B48C)

  Column() {
  }.width('80%').height(50).backgroundColor(0xF5DEB3)
}.width('100%').height(300).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.SpaceEvenly)

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

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

  • justifyContent(FlexAlign.Start)：元素在水平方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐。

    Row({}) {
Column() {
}.width('20%').height(30).backgroundColor(0xF5DEB3)

Column() {
}.width('20%').height(30).backgroundColor(0xD2B48C)

Column() {
}.width('20%').height(30).backgroundColor(0xF5DEB3)
}.width('100%').height(200).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.Start)

  • justifyContent(FlexAlign.Center)：元素在水平方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。

    Row({}) {
Column() {
}.width('20%').height(30).backgroundColor(0xF5DEB3)

Column() {
}.width('20%').height(30).backgroundColor(0xD2B48C)

Column() {
}.width('20%').height(30).backgroundColor(0xF5DEB3)
}.width('100%').height(200).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.Center)

  • justifyContent(FlexAlign.End)：元素在水平方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐。

    Row({}) {
Column() {
}.width('20%').height(30).backgroundColor(0xF5DEB3)

Column() {
}.width('20%').height(30).backgroundColor(0xD2B48C)

Column() {
}.width('20%').height(30).backgroundColor(0xF5DEB3)
}.width('100%').height(200).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.End)

  • justifyContent(FlexAlign.SpaceBetween)：水平方向均匀分配元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。

    Row({}) {
Column() {
}.width('20%').height(30).backgroundColor(0xF5DEB3)

Column() {
}.width('20%').height(30).backgroundColor(0xD2B48C)

Column() {
}.width('20%').height(30).backgroundColor(0xF5DEB3)
}.width('100%').height(200).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.SpaceBetween)

  • justifyContent(FlexAlign.SpaceAround)：水平方向均匀分配元素，相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。

    Row({}) {
Column() {
}.width('20%').height(30).backgroundColor(0xF5DEB3)

Column() {
}.width('20%').height(30).backgroundColor(0xD2B48C)

Column() {
}.width('20%').height(30).backgroundColor(0xF5DEB3)
}.width('100%').height(200).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.SpaceAround)

  • justifyContent(FlexAlign.SpaceEvenly)：水平方向均匀分配元素，相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。

    Row({}) {
Column() {
}.width('20%').height(30).backgroundColor(0xF5DEB3)

Column() {
}.width('20%').height(30).backgroundColor(0xD2B48C)

Column() {
}.width('20%').height(30).backgroundColor(0xF5DEB3)
}.width('100%').height(200).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.SpaceEvenly)

小周不想卷
关注
专栏目录
鸿蒙开发（8）---DatePicker组件
李元静
06-15 3700
目录DatePicker组件标题 DatePicker组件 在我们讲解Picker组件实现城市地址选择时，是不是有的读者也想过用其实现日期的选择呢？ 其实，Picker组件可以用于日期的选择，但是如果用于选择年月日，那么和城市一样你就要操作3个Picker组件，无疑增加了代码量。 而鸿蒙给我们直接提供了DatePicker组件今天日期的选择操作。下面，我们来讲解DatePicker组件的使用规则。 标题 ...
HarmonyOS实战开发：线性布局（Row/Column）（构建布局）
2401_84194030的博客
05-08 1245
线性布局（LinearLayout）是开发中最常用的布局..........
鸿蒙开发-UI-布局-线性布局
中年程序员
01-15 2090
上文学习了鸿蒙开发UI布局相关的知识，简单介绍了布局的分类。本文详细学习其中一种常见布局方式-线性布局。本文详细学习其中一种常见布局方式-线性布局，学习了线性容器内子元素在主轴以及交叉轴上的排列方式，同时也学习了子元素自适应相关的知识点，后面继续学习层叠布局。
LinearLayout组件右对齐
zhanghao_Hulk的专栏
11-13 2262
在LinearLayout中，如果将其定位方向设为横向排列：android:orientation="horizontal"，那么这个布局中的控件将自左向右排列。 但有时会有这样的情况：行的左边有两个控制的同时，行的右边也有一个控制。 如图： 这怎么处理呢？ 我们可以将右边的控件放在另一个LinearLayout中,同时将其对齐方式设为右对齐：android:gravity
鸿蒙开发系列教程（十）--布局应用：线性布局
huazi99的博客
02-06 604
通过线性容器[Row]和[Column]构建Column容器内子元素按照垂直方向排列，Row容器内子元素按照水平方向排列。
鸿蒙系统中DirectionalLayout线性布局
u010574271的博客
06-01 1703
鸿蒙系统中DirectionalLayout线性布局前言前期准备新建项目新建线性布局页面排列方式垂直排列水平排列对其方式权重 前言 DirectionalLayout布局用于将一组组件(Component)按照水平或者垂直方向排布，能够方便地对齐布局内的组件。 DirectionalLayout的自有XML属性以及所包含组件可支持的XML属性如下 参考文档 https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-l
Java入门基础学习资料day07-08
10-22
day07【Scanner类、Random类、ArrayList类】 day08【String类、static关键字、Arrays类、Math类】 day09【继承、super、this、抽象类】 day10【接口、多态】 day11【final、权限、内部类、引用类型】 此课程全部...
大数据入门spark3.0入门到精通 1-8day 代码-笔记.zip
02-21
2021贺岁大数据入门spark3.0入门到精通资源简介： 本课程中使用官方在2020年9月8日发布的Spark3.0系列最新稳定版：Spark3.0.1。共课程包含9个章节：Spark环境搭建，SparkCore，SparkStreaming，SparkSQL，...
day01-前言-入门程序-常量-变量
04-18
day01 前言, HelloWorld, 常量, 变量 基础阶段课程介绍
零基础入门数据挖掘-二手车交易价格预测（Day3建模调参）
12-21
以上就是“零基础入门数据挖掘-二手车交易价格预测（Day3建模调参）”的主要知识点，涵盖了数据处理、模型构建、评估与优化等多个方面。对于初学者来说，这是一个很好的起点，通过这个案例可以学习到数据挖掘的基本...
【鸿蒙 HarmonyOS】UI 布局 ( 线性布局 DirectionalLayout )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
12-24 1817
一、线性布局 DirectionalLayout、 二、垂直线性布局 DirectionalLayout、 三、水平线性布局 DirectionalLayout
HarmonyOS Next开发学习手册——线性布局 (Row/Column)
最新发布
maniuT的博客
07-09 598
线性布局（LinearLayout）是开发中最常用的布局，通过线性容器Row和Column构建。线性布局是其他布局的基础，其子元素在线性方向上（水平方向和垂直方向）依次排列。线性布局的排列方向由所选容器组件决定，Column容器内子元素按照垂直方向排列，Row容器内子元素按照水平方向排列。根据不同的排列方向，开发者可选择使用Row或Column容器创建线性布局。图1Column容器内子元素排列示意图图2Row容器内子元素排列示意图。
＜HarmonyOS第一课＞从简单的页面开始
qq_41881317的博客
12-21 383
线性布局容器表示按照垂直方向或者水平方向排列子组件的容器，ArkTS提供了Column和Row容器来实现线性布局。Column表示沿垂直方向布局的容器。Row表示沿水平方向布局的容器。了解布局容器的主轴和交叉轴，主要是为了让大家更好地理解子组件在主轴和交叉轴的排列方式。接下来，我们将详细讲解Column和Row容器的两个属性justifyContent和alignItems。属性名称描述设置子组件在主轴方向上的对齐格式。alignItems设置子组件在交叉轴方向上的对齐格式。
39.HarmonyOS鸿蒙系统 App(ArkUI)线性布局结合弹性布局
Txwtech笛克特科
03-31 537
弹性布局（）提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。容器默认存在主轴与交叉轴，子元素默认沿主轴排列，子元素在主轴方向的尺寸称为主轴尺寸，在交叉轴方向的尺寸称为交叉轴尺寸。弹性布局在开发场景中用例特别多，比如页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等等。主轴为水平方向的Flex容器示意图。
鸿蒙OS开发：【一次开发，多端部署】应用（响应式布局）
鸿蒙的技术博客
05-16 1731
栅格是多设备场景下通用的辅助定位工具，通过将空间分割为有规律的栅格。栅格可以显著降低适配不同屏幕尺寸的设计及开发成本，使得整体设计和开发流程更有秩序和节奏感，同时也保证多设备上应用显示的协调性和一致性，提升用户体验。栅格的样式由Margin、Gutter、Columns三个属性决定。Margin是相对应用窗口、父容器的左右边缘的距离，决定了内容可展示的整体宽度。Gutter是相邻的两个Column之间的距离，决定内容间的紧密程度。Columns是栅格中的列数，其数值决定了内容的布局复杂度。
鸿蒙中的九种布局概述
Dimanche的博客
02-25 2451
鸿蒙开发中包含就种布局，分别为线性布局、层叠布局、弹性布局、相对布局、栅格布局、媒体布局、列表、网格、轮播。
鸿蒙应用开发 | 6大布局之 位置布局(PositionLayout)！
06-21 1186
大家好，我是你们的朋友 朋哥，今天开始朋哥开始研究鸿蒙了，会写一些文章分享给大家，希望多多提意见。 上一篇原创文章解读了鸿蒙开发布局的 表格布局(TableLayout)，表格布局非常简单，就是一个大小和样式一样的表格。 今天来解读一下 位置布局（坐标布局），这种布局使用起来更简单，但是适用场景比较少。6大布局已经基本要完成了，各位小伙伴需要尽快学习一下之前的几种布局，布局了解了，后面做界面效果 就非常简单了。 简介： 在PositionLayout中，子组件通过指定准确的x/y坐标值在屏幕...
鸿蒙应用开发-学习-第一章-页面布局
weixin_50991227的博客
01-13 1501
Tips：这个只是作者的学习笔记，仅作参考。
HarmonyOS鸿蒙开发常用4种布局详细说明
qq_36255346的博客
03-17 3406
HarmonyOS鸿蒙开发常用4种布局详细说明1、线性布局2、层叠布局3、网格布局4、列表布局。
Java基础入门：Day1-3课程精华概览
- Day01: 开始时会介绍Java的起源和发展历程，帮助学生理解Java作为一门广泛使用的编程语言的原因。 - **Java语言特性**：深入探讨Java的特性，如平台无关性、垃圾回收机制和强类型系统，这些将影响开发者编写可...
评论 58
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小周不想卷

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值