HarmonyOS Developer之组件讲解--TextInput和Image_harmonyos textinput 直角

TextInput: 文本输入框

1、声明TextInput组件

	TextInput({placeholder?: ResourceStr, text2: ResourceStr})
1

① placeHoder: 输入框输入时的提示文本

   TextInput({placeholder: '请输入账号或手机号'})
1

②text: 输入框当前的文本内容

TextInput({text: 'itcast'})
1

2、添加属性和事件

@Entry
@Component
struct ScrollExample {

  build() {
    Column(){
      TextInput({placeholder:"请输入账号或手机号"})
        .width(150) // 宽
        .height(20) // 高
        .backgroundColor("36C") // 输入框背景色
        .type(InputType.Password) // 输入框类型
        .onChange((value:string) => {
          // value是输入用户的文本内容
        })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Image：图片显示组件

1、声明Image组件并设置图片源

Image(src: string | PixelMap | Resource)
1

① string格式: 通常用来价值网络图片，需要申请网络访问权限：ohos.permission.INTERNET

Image(“http://www.baidu.com/xxxx.png”)
1

权限在module.json5配置文件中声明

{
  "module" : {
    // ...
    "requestPermissions":[
      {
        "name" : "ohos.permission.INTERNET",
        }
      }
    ]
  }
}
1
2
3
4
5
6
7
8
9
10
11

②PixelMap格式：可以用来加载像素图，图片编辑使用居多

Image(pixelMapObject)
1

③Resource格式: 加载本地图片（推荐使用）

Image($r(“app.media.app_icon”)) # 不需要带后缀,路径为entry/src/main/resources/base/media/
Image($rawfile(“app_icon.png”)) # 需要加后缀,路径为entry/src/main/resources/rawfile/
1
2

2、添加图片属性

Image($rawfile("app_icon.png"))
	//	前三条为组件通用属性，即，image组件有这个属性，其他组件，比如Text也有这个属性
    .width('100%')  # 设置宽度，用百分比需要用字符串格式，也可以使用.width(240)
    .height(120)
    .borderRadius(5) # 给图片设置圆角
    // 该属性为image特有属性
    .interpolation(ImageInterpolation.High) # 给图片设置差值，图片特有，消除低像素图片的锯齿
1
2
3
4
5
6
7