一、Image
语法：
Image(src:string|PixelMap|Resource)
使用方式：
-
string格式：用来加载网络图片，需要在module.json5中申请网络访问权限：ohos.permission.INTERNET
-
Image("http://xxx.png")
-
-
PixelMap格式：可以加载像素图，常用在图片编辑中
-
需要传递pixelMapObject对象，比较繁琐
-
Image(pixelMapObject)
-
-
Resource格式：加载本地图片，推荐使用
- Image($r(“app.media.xxx”))
- app.media固定写法
- 指向resources/base/media
- 可省略图片后缀名
- Image($rawfile(“xxx.png”))
- 直接指向resources/rawfile
- 不能省略图片后缀名
- Image($r(“app.media.xxx”))
二、Text
语法：
Text(string|Resource)
使用方式：
-
string格式，直接填写文本内容
-
Text("文本内容")
-
-
Resource格式，读取本地资源文件
-
test_label是一个变量名，当Text组件中的内容不想固定时，可以把数据添加到base/element/string.json中，或者添加到en_US/element/string.json、zh_CN/element/string.json中，系统首先会根据系统的中英文去找en_US或者zh_CN，如果都不匹配，就去默认的base下查找，一般内容会保存国家、语言、设备号等一些信息。
-
Text($r("app.string.test_label")) -
注意：en_US和zh_Cn设置完后base下也要设置，但是base下的Value无所谓
-
// zh_CN下 { "name": "test_label", "value": "测试内容" } // en_US下 { "name": "test_label", "value": "test content" } // base下 { "name": "test_label", "value": "label" } -
@Entry @Component struct Page4 { @State message: string = 'Hello World' build() { Row() { Column() { Text($r("app.string.test_label")) .fontSize(40) .fontWeight(FontWeight.Bold) .fontColor("#bfda83") .lineHeight(40) } .width('100%') } .height('100%') } }
-
三、TextInput
TextInput、TextArea是输入框组件，通常用于响应用户的输入操作，比如评论区的输入、聊天框的输入、表格的输入等，也可以结合其它组件构建功能页面，例如登录注册页面。
1、创建输入框
语法：
TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextAreaController})
- Placeholder：内容提示
- Text：文本内容
@Entry
@Component
struct TextInputUI {
build() {
Row() {
Column() {
TextInput({placeholder:"请输入用户名"})
.width(200)
TextInput({text:"文本内容"})
.width(200)
.backgroundColor("#1758f0")
.type(InputType.Password)
}
.width('100%')
}
.height('100%')
}
}
2、事件方法
@Entry
@Component
struct TextInputUI {
build() {
Row() {
Column() {
TextInput({ text: "文本内容" })
.width(200)
.backgroundColor("#1758f0")
.type(InputType.Password)
.onChange(value => {
console.log(value)
})
/**
输入框文本内容发生改变就会触发onChange事件
完整写法：
onChange((value:string)=>{
console.log(value)
})
如果只有一个参数，那么括号可以省略，并且string类型可以省略
*/
}
.width('100%')
}
.height('100%')
}
}
3、案例需求
利用文本输入框的内容来控制图片的大小
@Entry
@Component
struct TextInputUI {
@State num:number = 200
build() {
Row() {
Column() {
Image($r("app.media.1"))
.width(this.num)
TextInput({ text: this.num.toString() })
.width(200)
.backgroundColor("#1758f0")
.type(InputType.Normal)
.onChange(value => {
/*
ArkTS不允许使用全局对象的属性和方法： Infinity, NaN, isFinite, isNaN, parseFloat, parseInt
可以使用Number的属性和方法： Infinity, NaN, isFinite, isNaN, parseFloat, parseInt
API9可以直接使用：parseInt
API10需要这样使用：Number.parseInt
*/
this.num = Number.parseInt(value)
})
}
.width('100%')
}
.height('100%')
}
}
四、TextArea
用法和TextInput一致，为了的区别就是TextArea是一个多行输入框，在输入框中可以换行
语法：
TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextAreaController})
五、Button
- 普通按钮
-
Button("普通按钮")
-
- 自定义按钮：在Button内嵌套其他组件
-
Button(){ Image($r("app.media.icon")).width(70).margin(100) }.type(ButtonType.Circle) // 按钮类型 圆形等等 .onClick(()=>{ console.log("事件函数") })
-
六、Slider
Slider：滑动条组件
语法：
Slider(option?:SliderOptions)
属性：
Slider({
min:0, // 最小值
max:100,// 最大值
value:30,// 当前值
step:10,// 滑动步长
style:SliderStyle.OutSet,// 滑块在滑条外面，InSet：滑块在滑条里面
direction:Axis.Horizontal,// 滑条水平方向， Vertical：滑条垂直方向
reverse:false// 是否反向滑动，最大值和最小值是否换位置
})
@Entry
@Component
struct SliderUI {
build() {
Row() {
Column() {
Slider({
min:0,
max:100,
value:30,
style:SliderStyle.OutSet
})
.width("90%")
.showTips(true) // 是否展示value的百分比
.blockColor("#a9b529") // 滑块的背景色
.trackThickness(8) // 滑动条粗细
.onChange(value=>{
console.log(value.toString())
})
}
.width('100%')
}
.height('100%')
}
}
dth("90%")
.showTips(true) // 是否展示value的百分比
.blockColor("#a9b529") // 滑块的背景色
.trackThickness(8) // 滑动条粗细
.onChange(value=>{
console.log(value.toString())
})
}
.width('100%')
}
.height('100%')
}
}
