刚开始接触HarmonyOS的开发,希望不会太晚。在我学习的过程中,我会将我学到的内容,通过写博客的形式,来进行回忆和复习。同时也希望能够遇到志同道合的朋友,我们一起学习,一起进步,文章中有什么不对的地方,也希望各位能够指出来,希望最后我们都可以有所收获。
目录,可以点击跳转到想要了解的组件详细内容
- 组件一:Image
- 组件二:Text
- 组件三:TextInput
组件一:Image
-
用法: 图片显示组件
-
具体用法:
声明Image组件并设置图片源:
Image(src: string|PixelMap|Resource)
1.string格式,通常是用来加载网络中的图片,需要申请网络权限。
Image('https://a.520gexing.com/uploads/allimg/2018091710/bwqefgkpak4.jpg')
预览器显示如下:
注意: 当我们将我们的设备部署到我们真实的设备或虚拟机上时,不会和预览器一样显示我们直接引用的网站图片,这是因为在我们进行真实使用app时,app需要访问权限,未经允许我们不可以直接获得访问照片的权限。
解决方法:
我们需要在我们的安全配置信息中加入对网络图片的访问请求,方法如下:
点开module.json5
后,我们可以看到一些已有的模块配置
我们要加入以下代码,来进行对网络请求的配置
"requestPermissions": [
{
"name" : "ohos.permission.INTERNET"
}
],
在加入这段代码后,我们可以通过虚拟机或真机看到网络导过来的照片。
-
PixelMap格式,加载本地照片,照片存在media目录下:
固定格式
Image($r('app.media.shuaige')
这里注意在图片后面不能加后缀名,加了会报错。 -
Resource格式,将图片存在rawfile中,打印照片。
rawfile目录如下:
固定搭配:
Image($rawfile('shuaige.jpg'))
这里必须加文件后缀,不加会报错
组件二:Text
-
用法: 显示文本组件
-
具体用法:
Text(string | Resource)
- 当我们使用string格式时,我们在Text组件中输入什么字符串,在我们的预览器中就会出现什么字,实例如下:
预览器如下:
组件三:TextInput
ArkTS中的TextInput是一个用于输入文本的组件。它提供了一个文本输入框,用户可以在其中输入文字。下面是TextInput组件的一些参数:
import router from '@ohos.router'
@Entry
@Component
struct Index {
@State message: string = '欢迎登录'
@State userName: string = '';//用户名
@State passWord: string = '';//密码
build() {
Row() {
Column({space:4}) {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
TextInput({placeholder: '请输入用户名:'}).width('95%')
.onChange((value)=>{
this.userName = value;
})
TextInput({placeholder: '请输入密码:'}).width('95%').type(InputType.Password)
.onChange((value)=>{
this.passWord = value;
})
Button('登录')
.margin({top:20})
.colorBlend('red')
.onClick(()=>{
router.pushUrl({
url:'pages/LoginOKPage',
params: {
userNameParam:this.userName,
passWordParam:this.passWord,
}
})
})
}
.width('100%')
}
.height('100%')
}
}
效果如下: