HarmonyOS-Learn

基础

@Entry 标记入口组件
@Component 标记自定义组件
@State 标记状态变量 值变化UI刷新
build(){row(){}}一个根 一个row

struct Index {}:自定义组件:可复用的UI单元
    
build(){}UI描述:其内部以声明式方式描述UI结构
    
内置组件: ArkUI提供的组件
    
  容器组件:用来完成页面布局，例如 Row、Column
  基础组件:自带样式和功能的页面元素，例如 Text lmage
    
属性方法: 设置组件的UI样式
事件方法:设置组件的事件回调

Image组件
    string格式，通常用来加载网络图片，需要申请网络访问权限:
        Image('https://xxx .png')
    PixelMap格式，可以加载像素图，常用在图片编辑中
        Image(pixeMapObject)
    Resource格式，加载本地图片，推荐使用
        Image($r('app .media .icon')
        Image($rawfile( 'icon .png'))
        
        
   添加图片属性
        Image($r('app.media.icon'))
            .width(300)//宽度
            .height(300) //高度
            .borderRadius(10)//边框圆角
            .interpolation(lmagelnterpolation.High)//设置图片的插值效果
            
            
   常用事件
        onComplete 图片数据加载成功和解码成功时均触发该回调，返回成功加载的图片尺寸
            onComplete(callback: (event? : { width: number, height: number, componentWidth:
            number, componentHeight: number, loadingStatus: number }) => void)
        onError 图片加载异常时触发该回调
            onError(callback: (event? :{ componentWidth: number, componentHeight: number
            message: string })=> void
            

text组件
    string格式，直接填写文本内容
        Text('用户名”)
    Resource格式，读取本地资源文件
        Text($r('app.string.user label'))
        
    添加文本属性
        Text(记住我”)
            .lineHeight(30) //行高
            .fontSize(20)//字体大小
            .fontColor('#36D') //字体颜色
            .fontWeight(FontWeight.Medium)/字体粗细

    通用事件
        onClick
            可以给Text绑定onClick事件，每当用户点击Text的时候
            就会回调执行onClick方法，调用里面的逻辑代码

textinput组件

    TextlnputOptions对象格式
        placeholder:输入框无输入时的提示文本
            如: Textlnput({placeholder:'请输入账号或手机号’)
        text: 输入框当前的文本内容,默认值
            如:TextInput(text: itcast')
        
        
    添加属性和事件
        TextInput({placeholder:密码”})
            .height(25)//高
            .width(200)//宽
            .backgroundColor('#36D')//背景色
            .type(InputType.Password)//文本框类型
            .showPasswordlcon(false)/密码输入模式时，输入框未尾的图标是否显示
            .onChange(val=>//文本框改变事件 value参数为文本框输入的内容

buttun组件

    文字型按钮
        Button('点我”)
    自定义按钮，在Button内嵌套其它组件
        Button(){
            lmage($r('app.media.search')).width(20).height(15).margin(14)
    }