【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}&#
鸿蒙系统(HarmonyOS)中,实现定位服务通常涉及到以下几个步骤: 1. **权限请求**:在应用启动时,需要向用户申请获取位置信息的权限。可以在`AndroidManifest.xml`文件中添加`<uses-permission>`标签来声明位置访问权限。 ```xml <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> ``` 2. **初始化定位服务**:通过`LocationManager`类初始化定位功能,创建一个`LocationRequest`实例,设置更新频率、精度等属性。 ```java LocationManager locationManager = (LocationManager) getSystemService(LOCATION_SERVICE); LocationRequest locationRequest = new LocationRequest(); locationRequest.setInterval(5000); // 更新间隔,单位毫秒 locationRequest.setPriority(LocationRequest.PRIORITY_HIGH_ACCURACY); ``` 3. **注册监听器**:注册一个`LocationListener`监听位置变化,并在`onLocationChanged`方法中处理新的位置数据。 ```java locationManager.requestLocationUpdates(locationRequest, null, new MyLocationListener()); ``` 4. **编写位置监听器**:自定义一个实现了`LocationListener`接口的类,处理接收到的位置更新事件。 ```java public class MyLocationListener implements LocationListener { @Override public void onLocationChanged(Location location) { if (location != null) { // 处理位置坐标和其他相关信息 } } // 其他回调方法... } ``` 5. **错误处理**:别忘了处理可能发生的异常,如无可用的GPS信号或用户拒绝提供位置权限。 6. **关闭定位服务**:当不再需要定位功能时,记得从`LocationManager`中移除监听器。 ```java locationManager.removeUpdates(myLocationListener); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值