HarmonyOS ArkUI(基于ArkTS) 开发布局（上）

news2024/12/24 11:29:39

一 ArkUI(基于ArkTS)概述

基于ArkTS的声明式开发范式的方舟开发框架是一套开发极简、高性能、支持跨设备的UI开发框架，提供了构建应用UI所必需的能力

点击详情

特点

开发效率高，开发体验好
- 代码简洁：通过接近自然语义的方式描述UI，不必关心框架如何实现UI绘制和渲染。
- 数据驱动UI变化：让开发者更专注自身业务逻辑的处理。当UI发生变化时，开发者无需编写在不同的UI之间进行切换的UI代码，开发人员仅需要编写引起界面变化的数据，具体UI如何变化交给框架。
- 开发体验好：界面也是代码，让开发者的编程体验得到提升。
性能优越
- 声明式UI前端和UI后端分层：UI后端采用C++语言构建，提供对应前端的基础组件、布局、动效、交互事件、组件状态管理和渲染管线。
- 语言编译器和运行时的优化：统一字节码、高效FFI（Foreign Function Interface）、AOT（Ahead Of Time）、引擎极小化、类型优化等。
生态容易快速推进

能够借力主流语言生态快速推进，语言相对中立友好，有相应的标准组织可以逐步演进。

二布局概述

组件按照布局的要求依次排列，构成应用的页面。在声明式UI中，所有的页面都是由自定义组件构成，开发者可以根据自己的需求，选择合适的布局进行页面开发。

如何选择布局

声明式UI提供了以下10种常见布局，开发者可根据实际应用场景选择合适的布局进行页面开发。

布局	应用场景
线性布局（Row、Column）	如果布局内子元素超过1个时，且能够以某种方式线性排列时优先考虑此布局。
层叠布局（Stack）	组件需要有堆叠效果时优先考虑此布局。层叠布局的堆叠效果不会占用或影响其他同容器内子组件的布局空间。例如Panel作为子组件弹出时将其他组件覆盖更为合理，则优先考虑在外层使用堆叠布局。
弹性布局（Flex）	弹性布局是与线性布局类似的布局方式。区别在于弹性布局默认能够使子组件压缩或拉伸。在子组件需要计算拉伸或压缩比例时优先使用此布局，可使得多个容器内子组件能有更好的视觉上的填充效果。
相对布局（RelativeContainer）	相对布局是在二维空间中的布局方式，不需要遵循线性布局的规则，布局方式更为自由。通过在子组件上设置锚点规则（AlignRules）使子组件能够将自己在横轴、纵轴中的位置与容器或容器内其他子组件的位置对齐。设置的锚点规则可以天然支持子元素压缩、拉伸、堆叠或形成多行效果。在页面元素分布复杂或通过线性布局会使容器嵌套层数过深时推荐使用。
栅格布局（GridRow、GridCol）	栅格是多设备场景下通用的辅助定位工具，可将空间分割为有规律的栅格。栅格不同于网格布局固定的空间划分，可以实现不同设备下不同的布局，空间划分更随心所欲，从而显著降低适配不同屏幕尺寸的设计及开发成本，使得整体设计和开发流程更有秩序和节奏感，同时也保证多设备上应用显示的协调性和一致性，提升用户体验。推荐内容相同但布局不同时使用。
媒体查询（@ohos.mediaquery）	媒体查询可根据不同设备类型或同设备不同状态修改应用的样式。例如根据设备和应用的不同属性信息设计不同的布局，以及屏幕发生动态改变时更新应用的页面布局。
列表（List）	使用列表可以高效地显示结构化、可滚动的信息。在ArkUI中，列表具有垂直和水平布局能力和自适应交叉轴方向上排列个数的布局能力，超出屏幕时可以滚动。列表适合用于呈现同类数据类型或数据类型集，例如图片和文本。
网格（Grid）	网格布局具有较强的页面均分能力、子元素占比控制能力。网格布局可以控制元素所占的网格数量、设置子元素横跨几行或者几列，当网格容器尺寸发生变化时，所有子元素以及间距等比例调整。推荐在需要按照固定比例或者均匀分配空间的布局场景下使用，例如计算器、相册、日历等。
轮播（Swiper）	轮播组件通常用于实现广告轮播、图片预览等。
选项卡（Tabs）	选项卡可以在一个页面内快速实现视图内容的切换，一方面提升查找信息的效率，另一方面精简用户单次获取到的信息量。

三线性布局 (Row/Column)

Row和Column是最常用的布局，类似于前端中的 flex

Column 纵向布局

它默认子元素水平居中，纵向排列

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Column() {
       Column(){
       }
       .width('80%')
       .height('20%')
       .backgroundColor('#ff6700')
       .margin({bottom:20})
      Column(){
      }
      .width('80%')
      .height('20%')
      .backgroundColor('#ff6700')
      .margin({bottom:20})
      Column(){
      }
      .width('80%')
      .height('20%')
      .backgroundColor('#ff6700')
      .margin({bottom:20})

    }
    .height('100%')
    .width('100%')
  }
}

Row 横向布局

它默认子元素水平居中，纵向排列，这里我没有设置间据它门贴在一起了

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Row() {
       Column(){
       }
       .width('80%')
       .height('20%')
       .backgroundColor('#ff6700')
       .margin({bottom:20})
      Column(){
      }
      .width('80%')
      .height('20%')
      .backgroundColor('#ff6700')
      .margin({bottom:20})
      Column(){
      }
      .width('80%')
      .height('20%')
      .backgroundColor('#ff6700')
      .margin({bottom:20})

    }
    .height('100%')
    .width('100%')
  }
}

Space 设置子元素的间距

线性布局默认不会根据父元素收缩，这个跟 flex有区别

alignItems 交叉轴方向布局

交叉轴为垂直方向时(Row)，取值为VerticalAlign类型，可选值：Top,Center,Bottom

水平方向(Column)取值为HorizontalAlign类型,可选值：Start,Center,End

// 官方代码
Column({}) {
  Column() {
  }.width('80%').height(50).backgroundColor(0xF5DEB3)

  Column() {
  }.width('80%').height(50).backgroundColor(0xD2B48C)

  Column() {
  }.width('80%').height(50).backgroundColor(0xF5DEB3)
}.width('100%').alignItems(HorizontalAlign.Start).backgroundColor('rgb(242,242,242)')

Row({}) {
  Column() {
  }.width('20%').height(30).backgroundColor(0xF5DEB3)

  Column() {
  }.width('20%').height(30).backgroundColor(0xD2B48C)

  Column() {
  }.width('20%').height(30).backgroundColor(0xF5DEB3)
}.width('100%').height(200).alignItems(VerticalAlign.Top).backgroundColor('rgb(242,242,242)')