ArkTs基础入门

---

一、 (方舟开发框架)ArkUI介绍

方舟开发框架（简称：ArkUI），是一套 构建 HarmonyOS 应用 界面 的框架。构建页面的最小单位就
是 "组件"。

二、自定义组件

自定义组件的构成： 
ArkTs通过装饰器：@Comonent和@Entry装饰struct关键字声明数据结构，构成一个自定义组件。
自定义组件中提供了一个build(){} 函数，须在该函数内进行链式调用的方式进行基本的UI描述

@Entry：@Entry模拟页面不会被加载，一个自定义组件只能被一个@Entry进行修饰，也是UI页面的入口
@Component :  表示自定义组件，只能修饰struct关键字声明结构，被修饰后剧本组件渲染能力

自定义组件格式： 
	@Entry
	@Component
	struct Index {
		build(){
		}
	}

在同一个文件中：定义一个组件可以被实现调用 
@Component
struct Index2 {
	build(){
	}
}
调用方式：
	@Entry
	@Component
	struct Index {
		build(){
			column(){
				Index2()
			}
		}
	}

三、组件事件及使用

弹出框

AlertDialog.show({ message: '输出信息' })

分割线

Divider() // 分割线

Text文本

Text("字符串"或者在element中拿取对应值)

方式一 Text("字符串")
方式二 Text($r("app.string.json文件名.对应name") // 可以或者到对应的value 主要方便国际化

Text("值")属性：
	.fontSize()  字体大小
	.fontColor() 字体颜色，建议使用十六进制和枚举
	.border()  边框 如：.border({ width: 2 })
	.TextAlign(TextAlign.___)   文本Center居中  Start左边  End右边
	.MaxLines(number)  设置最大行数 ，多出的不会显示，若想看是否存在溢出需要结合 textOverflow，但不会显示溢出多少信息只是有个表示。。。
	.textOverflow({overflow:TextOverflow.Ellipsis})   Clip溢出不显示,Ellipsis:超出最大行数才会生效，才体现一处效果
	.lineHeight()  行高 ：行与行的高度
	.width() 宽度
	.height() 高度

当Text中写Span后，text是不生效的，样式也是一样
如：
Text(`sssvfvfv`) {
    Span("米好") // 业务span内容会覆盖Text内容，若样式都有则文本样式不生效
  }

TextInput文本输入框

TextInput({ placeholder: '提示信息'，text:'默认值' })
	.width()宽度
	.height() 高度
	.onChange((val)=>{})  触发事件：当写箭头函数时val位置，可以获取输入变量，用于改变定义变量信息
	.type(InputType.___)  设置是普通文本、密码、邮箱格式

Image图片

图片的引用存在2个方式：
当文件在media下时，调用方式为： Image($r("app.media.图片名"))
当文件在rawfile下时，调用方式为：Image($rawfile("图片名"))

Column列

格式：Column(){ }// 在上级为build() 时  每个自定义组件中，统计的只能存在一个 ，因为只能存在一个节点

Row行

格式：Row(){}  // 在上级为build() 时    每个自定义组件中，统计的只能存在一个 ，因为只能存在一个节点

Button按钮

Button(“值”)
.onClick(()=>{处理业务})点击事件使用
.enabled(boolean)  ：按钮判断合适禁用启用

	Button("登录")
	.width("80%")
	.onClick(() => {
	  if (true) {
	    AlertDialog.show({ message: '登录成功' })
	  } else {
	    AlertDialog.show({ message: '登录失败' })
	  }
	})
	.enabled(true) // true启用 false 禁用