【鸿蒙开发从0到1 day10】

news2025/2/26 7:19:06

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.coloradmin.cn/o/2130993.html

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

相关文章

海鲜市场|基于springboot的网络海鲜市场系设计与实现(附项目源码+论文+数据库）

海鲜市场|基于springboot的网络海鲜市场系设计与实现(附项目源码+论文+数据库）

私信或留言即免费送开题报告和任务书（可指定任意题目） 目录 一、摘要 二、相关技术 三、系统设计 四、数据库设计 五、核心代码 六、论文参考 七、源码获取 一、摘要 计算机网络发展到现在已经好几十年了，在理论上面已…
阅读更多...
HyperWorks二维网格划分及拓扑改进

HyperWorks二维网格划分及拓扑改进

Step 01：载入模型 Exercise_3a.hm。 Step 02：2D 网格划分。 进入 automesh 面板。 图 3-13 设置 automesh 面板网格控制参数 (2) 指定 element size 为 5，根据图 3-13 设置网格控制参数。 (3) 查看网格。 图 3-14 新创建的网格模型 网格…
阅读更多...
计算机组成原理(二) —— Cache 高速缓存

计算机组成原理(二) —— Cache 高速缓存

这篇主要讲一下高速缓存，涉及到高速缓存的几种形式，缓存友好代码注意事项，多处理器下缓存的同步机制。 文章目录 存储器层次结构高速缓存存储器通用的高速缓存存储器组织结构直接映射高速缓存组选择行匹配字选择不命中时的行替换冲突不命中 组…
阅读更多...
半个月赚3000+，用AI做仙侠场景账号，全网分发

半个月赚3000+，用AI做仙侠场景账号，全网分发

那些看过的仙侠剧、修仙小说，玩过的仙侠游戏，你还记得吗？ 仙侠类型之所以让人津津乐道，除了不同于普通人的人物形象塑造以及跌宕起伏的剧情之外，美轮美奂的仙境场景也是重中之重。所以，每个人心中都有独属于…
阅读更多...
Qt Model/View之Model

Qt Model/View之Model

在检查如何处理选择之前，您可能会发现检查模型/视图框架中使用的概念很有用。 基本概念 在模型/视图架构中，模型提供了一个标准接口，用于视图和委托访问数据。在Qt中，标准接口由QAbstractItemModel类定义。无论数据项如何存储在…
阅读更多...
ListBox显示最新数据、左移和右移操作

ListBox显示最新数据、左移和右移操作

1、程序 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.IO; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms; using static Sys…
阅读更多...
《餐饮世界》是什么级别的期刊？是正规期刊吗？能评职称吗？

《餐饮世界》是什么级别的期刊？是正规期刊吗？能评职称吗？

​问题解答 问：《餐饮世界》是不是核心期刊？ 答：不是，是知网收录的正规学术期刊。 问：《餐饮世界》级别？ 答：国家级。主管单位： 中国商业联合会 主办单位&am…
阅读更多...
b√最大矩阵和

b√最大矩阵和

题目描述 给定一个二维整数矩阵&#xff0c;要在这个矩阵中选出一个子矩阵. 使得这个子矩阵内所有的数字和尽量大&#xff0c;我们把这个子矩阵称为和最大子矩阵 子矩阵的选取原则是原矩阵中一块相互连续的矩形区域。 输入描述 输入的第一行包含2个整数n,m(1< n,m< 10…
阅读更多...
Mysql连接不上的问题？

Mysql连接不上的问题？

Mysql服务器本地能访问&#xff0c;但是外部连接报错如下&#xff1a;显然我也知道这就是一个权限问题&#xff0c;但是在网上百度的方法要么就是不生效&#xff0c;要么就是执行命令报错&#xff0c;很抓狂&#xff5e;这里提供精准的解决方案&#xff1a;SELECT User, Host F…
阅读更多...
EV代码签名证书签名指南，签名要求、签名步骤一览

EV代码签名证书签名指南，签名要求、签名步骤一览

作为软件开发者&#xff0c;在软件分发之前&#xff0c;为软件应用程序进行代码签名&#xff0c;可标识开发者身份&#xff0c;消除“未知发布者”警告&#xff0c;确保代码完整性&#xff0c;有利于应用程序安全分发&#xff0c;也可以让用户放心下载。而为软件应用程序进行代…
阅读更多...
【C语言从不挂科到高绩点】17-C语言中的宏定义

【C语言从不挂科到高绩点】17-C语言中的宏定义

Hello&#xff01;彦祖们&#xff0c;俺又回来了&#xff01;&#xff01;&#xff01;&#xff0c;继续给大家分享 《C语言从不挂科到高绩点》课程!! 本节将为大家讲解C语言中的函数&#xff1a; 本套课程将会从0基础讲解C语言核心技术&#xff0c;适合人群&#xff1a; 大学…
阅读更多...
取消Cursor的注释斜体字风格

取消Cursor的注释斜体字风格

1. 打开settings.json 2. 添加如下代码 "editor.tokenColorCustomizations": {"textMateRules": [{"name": "Comment","scope": ["comment","comment.block","comment.block.documentation"…
阅读更多...
Vert.x HttpClient调用后端服务时使用Idle Timeout和KeepAlive Timeout的行为分析

Vert.x HttpClient调用后端服务时使用Idle Timeout和KeepAlive Timeout的行为分析

其实网上有大量讨论HTTP长连接的文章&#xff0c;而且Idle Timeout和KeepAlive Timeout都是HTTP协议上的事情&#xff0c;跟Vert.x本身没有太大关系&#xff0c;只不过最近在项目上遇到了一些问题&#xff0c;用到了Vert.x的HttpClient&#xff0c;就干脆总结一下&#xff0c;留…
阅读更多...
从Apple Intelligence到IoT Intelligence，端侧生成式AI时代加速到来

从Apple Intelligence到IoT Intelligence，端侧生成式AI时代加速到来

9月10日凌晨1点&#xff0c;苹果新品发布会如期举行&#xff0c;全新iPhone16系列成为苹果生态中真正意义上的第一款原生AI手机&#xff0c;在第二代3nm工艺A18和A18 Pro芯片的加持下&#xff0c;iPhone16系列能够容纳并快速运行以Apple Intelligence为中心的生成式AI功能在手机…
阅读更多...
铭顺元宇宙时代到来，数字人应用案例分享

铭顺元宇宙时代到来，数字人应用案例分享

近年来&#xff0c;随着技术的不断发展&#xff0c;数字人的功能和表现力也在不断提升&#xff0c;形形色色的虚拟数字人正代替真人&#xff0c;扮演着代言人、主播、客服和智能助理的角色&#xff0c;涉及文旅、电商、金融等多个行业。作为随着AI技术在数字人产业中的发展&…
阅读更多...
远程桌面内网穿透是什么？有什么作用？

远程桌面内网穿透是什么？有什么作用？

远程桌面内网穿透指的是通过特定技术手段&#xff0c;将处于内网中的电脑或服务器&#xff0c;通过外部网络&#xff08;互联网&#xff09;进行访问。内网穿透的主要作用是解决在内网环境下&#xff0c;远程设备与外部互联网之间的连接问题&#xff0c;允许用户从外部访问内网…
阅读更多...
硬核，这款小而美的国产操作系统开源了！（带私活源码）

硬核，这款小而美的国产操作系统开源了！（带私活源码）

今天给大家介绍的是硬核的国产物联网操作系统 RT-Thread&#xff0c;内容很硬核&#xff0c;可以让大家捡起一些大学期间学到的知识&#xff0c;也能让自己对于操作系统有更多的理解。 项目介绍 RT-Thread 诞生于 2006 年&#xff0c;是一款以开源的物联网操作系统。主要采用…
阅读更多...
07 vue3之组件及生命周期

07 vue3之组件及生命周期

组件基础 每一个.vue 文件呢都可以充当组件来使用 每一个组件都可以复用 组件的生命周期 简单来说就是一个组件从创建 到 销毁的 过程 成为生命周期 在我们使用Vue3 组合式API 是没有 beforeCreate 和 created 这两个生命周期的 onBeforeMount() 在组件DOM实际渲染安装之前…
阅读更多...
一个未解决的漏洞：actuator字符绕过漏洞

一个未解决的漏洞：actuator字符绕过漏洞

最近遇到了安全部门派发的actuator泄漏漏洞&#xff0c;领导希望不暴露到外网上&#xff0c;对于内网需要认证才可以访问。 要想不暴露到外网上&#xff0c;就需要在网络层面做拦截&#xff0c;比如nginx和apisix上做代理配置。 一般的情况都可以应对&#xff0c;就是对于http…
阅读更多...
CentOS镜像源更新

CentOS镜像源更新

如果 CentOS 7.9 的官方镜像源已不维护&#xff0c;你可以使用以下方法更新&#xff1a; 切换到其他镜像源&#xff1a;使用 CentOS 镜像站点或第三方镜像源&#xff0c;如 EPEL&#xff08;Extra Packages for Enterprise Linux&#xff09;。修改 /etc/yum.repos.d/CentOS-Ba…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023