OpenHarmony实战开发-如何开发自适应布局

最新推荐文章于 2024-08-05 21:34:12 发布
最新推荐文章于 2024-08-05 21:34:12 发布
阅读量649 收藏 15
点赞数 17
分类专栏： HarmonyOS 鸿蒙 OpenHarmony 文章标签： OpenHarmony 鸿蒙开发 harmonyos 鸿蒙零基础 HarmonyOS 鸿蒙 鸿蒙工程师
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_70749039/article/details/139221743
版权
鸿蒙 同时被 3 个专栏收录
658 篇文章 13 订阅
订阅专栏
HarmonyOS
651 篇文章 6 订阅
订阅专栏
OpenHarmony
646 篇文章 7 订阅
订阅专栏

场景说明

开发者经常需要将一个应用适配到不同的设备上运行。为了保证用户的浏览体验，就需要根据不同设备的屏幕尺寸设计相应的UI布局变化。常见的如阅读软件，在小屏上显示一页内容，在大屏设备上就可以显示两页内容，这样才能给用户更好的阅读体验。 针对上述场景，OpenHarmony为开发者提供了较为灵活的自适应布局能力，本文将为大家做一个简单的介绍。

两个重要的自适应布局组件

使用OpenHarmony进行自适应布局的开发离不开以下两个组件：GridRow、GridCol。

  • GridRow用来将屏幕等分为特定列数，并设置区分屏幕大小的临界点（breakpoints），比如可以将屏幕列数根据屏幕大小划分为：小屏设备4列，中屏8列，大屏12列（假设屏幕宽度<=520vp为小屏，520vp<屏幕宽度<=840vp为中屏，屏幕宽度>840vp为大屏）。那么就可以将520vp和840vp设置为临界点，当屏幕尺寸由[0，520vp]区间跨越到[520vp，840vp]区间时，屏幕划分的列数也会由4列变为8列。临界点的详细介绍可参考GridRow指南。
  • GridCol是GridRow的子组件，可以根据屏幕大小设置其所覆盖的列数，那么GridCol中的子组件就可以相应的随屏幕的大小变化而变化。比如界面中有一个搜索框，我们希望其长度在小屏设备上占2列，中屏设备占4列，大屏设备占8列，那么就可以将搜索框放在一个GridCol组件中，并设置GridCol组件在小、中、大设备上所占的列数分别为2、4、8。

可参考如下GridRow和GridCol的示意图理解两者之间的关系：

adaptive-ui

开发示例

接下来用一个示例来展示GridRow和GridCol是怎么协同实现自适应布局的。

页面元素

页面中包含一个文本框，一个搜索框，一个滑动条。

实现效果

  • 小屏页面时，文本框、搜索框和滚动条纵向排列，搜索框和滚动条跟屏幕等宽，滚动条一次显示一个页面。
  • 当拖动页面至中屏大小时，文本框和搜索框在一行显示，滚动条一次显示两个页面。

标题效果图如下：

在这里插入图片描述

开发步骤

开发步骤中仅展示相关步骤代码，全量代码请参考完整代码章节的内容。

1.使用GridRow对屏幕进行划分，本例按照不同屏幕大小进行如下划分：最小屏4列、小屏4列、中屏8列。设置最小屏到小屏，小屏到中屏两个断点（最小屏到小屏的断点本例效果没有演示）

GridRow({
  // 划分屏幕：最小屏4列、小屏4列、中屏8列
  columns:{xs: 4, sm: 4, md: 8},
  gutter:{x:$r('app.float.gutter_home')},
  // 设置最小屏到小屏，小屏到中屏两个断点
  breakpoints: { value: ["320vp", "520vp"] }
}){
//...
}
.height("100%")
.width("100%")
.padding({top:10,bottom:10,left:10,right:10})

2.补充UI元素，将文本框、搜索框、滑动条放在GridCol中，GridCol为GridRow的子组件。

GridRow({
  // 划分屏幕：最小屏4列、小屏4列、中屏8列
  columns:{xs: 4, sm: 4, md: 8},
  gutter:{x:$r('app.float.gutter_home')},
  // 设置最小屏到小屏，小屏到中屏两个断点
  breakpoints: { value: ["320vp", "520vp"] }
}){

  // 文本框：首页
  GridCol(){
    Row() {
      Text("首页")
       //...
    }
  }
  .height(56)
  .margin({ bottom: 8})

  // 搜索框
  GridCol(){
    Search({placeholder:'搜索...'})
      //...
  }
  .height(48)

  // 滚动条
  GridCol(){
    Swiper(){
      //...
    }
    .height(144)
    .itemSpace(12)
    .autoPlay(true)
    .displayCount(this.currentbp == 'md' ? 2 : 1)
  }
  .height(144)
}
.height('100%')
.width('100%')
.padding({top:10,bottom:10,left:10,right:10})

3.分别设置文本框、搜索框、滚动条所在GridCol在不同屏幕尺寸下所占的列数。

  • 由于小屏时文本框、搜索框和滚动条纵向排列，且搜索框和滚动条跟屏幕等宽，所以可以让三个元素占满屏幕划分的列数，即4列。
  • 中屏大小时，文本框和搜索框在一行显示，此时屏幕总共划分为8列，所以可以让文本框占2列，搜索框占6列（只要两个元素占用的列数之和小于8都可以在一行显示）。
  • 中屏大小时，滚动条一次显示两个页面。滚动条占满8列，然后通过displayCount属性控制显示的页数。

代码如下：

GridRow({
  // 划分屏幕：最小屏4列、小屏4列、中屏8列
  columns:{xs: 4, sm: 4, md: 8},
  gutter:{x:$r('app.float.gutter_home')},
  // 设置最小屏到小屏，小屏到中屏两个断点
  breakpoints: { value: ["320vp", "520vp"] }
}){

  // 文本框：首页
  // 小屏sm：4列，中屏md：2列
  GridCol({span:{ xs: 2, sm: 4, md: 2}}){
    Row() {
      Text("首页")
       //...
    }
  }
  .height(56)
  .margin({ bottom: 8})

  // 搜索框
  // 小屏sm：4列，中屏md：6列
  GridCol({span:{xs: 2, sm: 4, md: 6}}){
    Search({placeholder:'搜索...'})
      //...
  }
  .height(48)

  // 滚动条
  // 小屏sm：4列，中屏md：8列
  GridCol({span:{ xs: 4, sm: 4, md:8 }}){
    Swiper(){
      //...
    }
    .height(144)
    .itemSpace(12)
    .autoPlay(true)
    // 小屏时显示一个页面，中屏时显示两个页面
    .displayCount(this.currentbp == 'md' ? 2 : 1)
  }
  .height(144)
}
.height('100%')
.width('100%')
.padding({top:10,bottom:10,left:10,right:10})
// 获取断点
.onBreakpointChange((breakpoint)=>{
  this.currentbp = breakpoint
})

完整代码

本例完整代码如下： 示例中用到的资源请替换为开发者本地资源。

//AdaptiveUI.ets
@Entry
@Component
export struct HomePage{
  @State currentbp: string = ''

  build(){
    GridRow({
      // 划分屏幕：最小屏4列、小屏4列、中屏8列
      columns:{xs: 4, sm: 4, md: 8},
      gutter:{x:24},
      // 设置最小屏到小屏，小屏到中屏两个断点
      breakpoints: { value: ["320vp", "520vp"] }
    }){
    
      // 文本框：首页
      // 小屏sm：4列，中屏md：2列
      GridCol({span:{ xs: 2, sm: 4, md: 2}}){
        Row() {
          Text("首页")
            .fontSize(24)
            .fontWeight(500)
            .width('100%')
            .margin({
              top: 12,
              bottom: 12,
              left: 12
            })
        }
      }
      .height(56)
      .margin({ bottom: 8})
    
      // 搜索框
      // 小屏sm：4列，中屏md：6列
      GridCol({span:{xs: 2, sm: 4, md: 6}}){
        Search({placeholder:'搜索...'})
          .width('100%')
          .height(40)
          .margin({ bottom: 8})
          .placeholderFont({ size: 16 })
      }
      .height(48)
    
      // 滚动条
      // 小屏sm：4列，中屏md：8列
      GridCol({span:{ xs: 4, sm: 4, md:8 }}){
        Swiper(){
          ForEach(SwiperList, (item: CardItem) => {
            Stack({ alignContent: Alignment.TopStart }) {
              Image(item.img)
                .width('100%')
                .height('100%')
                .borderRadius(16)
                .objectFit(ImageFit.Cover)
    
              Column() {
                Text(item.title)
                  .fontSize(16)
                  .fontColor(Color.White)
                  .margin({ bottom: 4 })
                Text(item.info)
                  .fontSize(12)
                  .fontColor(Color.White)
                  .opacity(0.6)
              }
              .alignItems(HorizontalAlign.Start)
              .margin({ top: 20, left: 14 })
            }
          }, item => JSON.stringify(item))
        }
        .height(144)
        .itemSpace(12)
        .autoPlay(true)
        // 小屏时显示一个页面，中屏时显示两个页面
        .displayCount(this.currentbp == 'md' ? 2 : 1)
      }
      .height(144)
    
    }
    .height('100%')
    .width('100%')
    .padding({top:10,bottom:10,left:10,right:10})
    // 获取断点
    .onBreakpointChange((breakpoint)=>{
      this.currentbp = breakpoint
    })
  }
}

我这边特意整理了《鸿蒙语法ArkTS、TypeScript、ArkUI、实战开发视频教程》以及《鸿蒙生态应用开发白皮书V2.0PDF》《鸿蒙开发学习手册》（共计890页）鸿蒙开发资料等…希望对大家有所帮助：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

OpenHarmony APP开发教程步骤：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

鸿蒙生态应用开发白皮书V2.0PDF：https://docs.qq.com/doc/DZVVkRGRUd3pHSnFG

在这里插入图片描述

应用开发中级就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

应用开发中高级就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

南北双向高工技能基础：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

全网首发-工业级 南向设备开发就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

《鸿蒙开发学习手册》：

如何快速入门：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.基本概念
2.构建第一个ArkTS应用
3.……
在这里插入图片描述

开发基础知识：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……
在这里插入图片描述

基于ArkTS 开发：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……
在这里插入图片描述

不入流HarmonyOS开发
关注
专栏目录
OpenHarmony实战开发-弹性布局 (Flex)
2401_82546228的博客
04-26 399
弹性布局（Flex）提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。常用于页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等。
OpenHarmony实战开发-栅格布局 (GridRow/GridCol)
2401_82546228的博客
04-26 1058
栅格布局是一种通用的辅助定位工具，对移动设备的界面设计有较好的借鉴作用。主要优势包括：
OpenHarmony 简介：使用鸿蒙操作系统，开发者能做的是啥呢，学习NodJS，可以开发应用了。后续慢慢学习，赶紧去加星星。
热门推荐
freewebsys的专栏
09-11 1万+
目录前言1，关于鸿蒙2，使用地址3，gitee代码4，总结 前言 本文的原文连接是: https://blog.csdn.net/freewebsys/article/details/81665552 未经博主允许不得转载。 博主地址是：http://blog.csdn.net/freewebsys 1，关于鸿蒙 OpenHarmony是开放原子开源基金会（OpenAtom Foundation）旗下开源项目，定位是一款面向全场景的开源分布式操作系统。 OpenHarmony在传统的单设备系统能力的基础
鸿蒙HarmonyOS和OpenHarmony傻傻分不清？
weixin_42082058的博客
04-04 703
OpenHarmony的这个“发动机”是开源的，这意味着其他厂商可以自由地拿去，根据自己的需求安装到自己的“车身”上，可能是大型SUV，也可能是小型经济车，还可以对“发动机”进行调校，以适应不同的性能需求。想象一下，HarmonyOS就像是华为生产的一辆完整的汽车，这辆汽车设计精良，内饰豪华，功能齐全，有自家的导航系统，智能联网功能等，而且它是专门为特定消费者群体设计的，比如销售给华为手机用户，或者与特定的硬件和服务搭配使用。我们可以把HarmonyOS和OpenHarmony的关系比作汽车和发动机。
OpenHarmony实战开发：一多导航栏
最新发布
shudaoshanBBQ的博客
08-05 1008
本示例使用一次开发多端部署中介绍的自适应布局能力和响应式布局能力进行多设备（或多窗口尺寸）适配...........
鸿蒙HarmonyOS实战-ArkUI组件（GridRow/GridCol）
shudaoshanQAQ的博客
01-04 2392
如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。想要获取文中提到的学习资料，请点击→全套鸿蒙HarmonyOS学习资料或者关注小编后私信回复【666】也可获取资料哦~~
OpenHarmony与HarmonyOS联系与区别
qq_40207692的博客
02-28 815
OpenHammony是由开放原子开源基金会(OpenAtom Foundation)孵化及运营的,开源项目么，开放原子开源基金会由华为、阿里、腾讯、百度、浪潮、招商银行、360等十家互联网企业共同发起组建。目标是面向全场景、全连接、全智能时代，基于开源的方式，搭建-个智能终端设备操作系统的框架和平台，促进万物互联产业的繁荣发展。
已饱和，未来程序员真没法再干了？_程序员干不了活(1)，HarmonyOS鸿蒙 基础面试
2401_84181501的博客
04-15 464
是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
OpenHarmony实战开发-如何实现文本显示 (Text/Span)
2401_82546228的博客
04-27 935
Text是文本组件，通常用于展示用户视图，如显示文章的文字。
OpenHarmony实战开发-使用一次开发多端部署实现一多音乐专辑主页
2401_82546228的博客
04-03 640
本示例展示了音乐专辑主页。
OpenHarmony实战开发-使用一次开发多端部署实现一多音乐典型场景
2401_82546228的博客
04-03 789
本示例展示了音乐"推荐"与"我的歌单" 两个Tab页签内容。
熊磊：成功移植 OpenHarmony 到多套开发板，是最开心的事
OpenHarmony_dev的博客
05-17 1966
编者按：在 OpenHarmony 生态发展过程中，涌现了大批优秀的代码贡献者，本专题旨在表彰贡献、分享经验，文中内容来自嘉宾访谈，不代表 OpenHarmony 工作委员会观点。 熊磊 华为技术有限公司 OS高级开发工程师 OpenAtom OpenHarmony（以下简称“OpenHarmony”）是由开放原子开源基金会孵化及运营的开源项目，每一位开发者都可以基于 OpenHarmony 做开发。自成立以来，OpenHarmony 吸引了众多开发者的加入，现有 6 大开发者社区专区建
openhomeny鸿蒙调用so示例（亲测有效）
szdenny的博客
04-09 1639
oh-package.json5：提供so名称和jni文件的配置。2.9、运行到模拟器之后的效果，点击我调用so api。2.7、如何引用so的api，打开Index.ets。2.5、选择entry，鼠标右键，创建libs目录。CMakeLists.txt：提供编译so的配置。1.2、选择Native C++，点击Next。2、在新项目如何引用so并调用对应的api。index.d.ts：提供jni接口的定义。2.1、如何引用编译成功的so。
OpenHarmony轻量系统开发【14】使用语音控制鸿蒙小车
连志安
02-10 5012
摘要：本文简单介绍如何使用语音控制鸿蒙小车 适合群体：适用于润和Hi3861开发板 文中所有代码仓库：https://gitee.com/qidiyun/hihope-3861-smart-home-kit 14.1 讯飞语音识别 之前我们已经有一篇文章讲了如何驱动鸿蒙小车，通过网络控制小车的运行。 基于鸿蒙系统 + Hi3861 的wifi小车，可以通过电脑、手机控制 这一篇我们来试点不一样的：使用语音控制鸿蒙小车。 附件提供可以直接烧录的鸿蒙镜像、修改后的手机java源码。 另.
openharmony开发流程梳理
Hero_rong的博客
03-17 1769
参考了南先生的博客，原文地址https://blog.csdn.net/nanzhanfei/article/details/121951919 wsl安装 1.打开设置 -> 安全和更新 -> 开发者选项，选择为“开发人员模式”； 2.Win + R运行 control appwiz.cpl 指令,在启用或关闭Windows功能中勾选适用于Linux的Windows子系统和虚拟机平台两项启用，重启（注：没有虚拟机平台的，请升级Windows系统,Win10 版本号为 2004（内.
OpenHarmony标准设备应用开发（三）——分布式数据管理
OpenHarmony_dev的博客
04-07 7273
（以下内容来自开发者分享，不代表 OpenHarmony 项目群工作委员会观点） 邢碌 上一章，我们通过分布式音乐播放器、分布式炸弹、分布式购物车，带大家讲解了 OpenAtom OpenHarmony（以下简称“OpenHarmony”）中，相关控件在布局中如何使用，以及在 OpenHarmony 中如何实现音乐播放，显示动画，转场动画（页面间转场）等功能。 本章是 OpenHarmony 标准设备应用开发的第三篇文章，将会在前面两章的基础上给大家讲解分布式数据管理在多台设备间，当数.
2024年鸿蒙最全鸿蒙HarmonyOS实战-ArkUI组件（GridRow GridCol）_gridview 鸿蒙，体系面试一般问些什么
2401_84853495的博客
05-10 776
)3、公用@Entry@Componentbuild() {Row() {Text(})若只设置sm, md的栅格总列数，则较小的尺寸使用默认columns值12，较大的尺寸使用前一个尺寸的columns。这里只设置sm:4, md:8，则较小尺寸的xs:12，较大尺寸的参照md的设置，lg:8, xl:8, xxl:8。
鸿蒙一次开发，多端部署（九）应用市场首页
1
03-22 1225
本小节将以应用市场首页为例，介绍如何使用自适应布局能力和响应式布局能力适配不同尺寸窗口。
OpenHarmony开发学习：【源码下载和编译】
2301_76813281的博客
04-12 878
下载源码基本上没有太多坑，可以很顺利的进行编译源码主要的一个大坑是，默认版本的。
ZYNQ-7020平台自适应陷波器设计
"该资源主要涉及2017年全国大学生电子设计大赛中的自适应滤波器设计，参赛者利用ZYNQ-7020平台构建了一个自适应陷波器，目标是过滤掉有用信号带宽内的干扰信号。设计包括模拟方法实现的加法器和移相器，以及数字方案...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值