harmonyOS基础（三）- 快速弄懂HarmonyOS ArkTs基础组件、布局容器（前端视角篇）

大家好！我是黑臂麒麟，一位6年的前端；
随着鸿蒙4.0的发布。鸿蒙社区不断壮大，且市场对harmonyOS应用认可度越来越高。很多公司开始对鸿蒙应用开发越来越重视。
之前想入坑鸿蒙，一直犹豫未下定决心学习。这次不再等待，开始系统学习起来。
此系列文章只做harmonyOS学习记录，大家如有兴趣，希望文章对您有所帮助；

if you’re change the world, you’re workingon important things. you’re excited to get up in the norning.

一、常用基础组件

1.基础组件

简单列举常用的及含义，掌握了以下按钮可以解决日常简单场景需求。其他在使用时查询ArkTS的API文档即可。

2.文本样式

ArkTS的样式以驼峰命名方式，这里以Text组件为例：

下面代码是两个Text组件，分别是默认样式和设置了文本样式的对比。

@Entry
@***ponent
struct Index {
  @State message: string = 'Hello World';
  @State myText: string = 'World';

  build() {
    Row() {
      Column(){
        Text('ArkTs')
        Text('ArkTs')
          .fontColor(Color.Blue)
          .fontSize(40)
          .fontWeight(FontWeight.Bold)
          .fontFamily('Arial')
      }
    }
    .justifyContent(FlexAlign.Center)
    .backgroundColor(0xF1F3F5)
    .width('100%')
    .height('100%')
  }
}

以上ArkTs代码的样式使用驼峰格式；其他组件的样式也是一样。使用时查阅具体用法。

3.Image

这里着重说一下Image的图片地址的引入方式，方式如下：
Image(src: string|PixelMap|Resource)
(1).使用string数据加载网络图片

Image(‘https://www.example.***/xxx.png’)

这里要注意Image在使用网络图片的时候，需要要在module.json5文件中声明网络访问权限

// module.json5
{
  "module": {
   	"requestPermissions": [
  		"name": "ohos.permisssion.INTER***"	
  	]
  }
}

(2).使用PixelMap数据加载图片

Image(pixelMapObject)

(3)使用Resource数据加载图片

Image($r('app.media.logo'))

上面的Resource是一种资源引入类型。会在下面详细描述。

4.使用资源引用类型

Resource是资源引用类型，用于设置组件属性的值。ArkTs文档推荐优先使用Resource类型，将资源文件（字符串、图片、音频等）统一存放于resources目录下，便于开发者统一维护。同事系统可以根据当前配置加载合适资源，例如，开发者根据屏幕尺寸呈现不同的布局效果，或根据语言提供不同的字符串。
已上面Text组件代码为例：

Text('ArkTs')
  .fontColor(Color.Blue)
  .fontSize(40)
  .fontWeight(FontWeight.Bold)
  .fontFamily('Arial')

(1).对元素内文本字符串的管理；

可以将这些编码写到entry/src/main/resources下的资源文件中。

在string.json中定义Button显示的文本

就个人而言，不太喜欢这种方式相对于前端喜欢而言。
在float.json中定义Text的字体样式。

在color.json中定义Text的字体颜色。

然后再Text组件通过$r('app.type.name)的形式引用应用资源。app带表应用内resources目录中定义的资源；type代表资源类型（或资源的存放位置），可以取“color”，“float”、“string”、“plural”、“media”; 以上几种是固定的，不支持自定义命名文件引用。name代表资源命名，由开发者定义资源时确定的。

Text($r('app.string.Index_Text'))
  .fontColor($r('app.color.Text_color'))
  .fontSize($r('app.float.Text_fontSize'))
  .fontWeight(FontWeight.Bold)
  .fontFamily($r('app.float.Text_fontFamily'))

以上是简单的描述Resource引用方式，后面回单独出一期深入研究的Resource引入文章。

二、布局组件

前端常用布局方式header、side、main、footer等标签，还有布局样式flex、grid等，在ArkTs常用布局组件有一下几种：

这里说一下List，Grid，Tabs，Column、Row使用方法，Swiper、Scroll布局组件相对简单详见Api文档。有点类似小程序的类似组件。

1. Column&Row

布局容器概念

线性布局容器表示垂直方向或者水平方向排列子组件的容器，ArkTs提供了Column和Row容器来实现线性布局。

主轴和交叉轴概念

在布局容器中，默认存在两根轴，分别是主轴和交叉轴，这两个轴始终是相互垂直的。不同的容器中主轴的方向不一样的。

• 主轴：在Column容器中的子组件是按照从上到下的垂直方向布局，其主轴的方向是垂直方向；在Row容器中的组件时按照从左到右的水平方向布局的，其主轴的方向时水平方向。
  下图时Column&Row容器交叉轴
  

属性

Column&Row容器的两个属性justifyContent和alignItems，类似CSS的flex或Grid的justify-content和align-item。这样容易让我们前端快速理解。
这里注意一下它们的属性值都要首字母大写。

主轴方向的对其（justifyContent）

子组件在主轴方向上的使用jusifyContent属性来设置，其参数类型时FlexAlign。它有一下几种类型：

• Start
  

• Center
  

• End
  

• SpaceBetween
  

• SpaceAround
  

• SpaceEvenly
  

交叉中方向对齐（alignItems）

Column容器的主轴时垂直方向，交叉轴是水平方向，其参数类型为HorizontalAlign（水平对齐），HorizontalAlign定义了一下几个类型；

• start
  

• Centent
  

• End
  
  Row容器的主轴是水平方向，交叉轴是垂直方向，其参数类型为VerticalAlign（垂直对其），VerticalAlign定义了一下几种类型：
  |属性值|描述|
  |–|–|
  |Top|垂直方向上居顶部对齐|
  |Center|竖直方向上居中对齐|
  |Bottom|竖直方向上居底部对齐|

• Top
  

• Center
  

• Bottom
  

接口介绍

Column&Row都课接收一个参数space，表示子组件在主轴上的间距；

@Entry
@***ponent
struct Index {
  @State TextArr: Array<string> = ["Image", "Text", "TextInput", "Button"]

  build() {
    Column({space: 30}) { // 这里设置子元素主轴上的间距
      ForEach(this.TextArr, (item: string)=> { // 利用ForEach渲染我们的字符串数组
        Row(){
          Text(item)
        }
        .width('80%')
        .height('100vp')
        .backgroundColor('#99b2df')
        .border({
          width: 5,
          color: '#8aa7da',
          style: BorderStyle.Solid
        })
        .justifyContent(FlexAlign.Center)
      })
    }
    .justifyContent(FlexAlign.Start)
    .backgroundColor('#bdd7ee')
    .width('100%')
    .height('100%')
  }
}

渲染出来的效果：

3. List使用

简介

使用频率很高的组件，需要配合ListItem子组件一起使用，列表每项对应一个ListItem组件

使用ForEach渲染

渲染多时，可以使用ForEach来循环渲染我们的列表项；

@Entry
@***ponent
struct Index {
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

  build() {
    Column({space: 30}) {
      List({space: 10}) {
        ForEach(this.arr, (item: number)=> {
          ListItem(){
            Text(`${item}`)
              .width('100%')
              .height(100)
              .fontSize(20)
              .fontColor(Color.White)
              .textAlign(TextAlign.Center)
              .backgroundColor(0x007DFF)
          }
        }, item => item)
      }
    }
    .padding(12)
    .height('100%')
    .backgroundColor(0xF1F3F5)
  }
}

设置分割线

这里如有需求可以给list组件可以使用divider属性给ListItem设置分割线。有四个参数：

• strokeWidth: 分割线宽度
• color: 分割线颜色
• startMargin: 分割线距离列表起始端的距离
• endMargin: 分割线距离列表结束端的距离

List({space: 50}) {
  ForEach(this.arr, (item: number)=> {
    ListItem(){
      Text(`${item}`)
    }
  }, item => item)
}
.divider({
  strokeWidth: 5,
  color: '#d8d8d8',
  startMargin: 20,
  endMargin: 20,
 })

列表滚动事件监听

List滚动监听事件和前端监听Scroll监听时间方法很像：

• onScroll: 滑动触发，返回scrollOffset为滑动偏移量，scrollState为当前滑动状态。
• onScrollIndex: 滑动时触发，分别返回滑动起始索引值与滑动结束索引值。
• onReachStart: 列表到达起始位置时触发。
• onReachEnd: 列表到底末尾位置触发。
• onScrollStrop: 列表滑动结束时触发。
  
  利用这些时间监听，并可以在log面板中打印出我们想要的滑动数据；

设置List排列方向

List组件排列可以垂直方向和水平方向排列，默认是垂直方向排列。如果想设置List为水平方向，可以使用listDiretion属性为Axis.Horizontal即可。

4. Grid

简介

如果前端学过css的grid布局模式，那大家一定不会对Grid组件布局陌生，接下来学习如何使用Grid网格布局组件。

使用

Grid组件是由“行”和“列”分割的单元格组成。Grid一般和GridItem一起使用。

@Entry
@***ponent
struct GridPage {
  private arr: string[] = new Array(9).fill('').map((_, index) => `item ${index + 1}`)

  build() {
    Column() {
      Grid() {
        ForEach(this.arr, (item: string) => {
          GridItem(){
            Text(item)
              .fontSize(16)
              .fontColor(Color.White)
              .backgroundColor(0x007DFF)
              .width('100%')
              .height('100%')
              .textAlign(TextAlign.Center)
          }
        }, (item: string) => item)
      }
      .columnsTemplate('1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
      .height(300)
    }
    .width('100%')
    .padding(12)
    .backgroundColor(0xF1F3F5)
  }
}

这里我们同样跟List一样使用ForEach遍历出的数组，可以看到我们设置columnsTemplate属性垂直方向配置3等分个1fr，同样纵向rowsTemplate也是3等分的1fr，1fr代表所占Grid等分个数。columnGap和rowGap分别设置垂直和纵向元素之间的间距。这里分别设置了 10vp。

5. Tabs

概述

Tabs是我们常用的做视图切换的常用布局组件。如“底部页签”，“顶部标签”，平板的“侧边页签”等。

使用

Tabs组件仅含子组件TabContent，每一个页签对应内容视图即TabContent组件。
结合之前我们写的List和Grid的组件，我们编写一个简单的Tabs布局

import Home from '../view/Home';
import GridPage from '../view/GridPage'
@Entry
@***ponent
struct Index {
  private controller: TabsController = new TabsController();

  build() {
    Column() {
      Tabs() {
        TabContent() {
          Home()
        }
        .tabBar('List')

        TabContent() {
          GridPage()
        }
        .tabBar('Grid')
      }
      .barWidth('100%') // 设置TabBar宽度
      .barHeight('60') // 设置TabBar高度
      .width('100%') 
      .height('100%')
      .backgroundColor(0xF5F5F5)
    }
    .width('100%')
    .height('100%')
  }
}

展示后的效果


上面代码，通过属性width和height设置了Tabs组件的宽高，使用TabWidth和BarHeight设置了TabBar的宽度和高度。

设置TabBar布局属性

Tabs布局模式默认Fixed的，不支持滑动。如果页签过多会可能导致显示不全，讲布局模式设置为Scrollable的话，可以实现页签的滚动。

自定义TabBar样式

如果需要自定义TabBar， 需要通过@Builder装饰器的函数。构造一个生成自定义TabBar样式的函数，我们来实现上面底部页签效果：

import Home from '../view/Home';
import GridPage from '../view/GridPage'
@Entry
@***ponent
struct Index {
  private tabsController: TabsController = new TabsController();
  @State currentIndex: number = 0;


  @Builder TabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {
    Column() {
      Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
        .size({width: 25, height: 25})
      Text(title)
        .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')
    }
    .width('100%')
    .height(50)
    .justifyContent(FlexAlign.Center)
    .onClick(() => {
      this.currentIndex = targetIndex;
      this.tabsController.changeIndex(this.currentIndex);
    })
  }
  build() {
    Column() {
      Tabs({barPosition: BarPosition.End, controller: this.tabsController}) {
        TabContent() {
          Home()
        }
        .tabBar(this.TabBuilder('List', 0, $r('app.media.home_selected'), $r('app.media.home_normal')))

        TabContent() {
          GridPage()
        }
        .tabBar(this.TabBuilder('List', 1, $r('app.media.mine_selected'), $r('app.media.mine_normal')))
      }
      .vertical(false)
      .barWidth("100%") // 设置TabBar宽度
      .barHeight(60) // 设置TabBar高度
      .width('100%')
      .height('100%')
      .backgroundColor(0xF5F5F5)
      .onChange((index: number) => {
        this.currentIndex = index;
      })
    }
    .width('100%')
    .height('100%')
  }
}

渲染后效果：

将barPosition的值设置为BarPosition.End，使页签显示在底部。使用@Builder自定义TabBuilder函数，生成由Image和Text组成的页签。同时也给Tabs组件设置了TabsController控制器，当点击某个页签时，调用changeIndex方法进行页签内容切换。
最后在Tabs添加onChange事件。切换时，把当前最近Index赋给currentIndex保存起来。

参考

华为开发者联盟官网开发者基础课程

结语

至此，本篇文章的内容结束了。文章有不对或不完整的地方，望多指点；
望更多小伙伴们加入harmonyOS开发大家庭，壮大生态圈，让鸿蒙更强大更好。
如果对你学习有所帮助，还请点赞、评论、收藏、关注、分享；
希望可爱你动动小手关注订阅，一起进步期待你的三连支持；