HarmonyOs 4.0 Next（纯血鸿蒙开发）：【第一篇】ArkUI组件基础开发 Image、Text、TextInput、Button、Slider、Column、Row、布局组件

harmonyOs 4.0 + Next星河版 开发学习文档 . LiuJinTao test

2024年2月1日

一、网络请求权限配置

为了方便模拟器对网络请求的权限，所以我们事先在module.json5 文件中进行配置好网络秦秋权限的配置 如下：

"module": {
        "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ],
}

添加完毕后，我们模拟器就能正常的请求我们网络上面的资源了。

二、Image组件

2.1 第一种：使用网络超链接实现图片渲染

• 最开始我们需要进行配置网络请求权限(最开始上面已经配置好了)

代码示例：

   
        // 使用超链接网络加载的图片渲染
Image('https://res2.vmallres.com/pimages/uomcdn/CN/pms/202401/gbom/6942103109591/428_428_650AA2D1F4312445D02527C6CC0FD74Fmp.png')
          .width(250)

效果展示：

2.2 第二种：使用本地资源进行渲染（1）

• 代码示例：

        // 使用本地资源图片渲染方式（resources目录下media文件中）
        Image($r('app.media.icon'))
          .width(250)

• 效果展示：

当然，我们上面说过，除了组件的通用属性外，还有一些组件独有的属性，如上图，图片看起来有点锯齿，此时就得使用Image组件上的插值属性了

• 代码如下：

          .interpolation(ImageInterpolation.High)	// update

• 效果展示：
• 

当然这里使用的是预览模式，效果看起来不是很明显，大家使用模拟器或者真机效果会更加。

2.3 第三种：使用本地资源进行渲染（2）

• 代码示例：

        // 使用本地资源图片渲染方式（resources目录下rawfile文件中） 这种只需要写图片名字即可
        Image($rawfile("mate60.png"))
          .width(250)
          .interpolation(ImageInterpolation.High)
      }

• 效果展示：

三、Text组件

• 代码示例：

第一步：配置字符串变量

1、在en_US目录中的string.json文件中配置如下代码

{
    "String" : [
        {
      	 "name": "width_label",
     	 "value": "Image Width:"
    	}
    ]
}

2、在zh_CN目录中的string.json文件中配置如下代码

{
    "String" : [
        {
      	 "name": "width_label",
     	 "value": "图片宽度: "
    	}
    ]
}

3、 在element目录中的string文件配置如下代码：

{
    "String" : [
        {
      	 "name": "width_label",
     	 "value": "图片宽度: "    // 这里中英文都可以，因为会自动根据我们的语言进行自动匹配上面我们配置的（但是name必须一样）
    	}
    ]
}

4、 最后在我们页面中 ImagePage.ets 文件中使用

@Entry
@Component
struct ImagePage { // 这里我的文件名叫做 IamgePage
  @State message: string = 'Hello World'
  build() {
    Row() {
      Column() {
        Image($rawfile("mate60.png"))
          .width(250)
          .interpolation(ImageInterpolation.High)
        Text($r('app.string.width_label'))
          .fontSize(30) // 设置字体大小
          .fontWeight(FontWeight.Bold)  // 设置字体加粗
      }
      .width('100%')
    }
    .height('100%')
  }
}

• 效果展示：

四、 TextInput组件

• 代码示例：

@Entry
@Component
struct ImagePage {
  @State message: string = 'Hello World'
  @State imageWidth: number = 100
  build() {
    Row() {
      Column() {
        // 设置图片
        Image($rawfile("mate60.png"))
          .width(this.imageWidth)
          .interpolation(ImageInterpolation.High)
        // 设置文本
        Text($r('app.string.width_label'))
          .fontSize(18) // 设置字体大小
          .fontWeight(FontWeight.Bold)  // 设置字体加粗
        // * 设置输入框
        TextInput({text: this.imageWidth.toFixed(0)}) // 值为图片宽度，然后类型转换
          .width(100)
          .backgroundColor('#FFCCAA') // 输入框背景色
          .type(InputType.Number)     // 输入框类型
          .onChange(value => {  // 更新事件触发的箭头函数
            this.imageWidth = parseInt(value) // 将输入的字符串转为数字赋值给变量
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

• 效果展示：

• 这里我们再输入框中修改数据，都能实现图片宽度的自动变化

五、 Button 组件

@Entry
@Component
struct  Index {
  @State imageWidth: number = 30

  build() {
    Row() {
      Column() {
        Image($r('app.media.icon'))
          .width(this.imageWidth)
          .interpolation(ImageInterpolation.High)

        Text('图片宽度')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
        TextInput({text: this.imageWidth.toFixed(0)})
          .width(150)
          .backgroundColor('#36D')
          .type(InputType.Number)
          .onChange( value => {
            // this.imageWidth = parseInt(value)
          })

        Button('缩小')
          .width(80)
          .fontSize(20)
          .onClick(() => {
            if (this.imageWidth >= 10) {
              // 符合条件，允许放大
              this.imageWidth -= 10
            }
          })

        Button('放大')
          .width(80)
          .fontSize(20)
          .type(ButtonType.Normal)
          .onClick(() => {
            // 符合条件，允许放大
            if (this.imageWidth < 300) {
              this.imageWidth += 10
            }
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

• 通过Button，绑定点击事件，控制图片的大小。这里我们也进行了数据的节流。

六、 Slider 滑动条组件

Slider({
          value: this.imageWidth,
          min: 100,
          max: 300,
          step: 10,
          style: SliderStyle.InSet
        })
          .width(300)
          .blockColor('#36D')
          .selectedColor('#ff0000')
          .showSteps(true)
          .showTips(true)
          .trackThickness(10)
          .onChange(value => {
            this.imageWidth = value
          })

效果图如下：

七、column 和 Row 容器

八 、使用布局方式完善页面的布局

• 通过上面学习的 Colume 和 Row 布局进行改善前面我们的代码

@Entry
@Component
struct  Index {
  @State imageWidth: number = 150

  build() {
    Column() {
     Row() {
       Image($r('app.media.penpenlaoshi'))
         .width(this.imageWidth)
         .interpolation(ImageInterpolation.High)
     }
      .width('100%')
      .height(400)
      .justifyContent(FlexAlign.Center)

      Row() {
        Text('图片宽度')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
        TextInput({text: this.imageWidth.toFixed(0)})
          .width(150)
          .backgroundColor('#FFF')
          .type(InputType.Number)
          .fontSize(20)
          .onChange( value => {
            // this.imageWidth = parseInt(value)
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)
      .padding({ left: 15, right: 15})

      Divider().strokeWidth(2).color('#F1F3F5')
        .width('91%')

      Row() {
        Button('缩小')
          .width(80)
          .fontSize(20)
          .onClick(() => {
            if (this.imageWidth >= 10) {
              // 符合条件，允许放大
              this.imageWidth -= 10
            }
          })

        Button('放大')
          .width(80)
          .fontSize(20)
          .onClick(() => {
            // 符合条件，允许放大
            if (this.imageWidth < 300) {
              this.imageWidth += 10
            }
          })
      }
        .width('100%')
        .justifyContent(FlexAlign.SpaceEvenly)
        .margin({top: 40, bottom: 66})

      Slider({
        value: this.imageWidth,
        min: 100,
        max: 300,
        step: 10,
        style: SliderStyle.InSet
      })
        .width(300)
        .blockColor('#36D')
        .selectedColor('#FFAACC')
        .showSteps(true)
        .showTips(true)
        .trackThickness(10)
        .onChange(value => {
          this.imageWidth = value
        })
    }
    .width('100%')
    .height('100%')
  }

}

• 效果图如下：