HarmonyOS 学习 ---Remark3

最新推荐文章于 2024-07-17 21:40:42 发布

moqhiyeener

最新推荐文章于 2024-07-17 21:40:42 发布

阅读量44

点赞数

文章标签：学习

本文链接：https://blog.csdn.net/sumjim234/article/details/134638731

版权

基础组件

在这里插入图片描述

Image 图片

使用

Image('src') // src 可以为 网络url地址 或 pixelMap数据 或者 资源文件($r('app.media.logo'))

url ：可以为本地 url 或者网络url

pixelMap ：类似与Bitmap，相图片转成相应的图片资源数据格式

resource资源文件下： resource下的 rawfile 或者media目录下的图片

Text 文字

Text('content') // content 文本内容

TextInput 表单

@State account:String = ' ',  // 由于表单时实时变化要刷新ui 所以使用state 初始值为空字符串

// build 里使用
TextInput({ placeholder:'账号'})
		.onChange((value:String)  =>{
			//将键盘input的值 和 state绑定
			this.account =value ;  
		})

Button 点击

Button('content',{type :ButtonType.Capsule})
	.onClick(()  =>{
		//处理逻辑
	})

布局容器组件

有主轴和交叉轴

主轴：容器组件的控制轴
交叉轴：与之垂直的轴

可选参数 space 子组件在主轴方向的间距

justifyContent 主轴对齐方式
alignltems 交叉轴的对齐方式

Column 垂直布局

Row 水平布局

列表页面

List

连续多行相同的组件
入参函数
space ：列表间距
initialIndex： list初次加载位置item
scroller ：控制滚动

常用属性
listDirection 排列方向
divider ：分割线样式

forEcah

forEach
itemGenerator生成一个或多个组件
key–唯一键值和当前item相对应防止图片错位之类的

list步骤

定义列表数据对象
创建列表数组
创建列表item内容（组件）
使用forEach构建列表

定义数据类型

export default class ItemData {
	title: Resource;
	img?: Resource;
	others?: Resource;
	constructor(title: Resource,Img?: Resource, 
			others?: Resource) {
			this.title = title;
			this.lmg = img;
			this.others = others;}
}

在这里插入图片描述