【HarmonyOS实战开发】鸿蒙内置组件详解

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}&#