ArkUI

方舟开发框架，是HarmonyOS的一套UI开发框架，提供开发者进行应用UI开发时所必须的能力。

类Web开发范式

创建自定义组件

创建工程

新建自定义组件

在工程目录 js 文件夹上右键创建新的组件，设置自定义组件的名称为 comp，打开 js\comp\pages\index\index.hml，修改代码如下：

<div class="container">
<svg fill="white" width="60" height="60" >
<circle cx="30" cy="30" r="15" stroke-width="4" fill="black"></circle>
</svg>
<text style="font-size: 20fp;">黑色</text>
</div>

使用预览器查看自定义组件可以查看到黑色圆形，如下图所示：

在主页面引用自定义组件

打开 js\MainAbility\pages\index\index.hml，修改代码如下：

<element name='comp' src="../../../comp/pages/index/index.hml"></element>
<div class="container">
<div style="width: 100%;height: 10%;">
<comp></comp>
<comp></comp>
<comp></comp>
<comp></comp>
<comp></comp>
<comp></comp>
</div>
</div>

在主页面可以查看到多个黑色圆形，如下图所示：

使用使用 Props 声明属性

打开 js\comp\pages\index\index.js，设置自定义组件的配色数据，添加 props 声明颜色索引属性，用于在主页面设置自定义组件的颜色，修改代码如下：

export default {
    data: {
        title: "",
        compColor:{
            circleColor:['black','red','yellow','blue','green','orange'],
            textColor:['黑色','红色','黄色','蓝色','绿色','橙色'],
            strokeColor:['#FF000000','#FFFF0000','#FFFFFF00','#FF0000FF','#FF008000','#FFFFA500']
        }
    },
    props:['colorIndex'],
    onInit() {
        this.title = this.$t('strings.world');
    },
}

打开 js\comp\pages\index\index.hml，修改文本显示，代码如下：

<element name='comp' src="../../../comp/pages/index/index.hml"></element>
<div class="container">
<div style="width: 100%;height: 10%;">
<comp color-index='0'></comp>
<comp color-index='1'></comp>
<comp color-index='2'></comp>
<comp color-index='3'></comp>
<comp color-index='4'></comp>
<comp color-index='5'></comp>
</div>
</div>

声明式开发范式

创建基于arkTS的工程

创建自定义组件

打开 entry\src\main\ets\default\pages\index.ets，添加自定义组件 Item，声明子组件 Item的 UI 布局并添加样式，创建 Stack 组件，添加绘制组件 Rect 和 Text 组件，添加点击 Stack组件后的跳转功能，代码如下：

import router from '@ohos.router'
@Component
struct Item {
  private text: string
  private uri: string
  build() {
    Stack({ alignContent: Alignment.Center }) {
      Rect({width:'100%',height:100}).fill(Color.Pink)
      Text(this.text)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .fontColor(Color.Black)
    }
    .onClick(() => {
      router.pushUrl({ url: this.uri })
    })
    .height(100)
    .borderRadius(15)
    .width('80%')
    .margin({ bottom: 20 })
  }
}

export default Item;

引用自定义组件

将 Item 组件添加到 Index 组件中，并给 Item 传入参数 text 和 uri，其中 text 用于给 Text 组件设置文本信息，uri 用于设置页面路由的地址，代码如下：

import Item from './Item'

@Entry
@Component
struct Index {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent:
    FlexAlign.Center }) {
      Item({ text: '页面间转场：底部滑入', uri: 'pages/page/BottomTransition' })
      Item({ text: '页面间转场：自定义 1', uri: 'pages/page/CustomTransition' })
      Item({ text: '页面间转场：自定义 2', uri: 'pages/page/FullCustomTransition' })
      Item({ text: '组件内转场', uri: 'pages/ComponentTransition' })
      Item({ text: '共享元素转场', uri: 'pages/share/ShareItem' })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#FFECECEC')
  }
}