鸿蒙开发(六)布局概述

    迄今为止,我还没有正式提到布局的概念。但其实我之前的demo里面,已经默认使用到了一种布局,那就是线性布局(Row、Column),这也是DevEco创建项目默认页面里面默认采用的布局。那么本篇,带着大家一起学习下鸿蒙开发的布局,该篇仅仅是概述,更多的是说理论,后面会有专门的文章去进行布局开发实战。

目录

一、布局概述

二、线性布局

三、层叠布局

四、弹性布局

五、相对布局


鸿蒙系列上一篇

鸿蒙开发(五)鸿蒙UI开发概览-CSDN博客文章浏览阅读464次,点赞11次,收藏9次。从用户角度来讲,一个软件拥有好看的UI,那是锦上添花的事情。再精确的算法,再厉害的策略,最终都得通过UI展现给用户并且跟用户交互。那么,本篇一起学习下鸿蒙开发UI基础知识,认识下各种基本控件以及使用方式。https://blog.csdn.net/qq_21154101/article/details/135520456?spm=1001.2014.3001.5501

一、布局概述

    UI开发肯定不是控件的简单堆砌,如果没有采用合适的布局,那么app的UI效果会不那么好看,UI开发离不开布局。那么,布局的作用是什么呢?布局就是用来管理页面控件的大小和位置。ArkUI提供了8种布局(有点多):

布局

应用场景

线性布局(LinearLayout)

布局中的控件横向或纵向线性排列时使用此布局。

层叠布局(StackLayout)

布局中的控件需要有堆叠效果时使用此布局。

弹性布局(FlexLayout)

与线性布局类似,弹性布局默认能够使控件压缩或拉伸,在控件需要计算拉伸或压缩比例时优先使用此布局。

相对布局(RelativeLayout)

布局中的控件通过设置属性与布局或布局内其他控件位置对齐。

栅格布局(GridRow、GridCol)

栅格是多设备场景下通用的辅助定位工具,通过将空间分割为有规律的栅格。推荐手机、大屏、平板等不同设备,内容相同但布局不同时使用。

列表(List)

横向或纵向展示可滚动的信息。

网格(Grid)

推荐在需要按照固定比例或者均匀分配空间的布局场景下使用。

轮播(Swiper)

轮播组件通常用于实现广告轮播、图片预览、可滚动应用等。

    但其实这所谓的8种布局,也就前四种更像是布局,第五种栅格布局更像是一种多设备的适配方案。另外的三种则更像控件,没错,其实我想说的就是像是Android的RecyclerView,只是不同的表现形式。实际上,大部分开发场景下,这主流的四种布局足够了:

线性布局(LinearLayout)

层叠布局(StackLayout)

弹性布局(FlexLayout)

相对布局(RelativeLayout)

二、线性布局

    线性布局(LinearLayout)是开发中最常用的布局,通过线性容器Row和Column构建。线性布局最大的特点就是,布局中的控件横向(Column)或纵向(Row)线性排列。这个跟Android的线性布局是一样的,如下图所示:

鸿蒙开发(六)布局概述_第1张图片鸿蒙开发(六)布局概述_第2张图片

    线性布局适合大部分的开发场景,比如登录/注册页面,列表页面等。其使用方法就是通过Colum()或Row(),如下示例代码:

Column({ space: 5 }) {
      Row() {
        Text('111')
      }
    }.width('100%').height('80%').justifyContent(FlexAlign.Center)

三、层叠布局

    层叠布局(StackLayout)用于层叠的显示组件中的元素,通过Stack容器构建。后面添加的元素会覆盖在前面添加的元素之上,可以通过调整大小实现遮挡或层叠的覆盖效果。这个在Android中也有,叫FrameLayout。如下图所示:

鸿蒙开发(六)布局概述_第3张图片

    层叠布局的使用场景主要有广告、卡片层叠效果等。其使用方法是通过Stack(),如下示例代码:

Stack({ }) {
  Column(){}
    .width('90%')
    .height('100%')
    .backgroundColor('#ff58b87c')
  Text('text')
    .width('60%')
    .height('60%')
    .backgroundColor('#ffc3f6aa')
  Button('button')
    .width('30%')
    .height('30%')
    .backgroundColor('#ff8ff3eb')
    .fontColor('#000')
  }.width('100%').height(150).margin({ top: 50 })

四、弹性布局

    弹性布局(FlexLayout)提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。弹性布局最大的特点自然就是弹性、灵活。这个跟Android的约束布局,约束布局使用起来也是非常的灵活。如下图所示:

鸿蒙开发(六)布局概述_第4张图片

    弹性布局在开发场景中用例特别多,比如页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等等。其使用方法是通过Flex,如下示例代码:

Flex({ direction: FlexDirection.Row }) {
  Text('1').width('33%').height(50).backgroundColor(0xF5DEB3)
  Text('2').width('33%').height(50).backgroundColor(0xD2B48C)
  Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
}
.height(70)
.width('90%')
.padding(10)
.backgroundColor(0xAFEEEE)

五、相对布局

    相对布局,官方叫RelativeContainer,但我更喜欢称呼为RelativeLayout,容器中的控件通过设置属性与容器或容器内其他控件位置对齐。这个跟Android的相对布局也是对齐的,如下图所示:

鸿蒙开发(六)布局概述_第5张图片

    相对布局也是非常的灵活,以我之前在Android的开发经验,使用相对布局的开发者非常多,最大的特点其实就是减少了布局层级,使用方法如下: 

RelativeContainer() {
  Row()
    // 添加其他属性
    .alignRules({
      top: { anchor: '__container__', align: VerticalAlign.Top },
      left: { anchor: '__container__', align: HorizontalAlign.Start }
    })
    .id("row1")

  Row()
    ...
    .alignRules({
      top: { anchor: '__container__', align: VerticalAlign.Top },
      right: { anchor: '__container__', align: HorizontalAlign.End }
    })
    .id("row2")
}
...

    以上四种布局就是鸿蒙开发的主要布局,至于其他的,我前面也说了,我觉得更像是解决具体使用场景的方案(例如多设备适配、列表、网格等),而不太像是布局的概念。当然,我这种说法只是个人的观点。后面的文章,我们会主要针对这四种布局,去进行实战开发。

你可能感兴趣的:(鸿蒙,harmonyos,华为)