ArkTS

自定义组件

定义名为 TitleComponent 的自定义组件：

@Component  // 装饰器 @Component 表示这是个自定义组件
export struct TitleComponent {  // @Component 装饰的 struct 表示该结构体具有组件化能力，能够成为一个独立的组件
    build() {}  // 自定义组件必须定义 build 方法，在其中进行 UI 描述
}

定义名为 RankPage 的自定义组件，在其中使用 TitleComponent 组件：

import { TitleComponent } from '../view/TitleComponent';
@Entry  // 装饰器 @Entry 表示这是个入口组件，加载页面时，将首先创建并呈现 @Entry 装饰的自定义组件，一个页面有且仅有一个 @Entry 装饰的组件
@Component
struct RankPage {
    build() {
        Column() {
            TitleComponent()
        }
    }
}

生命周期

自定义组件

1. 自定义组件创建
2. aboutToAppear()
3. aboutToDisappear()
4. 自定义组件销毁

@Component
struct RankPage {
    aboutToAppear() {}
    aboutToDisappear() {}
}

入口组件

1. 页面入口组件创建
2. aboutToAppear()
3. onPageShow()，页面显示时自动调用
4. onBackPress()，用户点击返回按钮时自动调用
5. onPageHide()，页面消失时自动调用
6. aboutToDisappear()
7. 页面入口组件销毁

@Entry
@Component
struct RankPage {
    onPageShow() {}
    onPageHide() {}
    onBackPress() {
        // 返回值为 true 时，表示页面自己处理返回逻辑，不进行页面返回
        // 返回值为 false 时，表示由系统处理返回逻辑，默认为 false
        return true;
    }
}

渲染控制

条件渲染：if ... else if ... else ...

循环渲染：使用 ForEach 迭代数组，并为每个数组项创建相应的组件

状态管理

@Component
export struct ListItemComponent {
    @State isChange: boolean = false;  // 装饰器 @State 表示组件中的状态变量，此状态变化会引起 UI 变更
    build() {
        Row() {
            Text(this.name).fontColor(this.isChange ? ItemStyle.COLOR_BLUE : ItemStyle.COLOR_BLACK)
        }.onClick(() => {
            this.isChange = !this.isChange;
        })
    }
}

@Component
export struct TitleComponent {
    // @Link 装饰的变量可以和父组件的 @State 变量建立双向数据绑定。任何一方所做的修改都会反映给另一方。
    @Link isRefreshData: boolean;  // 没有对该变量初始化，需要父组件创建时该组件时赋值
}

应用程序入口——UIAbility

每一个UIAbility实例，都对应于一个最近任务列表中的任务。一个应用可以有一个UIAbility，也可以有多个UIAbility。

UIAbility 内的页面跳转

先导入路由模块：import router from '@ohos.router'

// index页面
@Entry
@Component
struct Index {
    build() {
        Button('Next')
            .onClick(() => {
                router.pushUrl({
                    url: 'pages/second',  // 跳转
                    params: {  // 参数
                        'msg': '123'
                    }
                })
            })
    }
}

// second 页面
@Entry
@Component
struct Second {
    @State msg: string = router.getParams()['msg']  // 接收参数
    build() {
        Column() {
            Text(this.msg)
            Button('Back')
                .onClick(() => {
                    router.back()  // 返回上一页
                })
        }
    }
}

生命周期

onCreate(want, launchParam) {}
onDestroy() {}
onWindowStageCreate(windowStage: window.WindowStage) {}
onWindowStageDestroy() {}
onForeground() {}
onBackground() {}

基础组件

组件（Component）是界面搭建与显示的最小单位，ArkUI 提供了丰富多样的 UI 组件，我们可以使用这些组件轻松的编写出更加丰富、漂亮的界面。

组件根据功能可以分为以下五大类：基础组件、容器组件、媒体组件、绘制组件、画布组件。其中基础组件是视图层的基本组成单元，包括 Text、Image、TextInput、Button、LoadingProgress 等。

Image

设置图片数据源：Image(src: string|Resource)

Image('https://xxxxxx')  // 使用string类型数据加载网络图片
Image($r('app.media.logo'))  // 使用Resource加载图片

其中加载网络图片需要在 module.json5 文件中添加网络访问权限：

{
    "module" : {
        "requestPermissions":[
           {
             "name": "ohos.permission.INTERNET"
           }
        ]
    }
}

设置图片大小：

// 使用number数据设置图片大小
Image($r('app.media.icon'))
    .width(80)
    .height(80)

// 使用string数据设置图片大小
Image($r('app.media.icon'))
    .width('80vp')
    .height('80vp')
    
// 使用Resource数据设置图片大小
Image($r('app.media.icon'))
    .width($r('app.float.logo_image_size'))
    .height($r('app.float.logo_image_size'))

使用Resource数据设置图片大小，需要先在resources文件夹下定义：

{
    "float": [
        {
            "name": "logo_image_size",
            "value": "80vp"
        }
    ]
}

Text

用于在节界面上展示一段文本信息

设置文本内容：Text(content?: string|Resource)

Text('登录界面')
Text($r('app.string.login_page'))  // 需要在resources目录下的string.json文件中定义该资源

设置文本大小：

Text('abc').fontSize(24)
Text('abc').fontSize('24fp')
Text('abc').fontSize($r('app.float.page_title_size'))

设置文本粗细：

Text('123').fontWeight(500)  // 默认400
Text('123').fontWeight(FontWeight.Medium)  // Lighter, Normal, Regular, Medium, Bold, Bolder

设置文本颜色：

Text('abc').fontColor(Color.Black)
Text('abc').fontColor(0x182431)
Text('abc').fontColor('#182431')
Text('abc').fontColor($r('app.color.my_color'))

TextInput

TextInput({ placeholder: "账号" })  // 设置提示文本
    .placeholderColor(0x999999)     // 提示文本的颜色
    .fontColor(Color.Blue)          // 设置字体颜色
    .fontSize(20)                   // 设置字体大小
    .fontStyle(FontStyle.Italic)    // 设置斜体
    .fontWeight(FontWeight.Bold)    // 设置字体粗细
    .maxLength(8)                   // 设置最大输入字符数
    .type(InputType.Number)         // 设置文本框输入类型
    .onChange((value: string) => {  // 设置onChange事件
        console.log(value)
    })

Button

Button('登录', { type: ButtonType.Capsule, stateEffect: false })
    .width('90%')
    .height(40)
    .fontSize(16)
    .fontWeight(FontWeight.Medium)
    .backgroundColor('#007DFF')

type用于定义按钮样式，stateEffect用于设置按钮按下时是否开启切换效果，当状态置为false时，点击效果关闭，默认值为true。

type的值为枚举类型 ButtonType 中的一种：Capsule(圆角按钮)、Circle(圆形按钮)、Normal(普通按钮、方形)

容器组件

// Column表示沿垂直方向布局的容器，space表示容器内组件间距
Column({space: 30}) {
    Text('abc')
    // Row表示沿水平方向布局的容器，space表示容器内组件间距
    Row({space: 20}) {
        Button('登录')
        Button('注册')
    }
}

对齐方式

属性	描述
justifyContent	设置子组件在主轴方向上的对齐格式
alignItems	设置子组件在交叉轴方向上的对齐格式

子组件在主轴方向上的对齐使用 justifyContent() 来设置，其参数为枚举类型 FlexAlign。FlexAlign 定义了以下几种类型：

• Start：元素在主轴方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐。
• Center：元素在主轴方向中心对齐，第一个元素与行首的距离以及最后一个元素与行尾距离相同。
• End：元素在主轴方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐。
• SpaceBetween：元素在主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐。
• SpaceAround：元素在主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。
• SpaceEvenly：元素在主轴方向等间距布局，无论是相邻元素还是边界元素到容器的间距都一样。

子组件在交叉轴方向上的对齐方式使用 alignItems() 来设置。

Column 容器的主轴是垂直方向，交叉轴是水平方向，其参数为枚举类型 HorizontalAlign（水平对齐），HorizontalAlign 定义了以下几种类型：

• Start：设置子组件在水平方向上按照起始端对齐。
• Center（默认值）：设置子组件在水平方向上居中对齐。
• End：设置子组件在水平方向上按照末端对齐。

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

• Top：设置子组件在垂直方向上居顶部对齐。
• Center（默认值）：设置子组件在竖直方向上居中对齐。
• Bottom：设置子组件在竖直方向上居底部对齐。

List

List是很常用的滚动类容器组件，一般和子组件ListItem一起使用，List列表中的每一个列表项对应一个ListItem组件。

@Entry
@Component
struct ListDemo {
    private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
    build() {
        List({ space: 10 }) {
            ForEach(this.arr, (item: number) => {
                ListItem() {
                    Text(`${item}`)
                        .width('100%')
                        .height(50)
                        .backgroundColor(0x007DFF)
                }
            })
        }
    }
}

List 组件子组件 ListItem 之间默认是没有分割线的，可以使用 List 组件的 divider 方法。divider 方法包含四个参数：

参数	说明
strokeWidth	分割线的线宽
color	分割线的颜色
startMargin	分割线距离列表侧边起始端的距离
endMargin	分割线距离列表侧边结束端的距离

List组件提供了一系列事件方法用来监听列表的滚动：

事件方法	说明
onScroll	列表滑动时触发，返回值 scrollOffset 为滑动偏移量，scrollState 为当前滑动状态
onScrollIndex	列表滑动时触发，返回值分别为滑动起始位置索引值与滑动结束位置索引值
onReachStart	列表到达起始位置时触发
onReachEnd	列表到底末尾位置时触发
onScrollStop	列表滑动停止时触发

List 组件里面的列表项默认是按垂直方向排列的，可以将 List 组件的 listDirection 属性设置为 Axis.Horizontal 实现列表项横向排列，默认为 Axis.Vertical。