harmony UI组件学习(1)

embedded/2024/12/22 20:39:00/

Image 图片组件

string格式,通常用来加载网络图片,需要申请网络访问权限:ohos.permission.INTERNET
Image('https://xxx.png')

PixelMap格式,可以加载像素图,常用在图片编辑中
Image(pixelMapobject)

Resource格式,加载本地图片,推荐使用
Image($r('app.media.mate60'))
Image($rawfile('mate60.png'))

Image($r('app.media.icon'))
.width(250) //宽度
.interpolation(ImageInterpolation.High)//设置高清

Text文本组件

Text($r('app.string.module_desc'))//名称资源引用
.baselineOffset(0) //基线的偏移量
.fontSize(30) //字体大小
.border({ width: 1 })//边框
.padding(10) //内边距
.width(300) //宽度
.lineHeight(32)//行高
.fontcolor('*#ff1876f8')// 字体颜色
.fontWeight(FontWeight.Medium)//字体粗细

TextInput 输入框组件

1,声明TextInput组件:
TextInput( fplaceholder?:ResourceStr,text?: ResourceStr})

① placeHoder:输入框无输入时的提示文本TextInput({placeholder:i请输入账号或手机号小)

② text:输入框当前的文本内容TextInput({text:itcast'})

2.添加属性和事件
TextInput({text:'当前输入文本'}).width(150)//宽
height(30)//高
backgroundcolor('#FFF')// 背最色
type(InputType.Password)/输入框类型

TextInput({text:'当前输入文本'})
.width(150)//宽.height(30)// 高
.backgroundColor('#FFF')//背最色
.type(InputType.Password)//输入框类型
.onChange(value =>{value是用户输入的文本内容
})

Button 按钮组件

文字型按钮
Button('点我')
自定义按钮,在Button内嵌套其它组件

Button(){ 

Image($r('app.media.search')).width(20).margin(10)

}

Button('点我')
.width(10)
.height(30)
.type(ButtonType.Normal)//按钮类型
.onclick(()=>{
处理点击事件
})

Slider 滑动条组件

Slider({min:0,// 最小值
max:100,//最大值
value:40,//当前值
step:10,//滑动步长
style:sliderstyle.0utSet,// InSetdirection: 
Axis.Horizontal,//Verticalreverse:falsel/是否反向滑动
})
.width('90%')
.showTips(true)//是否展示value百分比提示
.blockcolor('#36d')
.trackThickness(7)//滑动圆的大小
.showTips(true)//汽包
.onchange(value => {/ value就是当前滑块值
})

线性布局 (Row/Column)

这个和android的线性布局效果一样,更相前端的24珊格

循环控制

这个玩意不会滚动

List组件 

1.先声明要展示的数组

2.list里面包一个foreach循环, foreach循环声明的数组对象。

3.foreach循环里面要包一个list的item,item里面包的是需显示的组件。

自定义组件

1.组件封装在再引用 。(当前页面的外部和内部的封装也可以在其它文化中封装)

2.业务函数的封装再引用。

3.样式的封装再引用。


http://www.ppmy.cn/embedded/147906.html

相关文章

深度学习环境安装

在此之前请一定要检查一下自己的云服务器里有没有python,一定要!!!!因为我就是安装完之后发现自己云服务器中有Python 云服务器的Linux环境下的Python的安装: 第一步:直接安装依赖包 //复制以…

HTML基本标签详解

HTML基本标签详解 HTML&#xff08;超文本标记语言&#xff09;是构建网页的基础&#xff0c;以下是一些常用的 HTML 基本标签及其详细说明&#xff1a; <html> 定义&#xff1a;整个 HTML 文档的根元素。示例&#xff1a;<html lang"zh"><head> …

day04

1.if(表达式) 表达式的最终值为什么类型&#xff1f; 布尔类型 2.多重if用来处理什么样的情况&#xff1f; 通常用于处理某个值处于连续的区间的情况 3.多重if中的else必须写吗 不是必须写 根据需求是否书写 4.Scanner类接收整数&#xff0c;浮点数&#xff0c;字符串分别使用哪…

Redis应用缓存框架

1.Ehcache缓存框架 (1)Ehcache的核心对象 (2)单独使用Ehcache (3)Spring整合Ehcache (4)Spring Boot整合Ehcache (5)实际工作中如何使用Ehcache 2.Guava Cache缓存框架 (1)Guava Cache具有如下功能 (2)Guava Cache的主要设计思想 (3)Cuava Cache的优势 (4)Cuava Cach…

【老白学 Java】泛型应用 - 卡拉 OK(四)

泛型应用 - 卡拉 OK&#xff08;四&#xff09; 文章来源&#xff1a;《Head First Java》修炼感悟。 上文说到&#xff0c;解决了按歌名排序的问题后&#xff0c;老白立刻想到了按歌手名字排序的问题。 老白决定趁热打铁&#xff0c;尝试着实现自定义排序方式。 Collections…

macOS brew安装

brew 可以用命令在mac上安装、卸载、更新各种软件包。它是一个用ruby写的软件&#xff0c;软件是托管在github上的。 1、安装brew&#xff0c;一般选择清华源&#xff0c;如果之前安装过brew&#xff0c;执行下面命令时会自动备份old_homebrew&#xff0c;按照操作执行即可&…

workman服务端开发模式-GatewayWorker的使用

一、GatewayWorker介绍 Workerman是一个使用PHP开发的高性能组件&#xff0c;用于构建高性能的异步并发TCP、UDP、Unix Socket、HTTP、Websocket服务。 GatewayWorker是基于Workerman开发的一套TCP长连接的应用框架&#xff0c;实现了单发、群发、广播等接口&#xff0c;内置了…

基于SIFT的目标识别算法

基于SIFT&#xff08;Scale-Invariant Feature Transform&#xff09;的目标识别算法是一种经典的计算机视觉算法&#xff0c;用于在图像中寻找和匹配具有尺度不变性的特征点&#xff0c;从而实现目标的快速而准确的识别。 SIFT算法的主要步骤包括以下几个阶段&#xff1a; 尺…