logo资料库

标准设备应用开发-布局与基础组件.pdf

发布时间：2022-03-31 发布人：admin 分类：互联网 资料大小：2.22M 资料格式：pdf 举报 版权申诉
第1页 / 共14页
第2页 / 共14页
第3页 / 共14页
第4页 / 共14页
第5页 / 共14页
第6页 / 共14页
第7页 / 共14页
第8页 / 共14页
资料共14页，剩余部分请下载后查看
    OpenHarmony标准系统应用开发 布局与基础组件 讲师：马迪欣 OpenHarmony高级工程 师
    01 标准设备应用开发—HelloWorld 02 标准设备应用开发—布局与基础组件 03 标准设备应用开发—动画与音乐 04 标准设备应用开发—Native Api 05 标准设备应用开发—分布式介绍 06 标准设备应用开发—分布式上手
    OpenHarmony应用 开发框架 eTS UI的基本结构 常用的基础组件 组件状态管理 常用的容器组件 实战音乐播放器开发
    基于JS扩展的类Web开发范式 类HTML（页面结构） + CSS(页面样式) + JAVASCIPT(业务逻辑) 优点: 类Web前端技术栈，响应式开发，界面/样式/业务分离 基于TS扩展的声明式开发范式 eTS（结构 + 样式 + 业务逻辑） 优点：采用更接近自然语义的编程方式，让开发者可以直观地描述UI界面 基于JS的低代码开发范式 JSON(IDE拖拽开发页面) + JAVASCIPT(业务逻辑) 优点：低代码开发，易于上手
    1 index.ets 2 z 3 4 外部组件引入 装饰器修饰布局 容器+组件进行UI布局描述 添加事件方法
    objectFit Image 图片组件 None Fill Cover Cover Contain Fill None 保持宽高比进行缩小或者放大，使得图片两 边都大于或等于显示边界 保持宽高比进行缩小或者放大，使得图片完 全显示在边界内 不保持宽高比进行放大缩小，使得图片填充 满显示边界 保持原有尺寸显示，通常配合objectRepeat属 性一起使用 Contain ScaleDown ScaleDown 保持宽高比显示，图片缩小或者保持不变 Slider 滑动条组件 Text 文本组件
    @State装饰的变量是组件内部的状态数据，当这些状态数据被修改时，将会调用所在组件的build方法进行UI刷新 @Entry @Component struct MyComponent { @State count: number = 0 private toggleClick() { this.count += 1 } build() { Column() { Button() { Text(`Current music: ${this.count} `) .fontSize(20) }.onClick(()=>this.toggleClick()) } } }
    Flex 弹性布局组件 应用头部 左侧 导航 正文内容 广告 区域 Flex存在两根轴：默认水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
    分享到：
    赞 收藏

    相关推荐

    最新资料