【鸿蒙开发从0到1 day10】

于 2024-09-13 10:35:00 发布
阅读量564 收藏 20
点赞数 4
分类专栏： 鸿蒙开发 文章标签： 鸿蒙 html5 harmonyos 华为
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_63713328/article/details/142165517
版权

ArkUI布局高级

一.线性布局

线性布局（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,弹性布局在某些场景下超强的布局能力,当然我们在开发页面过程中还是首选线性布局,因为线性布局就是从弹性布局的基础上优化的一种布局方式,可以提高我们页面的性能

Transcend oneself
关注
专栏目录
HarmonyOS鸿蒙开发指南:基础组件 picker开发指导
sybh的博客
01-09 1080
通过设置Picker的type属性来选择滑动选择器类型，如定义Picker为日期选择器。Picker的hours属性定义时间的展现格式，可选类型有12小时制和24小时制。对Picker添加change和cancel事件，来对选择的内容进行确定和取消。hours属性为12：按照12小时制显示，用上午和下午进行区分；在本场景中，开发者可以自定义填写当前的健康情况来进行打卡。普通选择器设置取值范围时，需要使用数据绑定的方式。hours属性为24：按照24小时制显示。
HarmonyOS鸿蒙开发指南:基于ArkTS开发 公共事件与通知
sybh的博客
01-10 1816
HarmonyOS通过CES（Common Event Service，公共事件服务）为应用程序提供订阅、发布、退订公共事件的能力。公共事件可分为系统公共事件和自定义公共事件。系统公共事件：系统将收集到的事件信息，根据系统策略发送给订阅该事件的用户程序。例如：系统关键服务发布的系统事件（例如：hap安装，更新，卸载等）。自定义公共事件：应用自定义一些公共事件用来实现跨应用的事件通信能力。每个应用都可以按需订阅公共事件，订阅成功且公共事件发布，系统会把其发送给应用。
【鸿蒙开发从0到1 day09】
qq_63713328的博客
09-11 726
本章主要学习了ArkUI中的布局属性,内外边距,边框及边框圆角,背景属性包含背景颜色,背景图片,颜色渐变中的线性渐变和径向渐变,以及阴影效果的设置,最后还解释了我们传入对象时候,为什么有些属性可以选填
【鸿蒙开发从0到1 day05】
qq_63713328的博客
09-03 915
本章主要是学了清除浮动的一些常用方法,还分享了一个开发过程中会用到的一个字体图标,以及它的获取方式平面和空间的转换,线性渐变,css动画
【鸿蒙开发从0到1 day02】
qq_63713328的博客
08-30 521
本章主要是讲解了给页面设置css样式的时候常用的选择器,画盒子,字体倾斜,行高,文本缩进,文本对齐方式,以及css的三大特性和背景图的位置设置
【鸿蒙开发从0到1 day06】
qq_63713328的博客
09-04 445
本章主要学习了移动端开发中,如何从把网页中的图片大小转换成移动端的图片大小,以及移动端中如何将网页端的px单位转成移动端的单位方法,以及在vscode中用到的一些插件
鸿蒙开发学习 day02
qq_52049104的博客
05-17 726
鸿蒙开发学习 day02
HarmonyOS应用开发-显示时间的实现
04-23
HarmonyOS 应用开发-显示时间的实现 HarmonyOS 作为一款开源的操作系统，提供了丰富的开发接口和工具，开发者可以使用 HarmonyOS 开发各种...通过这个示例，我们可以学习到 HarmonyOS 应用的基本开发技术和实现思路。
鸿蒙实训day1
weixin_45799410的博客
05-17 568
今天的主要工作是完成鸿蒙3.0的安装，熟悉鸿蒙的体系和开发模式。根据步骤安装鸿蒙3,0，没有出现非常严重的问题，需要注意的点就是安装OpenHarmony的Sdk和Huawei的Sdk的时候，两个文件的安装路径不能相同，相同的话会导致文件覆盖从而影响后续的安装和使用，后续选择自己所需要的Sdk版本进行下载安装。 点击Next进入基础配置页面，在此页面你可以设置你项目的名称，项目类型（可选择原子服务（不可再分解为更细粒的服务）或者是应用类型），捆绑包名称，保存路径，开发模式（可选择传统编码或者是超越视觉系
中秋之美——html5+css+js制作中秋网页
Timi2019的博客
09-02 2034
八月十五，秋已过半，是为中秋。“但愿人长久，千里共婵娟”，中秋时节，气温已凉未寒，天高气爽，月朗中天，正是观赏月亮的最佳时令。古人把圆月视为团圆的象征，因此，又称八月十五为“团圆节”。
HTML5中下拉框标签`＜select＞`深入全面解析
软考鸭
09-10 1120
下拉框作为HTML5表单的重要元素，其默认样式和功能可能无法满足所有开发者的需求。通过深入了解标签的属性、样式定制方法，以及结合CSS和JavaScript的高度定制技巧，开发者可以创建出符合项目需求、用户体验优良的下拉框组件。希望本文能为开发者在使用和定制下拉框时提供有益的参考。
html5语音转文字实时语音转文字
sxs7970的博客
09-06 529
上传wav格式语音文件进行识别文字
【HarmonyOS】- HAR与HSP区别及使用原则
不靠谱先森的博客
09-08 394
HAR与HSP系统提供了两种共享包，HAR静态共享包和HSP动态共享包。HAR与HSP都是为了实现代码和资源的共享，都可以包含代码、C++库、资源和配置文件，最大的不同之处在于：HAR中的代码和资源跟随使用方编译，如果有多个使用方，它们的编译产物中会存在多份相同拷贝；而HSP中的代码和资源可以独立编译，在运行时进程中代码和资源也只会存在一份。
【鸿蒙 HarmonyOS NEXT】使用屏幕属性display：获取屏幕宽高
weixin_71403100的博客
09-09 1098
✨本人自己开发的开源项目：土拨鼠充电系统✨踩坑不易，还希望各位大佬支持一下，在给我点个Start⭐⭐👍👍GitHub开源项目地址。
鸿蒙轻内核M核源码分析系列十七（2） 异常钩子函数的注册操作
鸿蒙开发知识记录
09-08 1240
本文中所涉及的源码，以内核为例，均可以在开源站点https://gitee.com/openharmony/kernel_liteos_m 获取。鸿蒙轻内核异常钩子模块代码主要在目录下。异常钩子函数的注册、解注册、异常钩子类型定义在。
鸿蒙（API 12 Beta6版）GPU加速引擎服务【自适应VRS】
鸿蒙的技术博客
09-08 916
XEngine Kit提供自适应VRS功能，其通过合理分配画面的计算资源，视觉无损降低渲染频次，使不同的渲染图像使用不同的渲染速率，能够有效提高渲染性能。
HarmonyOS应用开发（ Beta5.0）一杯冰美式的时间“拿捏Grid组件”
weixin_55362248的博客
09-08 1350
​这里呢是采用Grid组件中的控制滚动,里面的rowsTemplate属性为一行且不对列的行数属性进行操作，这样的话就可以控制水平滑动了。
秒验HarmonyOS NEXT集成指南
最新发布
apkkkk的博客
09-12 445
开发工具：DevEco Studio集成方式：在线集成HarmonyOS API支持：>= 12。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Transcend oneself

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

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

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

打赏作者

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

抵扣说明：

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

余额充值