当前位置： 首页 > news >正文

【鸿蒙开发从0到1 day10】

news 2025/5/6 6:00:15

ArkUI布局高级

  • 一.线性布局
      • 1.间距(space)
      • 2.主轴对齐方式
      • 3.交叉轴对齐方式
      • 4.单个子组件交叉轴的对齐方式
      • 5.自适应缩放
      • 6.侧轴对齐方式
      • 7.案例
  • 二.弹性布局
      • 1.淘宝网页面案例分析
  • 三.总结

一.线性布局

线性布局（LinearLayout）是开发中最常用的布局，通过线性容器 Row 和 Column 构建。Column容器内子元素按照垂直方向排列，Row容器内子元素按照水平方向排列。根据不同的排列方向，开发者可选择使用Row或Column容器创建线性布局。

column
在这里插入图片描述
Row
在这里插入图片描述

1.间距(space)

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

  • 给组件column设置space
    在这里插入图片描述
  • 给组件Row设置space
    在这里插入图片描述

2.主轴对齐方式

属性：justifyContent()
参数：枚举FlexAlign
属性 描述

  • Start 首端对齐
  • Center 居中对齐
  • End 尾部对齐
  • Spacebetween 两端对齐子元素之间间距相等
  • SpaceAround 子元素两侧间距相等第一个元素到行首的距离和最后一个元素到行尾 的距离是相邻元素之间距离的一半
  • SpaceEvenly 相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样
  • row和column组件都可以使用justifycontent,只是他们的主轴不一样
    在这里插入图片描述

3.交叉轴对齐方式

展性: alignItems()
参数:枚举类型VerticalAlign
注意:布局客器在交叉轴要有足够空间，否则无法生效
alignItems(verticalAlign枚举)

  • top:顶部对齐
  • bottom:顶部对齐
  • center:居中对齐
    在这里插入图片描述

4.单个子组件交叉轴的对齐方式

作用:给指定组件设置交叉轴的对齐方式
属性: alignSelf(itemALign枚举)

  • start:顶部对齐
  • end:顶端对齐
  • center:垂直居中
  • stretch:将子组件的高度拉伸与父组件等高
    在这里插入图片描述

5.自适应缩放

父容器尺寸确定时，设置了 layoutWeight 属性的子元素与兄弟元素占主轴尺寸按照权重进行分配。
属性：layoutWeight()
参数：数字
在这里插入图片描述

@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Column(){Row(){Image($r('app.media.user')).width(60).height(60).borderRadius(10)Column({space:8}){Text('750ml奥利奥酸奶水果捞')Text('手工秘制原味').fontColor('#999').fontSize(14)Text('x1').fontColor('#999').fontSize(14)}.width('100%').alignItems(HorizontalAlign.Start).margin({left:10}).layoutWeight(1)Text('54,32').width(60).height(60).backgroundColor('#000').fontColor('#fff')}.width('100%').height(100).backgroundColor(Color.Yellow).padding(10)}.width('100%').height('100%').backgroundColor('#f1f1f1')}
}

6.侧轴对齐方式

● Column 主轴方向： 垂直方向
● Column 交叉轴方向：水平方向
在这里插入图片描述

7.案例

在这里插入图片描述

@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Column() {Row(){//左边Column(){Text('第五个国际数学日，全世界和数据一起玩儿').fontSize(14).fontWeight(500)Row(){Text('中国青年网 昨天').fontSize(12).fontColor('#999')Image($r('app.media.ic_close')).width(20).fillColor('#999')}.width('100%').justifyContent(FlexAlign.SpaceBetween)}.height('100%').layoutWeight(1).justifyContent(FlexAlign.SpaceBetween).alignItems(HorizontalAlign.Start)//右边Image($r('app.media.user')).width(120).height(90).margin({left:10}).borderRadius(10)}.width('100%').height(120).padding(15).backgroundColor('#fff').borderRadius(10)}.width('100%').height('100%').backgroundColor('#f1f1f1').padding(10)}
}

二.弹性布局

Flex 容器组件

  • 显示特点: 子元素默认在主轴上排列,如果父组件的尺寸不够,子组件会挤压
  • 要想不让子组件出现挤压得效果,可以给Flex加上
  • wrap:FlexWrap.Wrap
  • justifyContent:FlexAlign.spaceBetween 主轴对齐方式(水平)
  • alignContent 侧轴(垂直)多行对齐方式

1.淘宝网页面案例分析

@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Column() {Flex({wrap:FlexWrap.Wrap,justifyContent:FlexAlign.SpaceBetween, }){Column(){Image($r('app.media.top1')).borderRadius({topLeft:5,topRight:5}).width('100%').syncLoad(true)Column(){Text('[ 程序员必备 ] 最高版本-格子衫').fontSize(12).margin({top:5,bottom:8}).textOverflow({overflow:TextOverflow.Ellipsis}).maxLines(1)Text(){Span('￥666  ').fontSize(10).fontColor('rgb(242, 84, 128)')Span('销量666').fontSize(8)}.width('100%')}.alignItems(HorizontalAlign.Start).padding({left:10})}.width('48%').height(200).backgroundColor('#fff').borderRadius(5).margin({bottom :10})Column(){Image($r('app.media.top2')).width('100%').syncLoad(true).borderRadius({topLeft:5,topRight:5})Column(){Text('[ 程序员必备 ] 最高版本-格子衫').fontSize(12).margin({top:5,bottom:8}).textOverflow({overflow:TextOverflow.Ellipsis}).maxLines(1)Text(){Span('￥666  ').fontSize(10).fontColor('rgb(242, 84, 128)')Span('销量666').fontSize(8)}.width('100%')}.alignItems(HorizontalAlign.Start).padding({left:10})}.width('48%').height(200).backgroundColor('#fff').borderRadius(5).margin({bottom :10})Column(){Image($r('app.media.top3')).borderRadius({topLeft:5,topRight:5}).width('100%').syncLoad(true)Column(){Text('[ 程序员必备 ] 最高版本-格子衫').fontSize(12).margin({top:5,bottom:8}).textOverflow({overflow:TextOverflow.Ellipsis}).maxLines(1)Text(){Span('￥666  ').fontSize(10).fontColor('rgb(242, 84, 128)')Span('销量666').fontSize(8)}.width('100%')}.alignItems(HorizontalAlign.Start).padding({left:10})}.width('48%').height(200).backgroundColor('#fff').borderRadius(5).margin({bottom :10})Column(){Image($r('app.media.top4')).borderRadius({topLeft:5,topRight:5}).width('100%').syncLoad(true)Column(){Text('[ 程序员必备 ] 最高版本-格子衫').textOverflow({overflow:TextOverflow.Ellipsis}).maxLines(1).fontSize(12).margin({top:5,bottom:8})Text(){Span('￥666  ').fontSize(10).fontColor('rgb(242, 84, 128)')Span('销量666').fontSize(8)}.width('100%')}.alignItems(HorizontalAlign.Start).padding({left:10})}.width('48%').height(200).backgroundColor('#fff').borderRadius(5).margin({bottom :10})Column(){Image($r('app.media.top1')).borderRadius({topLeft:5,topRight:5}).width('100%').syncLoad(true)Column(){Text('[ 程序员必备 ] 最高版本-格子衫').textOverflow({overflow:TextOverflow.Ellipsis}).maxLines(1).fontSize(12).margin({top:5,bottom:8})Text(){Span('￥666  ').fontSize(10).fontColor('rgb(242, 84, 128)')Span('销量666').fontSize(8)}.width('100%')}.alignItems(HorizontalAlign.Start).padding({left:10})}.width('48%').height(200).backgroundColor('#fff').borderRadius(5).margin({bottom :10})Column(){Image($r('app.media.top2')).borderRadius({topLeft:5,topRight:5}).width('100%').syncLoad(true)Column(){Text('[ 程序员必备 ] 最高版本-格子衫').textOverflow({overflow:TextOverflow.Ellipsis}).maxLines(1).fontSize(12).margin({top:5,bottom:8})Text(){Span('￥666  ').fontSize(10).fontColor('rgb(242, 84, 128)')Span('销量666').fontSize(8)}.width('100%')}.alignItems(HorizontalAlign.Start).padding({left:10})}.width('48%').height(200).backgroundColor('#fff').borderRadius(5).margin({bottom :10})Column(){Image($r('app.media.top3')).borderRadius({topLeft:5,topRight:5}).width('100%').syncLoad(true)Column(){Text('[ 程序员必备 ] 最高版本-格子衫').textOverflow({overflow:TextOverflow.Ellipsis}).maxLines(1).fontSize(12).margin({top:5,bottom:8})Text(){Span('￥666  ').fontSize(10).fontColor('rgb(242, 84, 128)')Span('销量666').fontSize(8)}.width('100%')}.alignItems(HorizontalAlign.Start).padding({left:10})}.width('48%').height(200).backgroundColor('#fff').borderRadius(5).margin({bottom :10})Column(){Image($r('app.media.top5')).borderRadius({topLeft:5,topRight:5}).width('100%').syncLoad(true)Column(){Text('[ 程序员必备 ] 最高版本-格子衫').textOverflow({overflow:TextOverflow.Ellipsis}).maxLines(1).fontSize(12).margin({top:5,bottom:8})Text(){Span('￥666  ').fontSize(10).fontColor('rgb(242, 84, 128)')Span('销量666').fontSize(8)}.width('100%')}.alignItems(HorizontalAlign.Start).padding({left:10})}.width('48%').height(200).backgroundColor('#fff').borderRadius(5).margin({bottom :10})}}.width('100%').height('100%').backgroundColor('#f1f1f1').padding(10)}
}

三.总结

本章主要学习了使用column和row去实现线性布局和弹性布局组件Flex,弹性布局在某些场景下超强的布局能力,当然我们在开发页面过程中还是首选线性布局,因为线性布局就是从弹性布局的基础上优化的一种布局方式,可以提高我们页面的性能


http://www.mrgr.cn/news/25961.html

相关文章：

  • 美创获评CNVD年度原创漏洞发现贡献单位！
  • springboot-创建连接池
  • 派遣函数 - 跟踪IRP的利器/RPTrace
  • 新书速览|JavaScript前端开发与实例教程（微课视频版）（第2版）
  • Kafka 实战演练：创建、配置与测试 Kafka全面教程
  • 最好用的 Redis 可视化工具，不愧是官方出品，功能确实强大（带私活源码）
  • element select + tree
  • 跨境电商，一人搞定？自从有了这个AI工具，赚遍全球市场
  • Linux云计算 |【第三阶段】PROJECT1-DAY2
  • “xi” 和 “dbscan” 在OPTICS聚类中是什么意思
  • 提升LLM能力表现的四种AI代理策略
  • JavaScript控制语句和函数的使用
  • 2024年道路运输安全员考试题库及答案
  • SRT3D: A Sparse Region-Based 3D Object Tracking Approach for the Real World
  • C++速通LeetCode第6题-环形链表
  • 无人机建模详解！！！
  • 【机器学习】结构学习的基本概念以及基于约束的结构学习和基于评分的结构学习
  • EE trade：沙金是黄金吗
  • [网络]http/https的简单认识
  • 外贸获客：主动开发有用吗？