1、Image图片组件
鸿蒙内置组件Image的4种写法
// 鸿蒙内置Image图片组件案例
@Entry
@Component
struct ImagePage {
build() {
Column({space:20}){
// 1、图片的第一种写法 media文件夹下
Image($r('app.media.pig')).width(200).height(200);
// 2、图片的第二种写法 rawfile文件夹下
Image($rawfile('avatar2.jpg')).width(200).height(200);
// 3、图片的第三种写法 网络图片 (需要在module.JSON5文件中申请网络权限)
Image('https://img1.baidu.com/it/u=3621655768,3950011962&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400').width(200).height(200);
// 4、图片的第四种写法 图片资源放在ets文件夹下
Image('images/gx5.gif').width('200').height('200');
}.width('100%').height('100%')
}
}
2、像素单位(默认):vp
鸿蒙提供的长度像素单位为:px 与 vp
● HarmonyOS中提供的长度像素单位为:px 与 vp
● px: Pixel,屏幕物理像素单位。
●问题:相同px值在不同像素密度的手机上显示的尺寸是不同的(如下图所示)
●注意:不同于CSS中的px,CSS中的px类似于下面的vp
● vp: Virtual Pixel,虚拟像素
○它是屏幕像素密度相关像素
○应用运行时,会根据屏幕像素密度转换为屏幕物理像素进行显示
○在不同像素密度的手机上,1vp对应的像素数是不同的,像素密度越高,1vp对应的像素数就越多。从而达到:用vp作为长度单位,在尺寸相同但像素密度不同的手机上,显示大小相同。(如下图所示)
○当数值不带单位时,默认单位为vp。
○HarmonyOS提供了针对运行设备的vp与px转换的全局计算函数
■ px2vp(val): 得到指定px值对应的vp值
■ vp2px(val): 得到指定vp值对应的px值
@Entry
@Component
struct VpExample {
build() {
Column(){
Text('我的宝宝呢').width('1080px').height('100px').backgroundColor('red')
Text('当前设备1vp=多少px'+vp2px(1)).width(200).height(200).fontSize(20)
Image($r('app.media.avatar')).width('100px').height('100px')
Image($r('app.media.avatar')).width(100).height(100)
Image($r('app.media.avatar')).width('100vp').height('100vp')
Image($r('app.media.avatar')).width(vp2px(100)+'px').height(vp2px(100)+'px')
}
}
}
3、Text文本组件
@Entry
@Component
struct TextExample {
build() {
Column(){
// 1、文本的第一种写法
Text('文本的第一种写法')
.fontSize(20) // 文字大小
.fontColor('green') // 文字颜色
// 2、文本的第二种写法
Text($r('app.string.text_example'))
.fontWeight(500) // 文字宽度
.width(100) // 文本宽度
.height(100) // 文本高度
.backgroundColor(Color.Orange) // 背景颜色
.textAlign(TextAlign.End) // 文本对齐方式
.textOverflow({
overflow:TextOverflow.Ellipsis // 文本长度溢出显示省略号
})
.maxLines(1) // 最大一行
}.width('100%')
}
}
4、Button按钮组件
@Entry
@Component
struct ButtonExample {
build() {
// 列
Column() {
Button('按钮')
.type(ButtonType.Normal) // 按钮样式
.onClick(() => { // 绑定事件
console.log('点击事件')
});
// Button放置子组件
Button() {
Image($r('app.media.icon')).width(30).height(30)
}.width(100)
.height(100)
.onClick(() => {
console.log('onClick事件')
})
}.width('100%')
}
}
5、Toggle组件
@Entry
@Component
struct ToggleExample {
build() {
Column(){
// 切换按钮
Toggle({type:ToggleType.Checkbox,isOn:false}) // 复选框
Toggle({type:ToggleType.Switch,isOn:true}) // 开关
Toggle({type:ToggleType.Button,isOn:true }){// 按钮
Text('自定义')
// Button('button')
}.selectedColor(Color.Pink).onClick((event) => {
console.log('自定义按钮')
}).onChange((isOn) => {
console.log(JSON.stringify(isOn))
})
}.width('100%')
}
}
6、TextInput文本输入框组件
@Entry
@Component
struct TextInputExample {
// 用户名
@State username: string = ''
// 密码
@State password: string = ''
// 方法
login(username: string, password: string) {
console.log(`发送登录请求~~~ username:${username} password:${password}`)
if(username != '' && password != ''){
console.log('登录成功')
}else {
console.log('登录失败')
}
}
build() {
Column() {
// 表单
TextInput({ placeholder: '请输入用户名', text: this.username })
.onChange((value) => {
this.username = value
console.log(`username:${value}`)
})
.maxLength(5)
.type(InputType.Number)
.margin({ top: 10 });
Divider().margin({top:10}); // 分割线
TextInput({ placeholder: '请输入密码', text: this.password })
.onChange((value) => {
this.password = value
console.log(`password:${value}&#