0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

Openharmony中的Flex和Grid布局

OpenHarmony技术社区 来源:OpenHarmony技术社区 作者:韩祥 2022-04-26 10:54 次阅读

Flex 布局

Flex 布局是很常用也是很方便的一种布局模式,此种布局方式已经广泛使用在前端、小程序开发之中。

如果之前已经学习过 Flex 布局,那么在 Openharmony 中也是大同小异的。

用法如下:

容器的常用参数

  • direction:子组件在 Flex 容器上排列的方向,即主轴的方向。

  • wrap:Flex 容器是单行/列还是多行/列排列。

  • justifyContent:子组件在 Flex 容器主轴上的对齐格式。

  • alignItems:子组件在 Flex 容器交叉轴上的对齐格式。

  • alignContent:交叉轴中有额外的空间时,多行内容的对齐方式。仅在 wrap 为 Wrap 或 WrapReverse 下生效。

子组件常用属性(不是所有属性):flexGrow:Flex 容器的剩余空间分配给给此属性所在的组件的比例。

简单的使用:Flex 布局的属性有很多,但是最常用的还是让子组件垂直水平居中,两条属性即可保证子组件垂直水平居中:

Flex({justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center}){
Text('水平垂直居中显示').fontSize(18)
}.width('100%').height('100%')

Flex 也可用于很多常见布局场景,如下图效果:

078ba7be-c481-11ec-bce3-dac502259ad0.png

利用 direction 属性和 flexGrow 配合即可轻松达到上面的布局效果,核心代码段如下:

Flex({direction:FlexDirection.Column}){
Column(){
ForEach(this.ListData,(item)=>{
Text(item).fontSize(18).height(100).width('100%').margin({bottom:5}).backgroundColor('#575da8')
},item=>item)
}.flexGrow(1).backgroundColor('#08ec89').margin({bottom:2}).padding(10)
Flex({alignItems:ItemAlign.Center}){
ForEach(this.navData,(item)=>{
Text(item).fontSize(18).height('100%').flexGrow(1).textAlign(TextAlign.Center).backgroundColor("#18ec08").margin(1)
},item=>item)
}.height(64)
}.width('100%').height('100%')

Flex 还有一个常用的属性是 wrap,可以去配置换行,不过如果是多行建议还是使用 Grid 布局,更加灵活,下面看看 Grid 布局。

Grid 布局

Grid 做前端的同学应该都很熟悉了,翻译成中文为“栅格” , 它将页面划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。

用法如下:

基本概念:网格布局的区域,称为“容器”,容器内部采用网格定位的子元素,称为"项目"。

项目必须使用 Grid 子组件 GridItem 子组件包裹,即 Grid 的子组件必须是 GridItem。

容器属性:

  • columnsTemplate
  • rowsTemplate

这两个属性用于设置当前网格布局的行和列的数量,不设置时默认 1 列行或者 1 列。

可以采用 fr 关键字表示各行和列的比例关系, 以列为例:‘1fr 1fr 2fr’ 将父组件等分为 4 等份,第一列第二列各占 1 份,第三列占两份:

07963cd8-c481-11ec-bce3-dac502259ad0.png

核心代码如下:

@StateNumber:String[]=['0','1','2']
build(){
Grid(){
ForEach(this.Number,(item:string)=>{
ForEach(this.Number,(item:string)=>{
GridItem(){
Text(item)
.fontSize(16)
.backgroundColor(Color.Grey)
.width('100%')
.height('100%')
.textAlign(TextAlign.Center)
}.borderWidth(1)
},item=>item)
},item=>item)
}
.columnsTemplate('1fr1fr2fr')
.rowsTemplate('1fr1fr2fr')
.backgroundColor(Color.Black)
.height(300)
}

这两个属性里面也可使用 px 单位,如将 columnsTemplate 修改:

.columnsTemplate('100px1fr1fr')

展示效果如下:

07aa671c-c481-11ec-bce3-dac502259ad0.pngcolumnsGap 和 rowsGap:这两个属性可以设置行列之间的间距,此处不在赘述。

layoutDirection:LayoutDirection.Row 和 LayoutDirection.Column,不过尝试过后两种值的结果都是按列排布,默认不给属性的话是按行排布,这里应是没有完全支持。

其他属性:看到文档还提供了很多属性,但目前尝试过后没有效果,未支持。

事件:

onScrollIndex(first:number)=>void

当前列表显示的起始位置发生变化会触发这个事件,若要展示效果,则需使布局出现滚动条,可以去掉 rowsTemplate 属性,然后在子组件内部设置高度,然后再添加事件监听:

Grid(){
ForEach(this.Number,(item:string)=>{
ForEach(this.Number,(item:string)=>{
GridItem(){
Text(item)
.fontSize(16)
.backgroundColor(Color.Grey)
.width('100%')
.height(80)
.textAlign(TextAlign.Center)
}
},item=>item)
},item=>item)
}
.columnsTemplate('1fr1fr1fr1fr1fr')
.columnsGap(10)
.rowsGap(10)
.onScrollIndex((first:number)=>{
console.log(first.toString())
})
.backgroundColor(Color.Black)
.height(300)

总结

Grid 布局与 Flex 有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。

Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。

Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。

其实掌握这两种布局方式,页面上面大部分效果都是可以做出来的。当然,当前 Gird 布局还有很多属性是不支持的,相比较与传统的前端 Grid 布局功能上有很多不足,期待 API 更新,完善功能。

审核编辑 :李倩

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • Grid
    +关注

    关注

    0

    文章

    8

    浏览量

    9576
  • OpenHarmony
    +关注

    关注

    25

    文章

    3635

    浏览量

    16051

原文标题:Openharmony中的Flex和Grid布局

文章出处:【微信号:gh_834c4b3d87fe,微信公众号:OpenHarmony技术社区】欢迎添加关注!文章转载请注明出处。

收藏 人收藏

    评论

    相关推荐

    鸿蒙跨端实践-布局方案介绍

    作者:京东科技 刘宁 一、前言 动态化使用 jue 语言(开发风格与 Vue 一致)开发,对于视图的布局采用了标准的Flex 布局方式。对于列表类视图,动态化提供了、、、等标签,将子视图的布局
    的头像 发表于 09-18 10:26 821次阅读
    鸿蒙跨端实践-<b class='flag-5'>布局</b>方案介绍

    基于ArkTS语言的OpenHarmony APP应用开发:HelloOpenharmony

    1、程序简介该程序是基于OpenHarmony标准系统编写的UI应用类:HelloOpenHarmony。本案例是基于API9接口开发。本案例已在OpenHarmony凌蒙派-RK3568开发
    的头像 发表于 09-15 08:09 278次阅读
    基于ArkTS语言的<b class='flag-5'>OpenHarmony</b> APP应用开发:Hello<b class='flag-5'>Openharmony</b>

    pcb设计布局的要点是什么

    在PCB设计布局是一个非常重要的环节,它直接影响到电路的性能、可靠性和成本。以下是关于PCB布局的一些要点,这些要点将帮助您设计出高质量的PCB。 确定设计目标和要求 在开始布局
    的头像 发表于 09-02 14:48 318次阅读

    OpenHarmony项目群技术指导委员会2024年务虚研讨会圆满落幕

    7月19日至20日,OpenHarmony项目群技术指导委员会(后文简称“OpenHarmony TSC”)2024年务虚研讨会于中国厦门顺利召开。 本次会议由OpenHarmony
    的头像 发表于 07-23 10:42 466次阅读
    <b class='flag-5'>OpenHarmony</b>项目群技术指导委员会2024年<b class='flag-5'>中</b>务虚研讨会圆满落幕

    鸿蒙ArkTS声明式开发:跨平台支持列表【Flex布局】 通用属性

    从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 > - 仅当父组件是 Flex、Column、Row 、GridRow时生效。
    的头像 发表于 05-30 14:38 500次阅读
    鸿蒙ArkTS声明式开发:跨平台支持列表【<b class='flag-5'>Flex</b><b class='flag-5'>布局</b>】 通用属性

    鸿蒙ArkUI开发:常用布局【创建网格(Grid/GridItem)】

    网格布局主要用于处理固定行列的UI,也支持动态调整。很类似iOS的UICollectionView。
    的头像 发表于 05-15 16:24 654次阅读
    鸿蒙ArkUI开发:常用<b class='flag-5'>布局</b>【创建网格(<b class='flag-5'>Grid</b>/GridItem)】

    HarmonyOS实战开发-Flex布局性能提升使用指导

    Flex为采用弹性布局的容器。容器内部的所有子元素,会自动参与弹性布局。子元素默认沿主轴排列,子元素在主轴方向的尺寸称为主轴尺寸。 在单行布局场景下,容器里子组件的主轴尺寸长度总和可能
    发表于 05-10 14:26

    HarmonyOS开发ArkUI案例:【常用布局容器对齐方式】

    基于ArkTS扩展的声明式开发范式,实现Flex、Column、Row和Stack四种常用布局容器对齐方式。
    的头像 发表于 05-08 16:47 1477次阅读
    HarmonyOS开发ArkUI案例:【常用<b class='flag-5'>布局</b>容器对齐方式】

    OpenHarmony南向能力征集令

    1、适配过程缺少哪些接口能力或者南向能力,需要OpenHarmony去补齐的?例如内核、编译、器件适配、单板适配等; 2、对标linux,需要OpenHarmony提供哪些能力?比如V4L2
    发表于 04-09 15:32

    OpenHarmonySELinux使用详解

    OpenHarmonySELinux使用详解 目录 1.SELinux简介 2.SELinux概念 3.SELinux模式 4.OHSELinux使用详解 5.OHSELinux
    发表于 04-03 10:43

    OpenHarmony内核编程实战

    编写程序,让开发板在串口调试工具输出”Hello,OpenHarmony“。▍操作在源码的根目录中有名为”applications“的文件,他存放着应用程序样例
    的头像 发表于 03-27 08:31 695次阅读
    <b class='flag-5'>OpenHarmony</b>内核编程实战

    浅谈兼容 OpenHarmony 的 Flutter

    OpenHarmony SIG 组织在 Gitee 开源了兼容 OpenHarmony 的 Flutter。该组织主要用于孵化 OpenHarmony 相关的开源生态项目。     ▲ 仓库地址
    的头像 发表于 02-02 15:22 548次阅读
    浅谈兼容 <b class='flag-5'>OpenHarmony</b> 的 Flutter

    鸿蒙开发实战-(ArkUI)List组件和Grid组件的使用

    简介 Grid组件为网格容器,是一种网格列表,由“行”和“列”分割的单元格所组成,通过指定“项目”所在的单元格做出各种各样的布局Grid组件一般和子组件GridItem一起使用,Grid
    发表于 01-18 20:18

    重庆大学OpenHarmony技术俱乐部正式揭牌成立

    点击蓝字 ╳ 关注我们 开源项目 OpenHarmony 是每个人的 OpenHarmony 1月5日,由OpenAtom OpenHarmony(以下简称“OpenHarmony”)
    的头像 发表于 01-11 21:30 703次阅读
    重庆大学<b class='flag-5'>OpenHarmony</b>技术俱乐部正式揭牌成立

    OpenHarmony技术大会 | OpenHarmony技术俱乐部分论坛嘉宾金句

    点击蓝字 ╳ 关注我们 开源项目 OpenHarmony 是每个人的 OpenHarmony 原文标题:OpenHarmony技术大会 | OpenHarmony技术俱乐部分论坛嘉宾金
    的头像 发表于 11-10 20:25 435次阅读