ArkTS是HarmonyOS优选的主力应用开发语言。它在TypeScript（简称TS）的基础上，匹配ArkUI框架，扩展了声明式UI、状态管理等相应的能力，让开发者以更简洁、更自然的方式开发跨端应用。
HarmonyOS基础组件和Compose组件很相似，看过Compose组件的话再学习HarmonyOS基础组件会感觉非常熟悉。
HarmonyOS基础组件使用
Text
TypeScript
Text(this.src)
.width('100%')
.textAlign(TextAlign.Center)
.padding(10)
//背景颜色
.backgroundColor(Color.Green)
//字体颜色
.fontColor(Color.White)
//设置文本装饰线
.decoration({
//TextDecorationType.LineThrough:穿过文本的修饰线。
//TextDecorationType.Underline:文字下划线修饰。
type: TextDecorationType.Underline,
color: Color.White
})
//设置文本超长显示
.textOverflow({
//末尾省略号显示
overflow: TextOverflow.Ellipsis
})
//最大行数
.maxLines(1)
.onClick(() => {
//返回上个页面
// router.back()
//返回到指定页面并带回参数
router.back({
url: 'pages/Index',
params: {
src: 'Second页面传来的数据'
}
});
})返回上个页面用router.back()
Image
TypeScript
Image($r("app.media.a"))
//ImageFit.Auto:自适应显示。
//ImageFit.Contain:保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。
//ImageFit.Cover:默认值,保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。
//ImageFit.Fill:不保持宽高比进行放大缩小，使得图片充满显示边界。
//ImageFit.None:保持原有尺寸显示。
//ImageFit.ScaleDown:保持宽高比显示，图片缩小或者保持不变。
.objectFit(ImageFit.Contain)
.width('100%')
.height(200)
.margin(5)
//Image加载网络图片
Image('https://lmg.jj20.com/up/allimg/4k/s/02/210924233115O14-0-lp.jpg')
.width('100%')引用的图片文件目录
网络权限添加在module.json5中
TypeScript
{
"module": {
"name": "entry",
"type": "entry",
"description": "$string:module_desc",
"mainElement": "EntryAbility",
"deviceTypes": [
"phone",
"tablet"
],
"deliveryWithInstall": true,
"installationFree": false,
"pages": "$profile:main_pages",
"abilities": [
{
"name": "EntryAbility",
"srcEntry": "./ets/entryability/EntryAbility.ts",
"description": "$string:EntryAbility_desc",
"icon": "$media:icon",
"label": "$string:EntryAbility_label",
"startWindowIcon": "$media:icon",
"startWindowBackground": "$color:start_window_background",
"exported": true,
"skills": [
{
"entities": [
"entity.system.home"
],
"actions": [
"action.system.home"
]
}
]
}
],
"requestPermissions": [
{
//网络访问权限
"name": "ohos.permission.INTERNET"
}
]
}
}TextInput
TypeScript
TextInput({ placeholder: '请输入账号' })
//提示文本颜色
.placeholderColor(0x999999)
//提示文本大小及样式设置
.placeholderFont({
size: 20,
weight: FontWeight.Medium,
family: 'cursive',
style: FontStyle.Italic
})
.fontColor(Color.Blue)
.fontSize(20)
.fontFamily('Arial')
.margin(10)
//输入类型设置
.type(InputType.Password)
//获取输入文本
.onChange((value: string) => {
this.text = value
})Button
TypeScript
//Button
Button($r('app.string.login_text'), {
//ButtonType.Capsule：胶囊形按钮
//ButtonType.Circle：圆形按钮
// ButtonType.Normal：正常按钮
type: ButtonType.Capsule,
//是否开启点击效果
stateEffect: true
})
.width('90%')
.height($r('app.float.button_height'))
.fontSize($r('app.float.login_fontSize'))
.fontWeight(FontWeight.Medium)
.backgroundColor('#007DFF')
//包含子组件
Button({ type: ButtonType.Circle, stateEffect: true }) {
Image($r('app.media.app_icon'))
.width(30)
.height(30)
}
.width(55)
.height(55)
.backgroundColor(0x317aff)
.margin(10)宽高文件float.json
TypeScript
{
"float": [
{
"name": "button_height",
"value": "40vp"
},
{
"name": "login_fontSize",
"value": "18fp"
}
]
}宽高单位用vp,字体大小用fp。
LoadingProgress
TypeScript
LoadingProgress()
.color(Color.Blue)
.height(60)
.width(60)路由跳转
引入
TypeScript
import router from '@ohos.router'点击跳转
TypeScript
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.onClick(() => {
//pushUrl：跳转后当前页面还在
//replaceUrl：跳转后当前页面销毁
router.pushUrl({
url: 'pages/Second',
params: {
src: 'Index页面传来的数据，Index页面传来的数据，Index页面传来的数据',
}
}, router.RouterMode.Single)
})下个页面接收
TypeScript
@State src: string = router.getParams()?.['src'];完整代码：
Index.ets
TypeScript
import router from '@ohos.router'
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
@State src: string = '';
onPageShow() {
//Second页面带回的参数
this.src = router.getParams()?.['src'];
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.onClick(() => {
//pushUrl：跳转后当前页面还在
//replaceUrl：跳转后当前页面销毁
router.pushUrl({
url: 'pages/Second',
params: {
src: 'Index页面传来的数据，Index页面传来的数据，Index页面传来的数据',
}
}, router.RouterMode.Single)
})
Text(this.src)
}
.width('100%')
}
.height('100%')
}
}Second.ets
TypeScript
import router from '@ohos.router';
@Entry
@Component
struct TextDemo {
@State src: string = router.getParams()?.['src'];
@State text: string = ''
build() {
Column() {
//Text
Text(this.src)
.width('100%')
.textAlign(TextAlign.Center)
.padding(10)
//背景颜色
.backgroundColor(Color.Green)
//字体颜色
.fontColor(Color.White)
//设置文本装饰线
.decoration({
//TextDecorationType.LineThrough:穿过文本的修饰线。
//TextDecorationType.Underline:文字下划线修饰。
type: TextDecorationType.Underline,
color: Color.White
})
//设置文本超长显示
.textOverflow({
//末尾省略号显示
overflow: TextOverflow.Ellipsis
})
//最大行数
.maxLines(1)
.onClick(() => {
//返回上个页面
// router.back()
//返回到指定页面并带回参数
router.back({
url: 'pages/Index',
params: {
src: 'Second页面传来的数据'
}
});
})
//Image加载本地图片
Image($r("app.media.a"))
//ImageFit.Auto:自适应显示。
//ImageFit.Contain:保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。
//ImageFit.Cover:默认值,保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。
//ImageFit.Fill:不保持宽高比进行放大缩小，使得图片充满显示边界。
//ImageFit.None:保持原有尺寸显示。
//ImageFit.ScaleDown:保持宽高比显示，图片缩小或者保持不变。
.objectFit(ImageFit.Contain)
.width('100%')
.height(200)
.margin(5)
//Image加载网络图片
Image('https://lmg.jj20.com/up/allimg/4k/s/02/210924233115O14-0-lp.jpg')
.width('100%')
TextInput({ placeholder: '请输入账号' })
//提示文本颜色
.placeholderColor(0x999999)
//提示文本大小及样式设置
.placeholderFont({
size: 20,
weight: FontWeight.Medium,
family: 'cursive',
style: FontStyle.Italic
})
.fontColor(Color.Blue)
.fontSize(20)
.fontFamily('Arial')
.margin(10)
//输入类型设置
.type(InputType.Password)
//获取输入文本
.onChange((value: string) => {
this.text = value
})
Text(this.text)
//Button
Button($r('app.string.login_text'), {
//ButtonType.Capsule：胶囊形按钮
//ButtonType.Circle：圆形按钮
// ButtonType.Normal：正常按钮
type: ButtonType.Capsule,
//是否开启点击效果
stateEffect: true
})
.width('90%')
.height($r('app.float.button_height'))
.fontSize($r('app.float.login_fontSize'))
.fontWeight(FontWeight.Medium)
.backgroundColor('#007DFF')
//包含子组件
Button({ type: ButtonType.Circle, stateEffect: true }) {
Image($r('app.media.app_icon'))
.width(30)
.height(30)
}
.width(55)
.height(55)
.backgroundColor(0x317aff)
.margin(10)
//LoadingProgress
LoadingProgress()
.color(Color.Blue)
.height(60)
.width(60)
}
.width('100%')
}
}