基础组件
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
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;}
}
Grid 网格布局
参数
scroller 控制滚动
子组件 :GridItem
与List 类似
Tabs 组件 切面页面
参数
barPosition : tabs的页签位置
index :设置初始页签索引
controller:设置Tabs控制器,用于Tabs组件页面切换
属性: