鸿蒙开发-UI-布局-线性布局

鸿蒙开发-序言

鸿蒙开发-工具

鸿蒙开发-初体验

鸿蒙开发-运行机制

鸿蒙开发-运行机制-Stage模型

鸿蒙开发-UI

鸿蒙开发-UI-组件

鸿蒙开发-UI-组件-状态管理

鸿蒙开发-UI-应用-状态管理

鸿蒙开发-UI-渲染控制

鸿蒙开发-UI-布局

文章目录

前言

一、基本概念

二、布局子元素

1.子元素排列方向上的间距

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

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

2.子元素交叉轴上的对齐方式

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

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

3.子元素主轴上的排列方式

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

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

三、自适应

1.自适应拉伸

2.自适应缩放

3.自适应延伸

总结


前言

上文学习了鸿蒙开发UI布局相关的知识,简单介绍了布局的分类。本文详细学习其中一种常见布局方式-线性布局。

一、基本概念

开发中最常用的布局,通过线性容器Row和Column构建,其子元素在线性方向上(Row:水平方向和Column:垂直方向)依次排列。

二、布局子元素

1.子元素排列方向上的间距

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

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容器内排列方向上的间距

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%')

2.子元素交叉轴上的对齐方式

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

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

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容器内子元素在垂直方向上的排列

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)')

3.子元素主轴上的排列方式

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

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容器内子元素在水平方向上的排列

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)

三、自适应

1.自适应拉伸

在线性布局下,空白填充组件Blank,在容器主轴方向自动填充空白空间,达到自适应拉伸效果。Row和Column作为容器,只需要添加宽高为百分比,当屏幕宽高发生变化时,会产生自适应效果

2.自适应缩放

自适应缩放是指子组件随容器尺寸的变化而按照预设的比例自动调整尺寸,适应各种不同大小的设备。在线性布局中,可以使用以下两种方法实现自适应缩放

2.1 父容器尺寸确定时,使用layoutWeight属性设置子组件和兄弟元素在主轴上的权重,忽略元素本身尺寸设置,使它们在任意尺寸的设备下自适应占满剩余空间

@Entry
@Component
struct layoutWeightExample {
  build() {
    Column() {
      Text('1:2:3').width('100%')
      Row() {
        Column() {
          Text('layoutWeight(1)')
            .textAlign(TextAlign.Center)
        }.layoutWeight(1).backgroundColor(0xF5DEB3).height('100%')

        Column() {
          Text('layoutWeight(2)')
            .textAlign(TextAlign.Center)
        }.layoutWeight(2).backgroundColor(0xD2B48C).height('100%')

        Column() {
          Text('layoutWeight(3)')
            .textAlign(TextAlign.Center)
        }.layoutWeight(3).backgroundColor(0xF5DEB3).height('100%')

      }.backgroundColor(0xffd306).height('30%')

    }
  }
}

横屏效果

竖屏效果

2.2 父容器尺寸确定时,使用百分比设置子组件和兄弟元素的宽度,使他们在任意尺寸的设备下保持固定的自适应占比

@Entry
@Component
struct WidthExample {
  build() {
    Column() {
      Row() {
        Column() {
          Text('left width 20%')
            .textAlign(TextAlign.Center)
        }.width('20%').backgroundColor(0xF5DEB3).height('100%')

        Column() {
          Text('center width 50%')
            .textAlign(TextAlign.Center)
        }.width('50%').backgroundColor(0xD2B48C).height('100%')

        Column() {
          Text('right width 30%')
            .textAlign(TextAlign.Center)
        }.width('30%').backgroundColor(0xF5DEB3).height('100%')
      }.backgroundColor(0xffd306).height('30%')
    }
  }
}

横屏效果

竖屏效果

3.自适应延伸

自适应延伸是指在不同尺寸设备下,当页面的内容超出屏幕大小而无法完全显示时,可以通过滚动条进行拖动展示。这种方法适用于线性布局中内容无法一屏展示的场景。通常有以下两种实现方式

3.1 ​​​​​​​ 在List中添加滚动条,当List子项过多一屏放不下时,可以将每一项子元素放置在不同的组件中,通过滚动条进行拖动展示。可以通过scrollBar属性设置滚动条的常驻状态,edgeEffect属性设置拖动到内容最末端的回弹效果

3.2 使用Scroll组件:在线性布局中,当一屏无法完全显示时,可以在Column或Row组件的外层包裹一个可滚动的容器组件Scroll来实现可滑动的线性布局

@Entry
@Component
struct ScrollExample {
  scroller: Scroller = new Scroller();
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

  build() {
    Scroll(this.scroller) {
      Column() {
        ForEach(this.arr, (item) => {
          Text(item.toString())
            .width('90%')
            .height(150)
            .backgroundColor(0xFFFFFF)
            .borderRadius(15)
            .fontSize(16)
            .textAlign(TextAlign.Center)
            .margin({ top: 10 })
        }, item => item)
      }.width('100%')
    }
    .backgroundColor(0xDCDCDC)
    .scrollable(ScrollDirection.Vertical) // 滚动方向为垂直方向
    .scrollBar(BarState.On) // 滚动条常驻显示
    .scrollBarColor(Color.Gray) // 滚动条颜色
    .scrollBarWidth(10) // 滚动条宽度
    .edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹
  }
}

Column容器中通过ForEach创建多个Text组件,当一个屏幕显示不下,在Column组件外包装一个Scroll组件,实现Column组件内子元素滑动效果


总结

本文详细学习其中一种常见布局方式-线性布局,学习了线性容器内子元素在主轴以及交叉轴上的排列方式,同时也学习了子元素自适应相关的知识点,后面继续学习层叠布局。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

大模型基础2

大模型基础2 第二章:大模型的能力 语言模型的适应性:从语言模型到任务模型的转化 语言模型转化为任务模型的过程称为"适应": 任务的自然语言描述一组训练实例(输入-输出对) 进行适应的两个种方法&#xf…

OSI七层协议和五层协议

【 1 】互联网协议交互的基础 硬件设备 光缆 【 2 】OSI七层协议 物理层(Physical Layer):负责传输比特流(0和1)以及物理连接的建立和维护。数据链路层(Data Link Layer):提供可…

禅道下载安装及基本使用(项目周期管理)实施必会!!!

文章目录 前言:一、为什么要使用禅道?二、禅道的下载与安装 前言: 禅道的使用能使公司提高项目管理效率、促进团队协作、支持敏捷开发,并可根据具体需求进行个性化配置。 本文章博主将以一个项目周期来带你们了解禅道。 一、为什…

企业信息防泄漏管理的理念是什么?

在这个数字化的时代,信息数据的安全已经成为企业发展的关键要素。随着网络技术的飞速发展,信息安全的重要性日益凸显,它关乎企业的生死存亡。在企业的信息系统中,信息泄露是最常见和最严重的风险之一。因此,建立一套全…

django后台进行加密手机号字段,加密存储,解密显示

需求: 1 :员工在填写用户的手机号时,直接填写,在django后台中输入 2:当员工在后台确认要存储到数据库时,后台将会把手机号进行加密存储,当数据库被黑之后,手机号字段为加密字符 3:员…

Flutter编译报错Connection timed out: connect

背景:用Android Studo 创建了Flutter项目,编译运行报错java.net.ConnectException: Connection timed out: connect 我自己的环境: windows11 Android Studio Flutter 截图如下: 将错误日志展开之后: Exception…

银行家算法

文章目录 主要内容一.银行家算法1.需求分析 2.概要设计3.源代码代码如下(示例): 总结 主要内容 一.银行家算法 1.需求分析 通过编写和调试一个系统动态分配资源的简单模拟程序,观察死锁产生条件,采用适当的算法,有效…

Java并发编程: 并发编程中的ExecutionException异常

一、什么是ExecutionException 在并发编程中在执行java.util.concurrent.Future实现类的get方法时,需要捕获java.util.concurrent.ExecutionException这个异常。Future.get()方法通常是要获取任务的执行结果,当执行任务的过程中抛出了异常,就…

WAF攻防相关知识点总结2-代码免杀绕过

WAF的检测除了有对于非正常的流量检测外还对于非正常的数据包特征进行检测 以宝塔为例 在宝塔的后台可以放置一句话木马的文件 宝塔不会对于这个文件进行拦截,但是一旦我们使用菜刀蚁剑等webshell工具去进行连接的时候,数据报中有流量特征就会被拦截 …

【十进制与二进制如何转换?推荐一个超好用的公式编辑器】

在计算机科学和电子工程中,二进制是一种非常重要的数字系统,因为它在数字处理和数据传输中被广泛使用。因此,理解如何将十进制数转换为二进制数是非常重要的。 可以使这个计算过程更加简单和快速。而且还可以用于其他数学方程式的编写和编辑。…

MAC磁盘空间不足怎么清理?MAC清理磁盘空间的五种方法

MAC磁盘空间不足怎么清理?当我们使用苹果MAC一段时间后,就会有大量的垃圾文件占用磁盘空间,例如系统缓存文件、应用程序缓存文件、备份和重复文件、旧版的应用程序及其部件等,为了不影响电脑的后续使用,我们需要经常清…

2. Git

2. Git Git简介 Git是什么? Git是目前世界上最先进的分布式版本控制系统(没有之一)。 Git有什么特点?简单来说就是:高端大气上档次! 那什么是版本控制系统? 如果你用Microsoft Word写过长篇大…

IP定位助力网络安全防线

随着互联网技术的飞速发展,网络安全问题日益凸显。在网络安全领域,IP地址定位技术正发挥着越来越重要的作用,成为维护网络安全的一道有力防线。 一、追踪黑客攻击者,维护公共安全 在网络安全领域,黑客攻击是一个严重的…

RK3568平台开发系列讲解(Linux系统篇)中断下文 tasklet

🚀返回专栏总目录 文章目录 一、什么是 taskle二、tasklet 相关接口函数2.1、静态初始化函数2.2、动态初始化函数2.3、关闭函数2.4、使能函数2.5、调度函数2.6、销毁函数三、测试程序沉淀、分享、成长,让自己和他人都能有所收获!😄

设计模式入门

0. 类图 1. 设计原则 1.单一职责原则:每个类只有一个功能 2.开放封闭原则:模块和函数应该对扩展开放(对提供方),对修改关闭(对使用方) 3.里氏代换原则:子类拥有父类的所有方法和属性,从而可以减少创建类的工作量 4.依…

输入框输入关键字 下拉框的关键字高亮

直接上代码 //搜索框部分 <div><input v-modelkeyWord /><button clickseachFn>搜索</button> </div> //下拉框部分 <div><div v-html"item.name" v-foritem in droplist :keyitem.id></div> </div> <sc…

洛谷 P2415 集合求和

原文链接&#xff1a;洛谷 P2415 集合求和 一、题目链接 集合求和 - 洛谷 妥妥的一道数学问题&#xff0c;把数学层面的问题解决了&#xff0c;代码很好写&#xff1b; 题意&#xff1a;给n个元素的集合&#xff0c;求出所有子集的元素的和。 二、题目分析 思考一下&…

2024年【建筑电工(建筑特殊工种)】考试报名及建筑电工(建筑特殊工种)免费试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 建筑电工(建筑特殊工种)考试报名是安全生产模拟考试一点通总题库中生成的一套建筑电工(建筑特殊工种)免费试题&#xff0c;安全生产模拟考试一点通上建筑电工(建筑特殊工种)作业手机同步练习。2024年【建筑电工(建筑特…

189.轮转数组(数组翻转,C解法)

题目描述&#xff1a; 给定一个整数数组 nums&#xff0c;将数组中的元素向右轮转 k 个位置&#xff0c;其中 k 是非负数。 示例 1: 输入: nums [1,2,3,4,5,6,7], k 3 输出: [5,6,7,1,2,3,4] 解释: 向右轮转 1 步: [7,1,2,3,4,5,6] 向右轮转 2 步: [6,7,1,2,3,4,5] 向右轮转…

C++--默认参数

一.默认参数&#x1f357; C中允许函数提供默认参数&#xff0c;也就是允许在函数的声明或定义时给⼀个或多个参数指定默认值。在调 ⽤具有默认参数的函数时&#xff0c;如果没有提供实际参数&#xff0c;C将⾃动把默认参数作为相应参数的值。 二.使用规则&#x1f357; 1.如果…