【HarmonyOS实战开发】鸿蒙-自适应布局解析

于 2024-07-25 21:31:11 发布
阅读量849 收藏 11
点赞数 17
分类专栏： 鸿蒙 安卓 前端 文章标签： harmonyos 华为 android 鸿蒙 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HarmonyOS007/article/details/140700478
版权
鸿蒙 同时被 3 个专栏收录
33 篇文章 0 订阅
订阅专栏
安卓
33 篇文章 0 订阅
订阅专栏
前端
33 篇文章 0 订阅
订阅专栏

自适应布局

1. 拉伸能力

拉伸能力通过flexGrow和flexShrink属性实现，flexGrow拉伸，flexShrink收缩，通过给定份数，实现收或缩所占相对父容器的大小

Row(){
    Row()
      .width(200)
      .height(200)
      .backgroundColor(Color.Red)
      .border({ width: 4, color: Color.Grey })
      .flexGrow(2)
      .flexShrink(1)

    Row()
      .width(200)
      .height(200)
      .backgroundColor(Color.Pink)
      .border({ width: 4, color: Color.Grey })
      .flexShrink(2)
      .flexGrow(1)
  }

2. 均分能力

均分能力通过容器组件的justifyContent属性实现，其属性参数的FlexAlign枚举，实现三种不同的均分能力

●SpaceBetween：父组件的首尾子组件与父组件首尾对齐，其他子组件平均分配剩余空间
●SpaceAround：每个子组件左右各有间隙，导致相邻间隙是头部或尾部间隙的2倍
●SpaceEvenly：子组件在父组件中均匀分布，子组件间隔相等

@Builder
aroundBox() {
  Column({ space: 10 }) {
    Text('around')
      .fontSize(26)
    Row() {
      Row()
        .width(100)
        .height(100)
        .backgroundColor(Color.Brown)
      Row()
        .width(100)
        .height(100)
        .backgroundColor(Color.Blue)
      Row()
        .width(100)
        .height(100)
        .backgroundColor(Color.Green)
      Row()
        .width(100)
        .height(100)
        .backgroundColor(Color.Orange)
    }
    .width("100%")
    .justifyContent(FlexAlign.SpaceAround)
  }
}

@Builder
bewteenBox() {
  Column({ space: 10 }) {
    Text('bewteen')
      .fontSize(26)
    Row() {
      Row()
        .width(100)
        .height(100)
        .backgroundColor(Color.Brown)
      Row()
        .width(100)
        .height(100)
        .backgroundColor(Color.Blue)
      Row()
        .width(100)
        .height(100)
        .backgroundColor(Color.Green)
      Row()
        .width(100)
        .height(100)
        .backgroundColor(Color.Orange)
    }
    .width("100%")
    .justifyContent(FlexAlign.SpaceBetween)
  }
}

@Builder
evenlyBox() {
  Column({ space: 10 }) {
    Text('evenly')
      .fontSize(26)
    Row() {
      Row()
        .width(100)
        .height(100)
        .backgroundColor(Color.Brown)
      Row()
        .width(100)
        .height(100)
        .backgroundColor(Color.Blue)
      Row()
        .width(100)
        .height(100)
        .backgroundColor(Color.Green)
      Row()
        .width(100)
        .height(100)
        .backgroundColor(Color.Orange)
    }
    .width("100%")
    .justifyContent(FlexAlign.SpaceEvenly)
  }
}

3.占比能力

占比能力通过子组件宽度百分比或者父组件（容器组件）的layout属性实现

@Builder
percentageBuilder() {
  Text('百分比')
    .fontSize(22)
  Row() {
    Row()
      .width('33.33%')
      .height(100)
      .backgroundColor(Color.Red)
      .border({ width: 4, color: Color.Grey })

    Row()
      .width('33.33%')
      .height(100)
      .backgroundColor(Color.Pink)
      .border({ width: 4, color: Color.Grey })
    Row()
      .width('33.33%')
      .height(100)
      .backgroundColor(Color.Green)
      .border({ width: 4, color: Color.Grey })
  }
  .width(this.containVal)

  this.sliderBuilder()
}

@Builder
layoutWeightBuilder() {
  Text('layoutWeight')
    .fontSize(22)
  Row() {
    Row()
      .layoutWeight(1)
      .height(100)
      .backgroundColor(Color.Red)
      .border({ width: 4, color: Color.Grey })

    Row()
      .layoutWeight(1)
      .height(100)
      .backgroundColor(Color.Pink)
      .border({ width: 4, color: Color.Grey })
    Row()
      .layoutWeight(1)
      .height(100)
      .backgroundColor(Color.Green)
      .border({ width: 4, color: Color.Grey })
  }
  .width(this.containVal)

  this.sliderBuilder()
}

4. 缩放能力

缩放能力通过aspectRatio属性通过设置宽高比，保持图片的完整显示

 Image($r('app.media.ic_video_grid_1'))
    .width('100%')
    .height('100%')
}
// .aspectRatio(1 / 1)
// .aspectRatio(1 / 2)
.aspectRatio(1072 / 616)
.border({ width: 2, color: "#66F1CCB8" })

5. 延伸能力

延伸能力通过List组件和scroll组件实现，超出的内容隐藏，滚动显示，根据容器尺寸的内容显示多个内容

List({ space: 10 }) {
  ForEach(this.appList, (item: NavItem) => {
    ListItem() {
      Column() {
        Image(item.icon)
          .width(48)
          .height(48)
          .margin({ top: 8 })
        Text(item.title)
          .width(64)
          .height(30)
          .lineHeight(15)
          .fontSize(12)
          .textAlign(TextAlign.Center)
          .margin({ top: 8 })
          .padding({ bottom: 15 })
      }
      .width(80)
      .height(102)
    }
    .width(80)
    .height(102)
  })
}
.listDirection(Axis.Horizontal)
.padding({ top: 16, left: 10 })
.width('100%')
.height(118)
.borderRadius(16)
.backgroundColor(Color.White)

scss 代码解读复制代码Scroll() {
  Row({ space: 10 }) {
    ForEach(this.appList, (item: NavItem, index: number) => {
      Column() {
        Image(item.icon)
          .width(48)
          .height(48)
          .margin({ top: 8 })
        Text(item.title)
          .width(64)
          .height(30)
          .lineHeight(15)
          .fontSize(12)
          .textAlign(TextAlign.Center)
          .margin({ top: 8 })
          .padding({ bottom: 15 })
      }
      .width(80)
      .height(102)
    })
  }
}
.scrollable(ScrollDirection.Horizontal)
.edgeEffect(EdgeEffect.Fade)
.padding({ top: 16, left: 10 })
.height(118)
.borderRadius(16)
.backgroundColor(Color.White)

6. 隐藏能力

隐藏能力通过组件的displayPriority属性实现，属性设置权重，当父组件大小不足时，权重高的组件优先显示，权重相同的，会一起显示

Image($r("app.media.ic_public_favor"))
  .width(48)
  .height(48)
  .displayPriority(1)

Image($r("app.media.ic_public_play_last"))
  .width(48)
  .height(48)
  .displayPriority(2)

Image($r("app.media.ic_public_pause"))
  .width(48)
  .height(48)
  .displayPriority(3)

7. 折行能力

折行能力通过Flex组件的wrap属性实现，实现一行无法展示，转换成多行展示

Flex({
  direction: FlexDirection.Row,
  alignItems: ItemAlign.Center,
  justifyContent: FlexAlign.Center,
  wrap: FlexWrap.Wrap
}) {
  ForEach(this.imageList, (item: NavItem) => {
    Column() {
      Image(item.icon)
        .width(80)
        .height(80)
      Text(item.title)
    }
    .margin(10)

  })
}
.backgroundColor('#FFFFFF')
.padding(20)
.width(this.rate * 100 + '%')
.borderRadius(16)

写在最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）文档用来跟着学习是非常有必要的。

这份鸿蒙（HarmonyOS NEXT）文档包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习文档能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习文档

鸿蒙（HarmonyOS NEXT）5.0最新学习路线

在这里插入图片描述

有了路线图，怎么能没有学习文档呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习文档

《鸿蒙 (OpenHarmony)开发入门教学视频》

在这里插入图片描述

《鸿蒙生态应用开发V3.0白皮书》

在这里插入图片描述

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

在这里插入图片描述

《鸿蒙开发基础》

●ArkTS语言
●安装DevEco Studio
●运用你的第一个ArkTS应用
●ArkUI声明式UI开发
.……
在这里插入图片描述

《鸿蒙开发进阶》

●Stage模型入门
●网络管理
●数据管理
●电话服务
●分布式应用开发
●通知与窗口管理
●多媒体技术
●安全技能
●任务管理
●WebGL
●国际化开发
●应用测试
●DFX面向未来设计
●鸿蒙系统移植和裁剪定制
……
在这里插入图片描述

《鸿蒙进阶实战》

●ArkTS实践
●UIAbility应用
●网络案例
……
在这里插入图片描述

获取以上完整鸿蒙HarmonyOS学习文档，请点击→纯血版全套鸿蒙HarmonyOS学习文档

代码改变世界996
关注
  • 17
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【HarmonyOS实战开发】鸿蒙 容器组件解析
HarmonyOS007的博客
07-25 639
这份鸿蒙（HarmonyOS NEXT）文档包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。
鸿蒙（HarmonyOS）性能优化实战-Grid高性能开发
maniuT的博客
04-23 943
在构建大型、复杂应用时，性能优化至关重要。Grid布局作为一种高效布局方式，可以提高页面的均分能力、子组件占比控制能力及自适应布局能力。本文将介绍Grid在高性能开发方面的应用，包括懒加载、cachedCount、组件复用和使用GridLayoutOptions设置GridItem大小等方法，帮助开发者优化Grid布局性能，减少加载和渲染时间，提升用户体验。
鸿蒙（HarmonyOS）应用开发性能优化实战-WaterFlow高性能开发
maniuT的博客
04-23 931
WaterFlow配合LazyForEach渲染控制语法、提前加载数据和组件复用可以达到无限滚动场景性能最优效果。码牛课堂也为了积极培养鸿蒙生态人才，让大家都能学习到鸿蒙开发最新的技术，针对一些在职人员、0基础小白、应届生/计算机专业、鸿蒙爱好者等人群，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开发技术的学习路线。①全方位，更合理的学习路径。
【鸿蒙实战开发】HarmonyOS语法以及各种基础组件
HarmonyOS_666的博客
07-12 819
这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。
HarmonyOS NEXT实战开发：组件导航 (Navigation)
最新发布
hanyanyou的博客
07-25 613
Navigation是路由容器组件，一般作为首页的根容器，包括单栏(Stack)、分栏(Split)和自适应(Auto)三种显示模式............
2024款HarmonyOS教程 Next_HarmonyOS4鸿蒙OS最新入门实战全套教程
yuanlaile的博客
01-02 1025
21 PromptAction (弹窗)以及QRCode、PatternLock、Search、Toggle、Rating组件(40分49秒)22 页面级状态管理 @State、@Prop、@Link、@Provide、@Consume @Watch详解(48分36秒)06 Stack层叠组件 Stack实现浮动按钮、浮动导航以及详解自定义组件的几种方法（36分49秒）HarmonyOS视频教程重磅来袭！04 ArkTS通用属性 布局组件Row、Column以及自定义组件（33分43秒）
ArkUI-X+HarmonyOS Next跨平台App开发
yuanlaile的博客
02-28 1253
ArkUI-X+HarmonyOS Next跨平台App开发
HarmonyOS实战—原子化服务之服务卡片前端开发
热门推荐
weixin_50077637的博客
07-19 1万+
本文正在参与“有奖征文 | HarmonyOS征文大赛” 活动链接 原子化服务前言一、什么是原子化服务？1.概述2.基本要素二、原子化服务之服务卡片1.服务卡片概述2.服务卡片的运作机制三、服务卡片前端混合开发1.使用DevEco Studio创建卡片工程。2.创建一个FormAbility，覆写卡片相关回调函数。3.卡片信息持久化。4.卡片数据交互。5.开发JS卡片页面。6.卡片尺寸适配总结 前言 7月12日，华为官方宣布，HarmonyOS 开发者日定于7月31日在杭州举办，在新技术演讲环节中出现了
HarmonyOS Next开发学习手册——组件导航 (Navigation) (推荐)
maniuT的博客
07-02 1289
Navigation通过 customNavContentTransition 事件提供自定义转场动画的能力，通过如下三步可以定义一个自定义的转场动画。构建一个自定义转场动画工具类CustomNavigationUtils，通过一个Map管理各个页面自定义动画对象CustomTransition，页面在创建的时候将自己的自定义转场动画对象注册进去，销毁的时候解注册；
人工智能-项目实践-自适应学习-自适应学习模型-应用于教育领域-知识图谱
05-25
人工智能-项目实践-自适应学习-自适应学习模型-应用于教育领域-知识图谱 run this demo $python train_dkt.py --dataset ../data/assistments.txt
HarmonyOS应用开发-原子布局能力.docx
06-03
### HarmonyOS应用开发-原子布局能力 #### 一、引言 随着智能设备的多样化发展，屏幕尺寸和形态也呈现出多样化的趋势。为了确保应用程序在各种屏幕尺寸上都能展现出最佳的用户体验，HarmonyOS 提供了一种名为...
HarmonyOS应用开发-原子化布局能力.docx
06-03
### HarmonyOS应用开发中的原子化布局能力解析 #### 一、引言 随着智能设备的多样化发展，不同屏幕尺寸及分辨率的应用场景日益增多。为了更好地适应这种多样性，提高开发效率和用户体验，HarmonyOS推出了一套强大...
HarmonyOS应用开发-AppMultiplier体验分享.docx
06-09
在 HarmonyOS 应用开发中，AppMultiplier 是一个极具创新性的功能，它允许开发者构建能够充分利用设备屏幕空间的应用。这个特性主要通过平行视界（App Multiplier）来实现，为用户提供更加高效和沉浸式的多任务体验...
jQuery事件日历插件calendar--自适应版.js.rar_jq日历事件_js自适应日历_rem自适应布局_万年历 自适
09-23
“rem自适应布局”是现代前端开发中的一个重要概念。REM（root em）是相对于根元素（通常是html元素）字体大小的单位。通过使用rem，我们可以设置元素的大小，使其在整个页面中保持一致的比例缩放，从而实现响应式...
鸿蒙界面开发
qq_46025779的博客
07-23 2332
界面开发界面开发-布局思路属性方法字体颜色文字溢出省略号、行高Image图片组件输入框与按钮综合实训设计资源-svg图标欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入MarkdownText-to-HTML。
鸿蒙9+在TV端焦点封装控制
熊佳龙的博客
07-24 533
鸿蒙自定义Component焦点封装控制
鸿蒙HarmonyOS开发：多种内置弹窗及自定义弹窗的详细使用指南
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
07-25 982
弹窗是移动应用中常见的一种用户界面元素，常用于显示一些重要的信息、提示用户进行操作或收集用户输入。ArkTS提供了多种内置的弹窗供开发者使用，除此之外还支持自定义弹窗，来满足各种不同的需求。不同弹窗的详细使用介绍，消息提示框（showToast）、对话框（showDialog）、警告弹窗（AlertDialog）、操作菜单（showActionMenu）、操作列表弹窗（ActionSheet）、文本滑动选择器弹窗 (TextPickerDialog)、自定义弹窗 (CustomDialog)。
【HarmonyOS】应用推送使用个推SDK如何实现？
我的小窝
07-25 931
鸿蒙应用如何使用个推SDK实现推送功能？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值