HarmonyOS 鸿蒙Next基础（三）- 快速弄懂HarmonyOS ArkTs基础组件、布局容器

一、常用基础组件

1.基础组件

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

2.文本样式

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

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

@Entry
@Component
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%')
  }
}

3.Image

这里着重说一下Image的图片地址的引入方式，方式如下：

Image(src: string|PixelMap|Resource)

(1).使用string数据加载网络图片

Image('https://www.example.com/xxx.png')

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

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

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

Image(pixelMapObject)

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

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

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

4.使用资源引用类型

Resource是资源引用类型，用于设置组件属性的值。ArcTs文档推荐优先使用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等，在ArcTs常用布局组件有一下几种：

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

1. Column&Row

布局容器概念

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

主轴和交叉轴概念

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

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

下图时Column&Row容器交叉轴

属性

Column&Row容器的两个属性justifyContent和alignItems，类似CSS的flex或Grid的justify-content和align-item。这样容易让我们前端快速理解。

这里注意一下它们的属性值都要首字母大写。

主轴方向的对其（justifyContent）

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

交叉中方向对齐（alignItems）

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

Row容器的主轴是水平方向，交叉轴是垂直方向，其参数类型为VerticalAlign（垂直对其），VerticalAlign定义了一下几种类型：

接口介绍

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

@Entry
@Component
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%')
  }
}

渲染出来的效果：