HarmonyOS 学习 ---Remark3

基础组件

在这里插入图片描述

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步骤

  1. 定义 列表数据对象
  2. 创建列表数组
  3. 创建列表item内容 (组件)
  4. 使用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;}
}

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

Grid 网格布局

参数
scroller 控制滚动

子组件 :GridItem

在这里插入图片描述
与List 类似

Tabs 组件 切面页面

参数
barPosition : tabs的页签位置
index :设置初始页签索引
controller:设置Tabs控制器,用于Tabs组件页面切换

属性:
在这里插入图片描述

自定义tabbar

在这里插入图片描述

源代码

源代码

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值