鸿蒙开发笔记03 ---- 基础组件

FCC998

已于 2024-04-04 16:09:58 修改

阅读量333

点赞数 2

分类专栏：鸿蒙开发笔记文章标签：笔记鸿蒙

于 2024-04-04 00:07:12 首次发布

本文链接：https://blog.csdn.net/m0_64346512/article/details/137357514

版权

鸿蒙开发笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文详细介绍了ArkUI中的五个关键组件：Image用于显示图片，Text处理文本，TextInput用于文本输入，Button控制交互，以及Slider实现滑动操作。每个组件的使用方法、代码示例和效果展示都被涵盖。

摘要由CSDN通过智能技术生成

1 、image组件

1.1 组件简介

Image：图片显示文件

1.2 代码示例：

@Entry  //标记当前组件的入口组件     装饰器
@Component  //标记该变量、值变化时会触发UI刷新
struct Index {    //自定义组件：可复用UI单元
  @State message: string = 'Hello World'  //装饰器  标记该变量是状态变量，值变化会触发UI刷新

  build() { //UI描述：其内部以声明式方式描述UI结构
    Row() {
      Column() {   //内部组件：ArkUI提供的组件
                   //容器组件：用来完成页面布局  例如Row  Column
                   //基础组件：  自带样式和功能的页面元素 例如 Text
        Text(this.message)
          .fontSize(50)    //属性方法 ：设置组件的UI样式
          .fontWeight(FontWeight.Bold)
          .fontColor('#36D')
          .onClick(()=>{  //事件方法  设置组件
            this.message = 'Hello 房晨础！'
          })
        // 添加图片方式一：网络地址的方式，需要在module.json5中添加网络访问权限
        // Image("https://hshop.honorfile.com/pimages/product/6936520832682/428_428_37879C0250C6869B2AFBEBE36368662A967F9E67B89B3971mp.png")
        //   .width(250)//单位是vp虚拟像素

        //添加图片方式二：基于本地文件
        Image($r('app.media.icon'))
          .width(250)
          .interpolation(ImageInterpolation.High) //给图片添加插值  让图片更加清晰
      }
      .width('100%')//属性方法
    }
    .height('100%')
  }
}

1.3 效果展示

2、 Text组件

2.1 组件简介

注意：添加String值要在三个目录下都添加先走中/英再走base

2.2 代码示例

@Entry  //标记当前组件的入口组件     装饰器
@Component  //标记该变量、值变化时会触发UI刷新
struct Index {    //自定义组件：可复用UI单元
  @State message: string = 'Hello World'  //装饰器  标记该变量是状态变量，值变化会触发UI刷新

  build() { //UI描述：其内部以声明式方式描述UI结构
    Row() {
      Column() {   //内部组件：ArkUI提供的组件
                   //容器组件：用来完成页面布局  例如Row  Column
                   //基础组件：  自带样式和功能的页面元素 例如 Text

        Image("https://hshop.honorfile.com/pimages/product/6936520832682/428_428_37879C0250C6869B2AFBEBE36368662A967F9E67B89B3971mp.png")
          .width(250)//单位是vp虚拟像素

        //添加图片方式二：基于本地文件
        // Image($r('app.media.icon'))
        //   .width(250)
        //   .interpolation(ImageInterpolation.High) //给图片添加插值  让图片更加清晰

        Text($r('app.string.width_label'))
          .fontSize(20) //设置字体大小
          .fontWeight(FontWeight.Bold) //设置文本加粗
      }
      .width('100%')//属性方法
    }
    .height('100%')
  }
}

2.3 效果展示

3、TextInput 组件

3.1 简介

3.2 代码示例：

@Entry  //标记当前组件的入口组件     装饰器
@Component  //标记该变量、值变化时会触发UI刷新
struct Index {    //自定义组件：可复用UI单元
  @State imageWidth: number= 30  //装饰器  标记该变量是状态变量，值变化会触发UI刷新

  build() { //UI描述：其内部以声明式方式描述UI结构
    Row() {
      Column() {   //内部组件：ArkUI提供的组件
                   //容器组件：用来完成页面布局  例如Row  Column
                   //基础组件：  自带样式和功能的页面元素 例如 Text

        // 图片组件
        Image("https://hshop.honorfile.com/pimages/product/6936520832682/428_428_37879C0250C6869B2AFBEBE36368662A967F9E67B89B3971mp.png")
          .width(this.imageWidth)//单位是vp虚拟像素

        //添加图片方式二：基于本地文件
        // Image($r('app.media.icon'))
        //   .width(250)
        //   .interpolation(ImageInterpolation.High) //给图片添加插值  让图片更加清晰

         //文本组件
        Text($r('app.string.width_label'))
          .fontSize(20) //设置字体大小
          .fontWeight(FontWeight.Bold) //设置文本加粗

        // 文本输入框组件
        TextInput({placeholder:"请输入图片宽度",text:this.imageWidth.toString(0)})
          .width(250)
          .backgroundColor("#36d")
          .type(InputType.Password)
          //时间方法
          .onChange((value:string )=>{
                // console.log(value);
            this.imageWidth = parseInt(value)
          })

      }
      .width('100%')//属性方法



    }
    .height('100%')
  }
}

3.3 效果展示

4、Button组件

4.1 简介

4.2代码示例

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

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


        Text($r('app.string.width_label'))
          .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)
          .type(ButtonType.Normal)
          .onClick(()=>{
            if(this.imageWidth>=10){
              this.imageWidth -=10
            }

          })
        Button('放大')
          .width(80)
          .fontSize(20)
          .onClick(()=>{
            if(this.imageWidth<=300){
              this.imageWidth +=10
            }
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

4.3 效果展示

5、slider滑动条组件

5.1 简介

5.2 代码示例


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

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


        Text($r('app.string.width_label'))
          .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)
          .type(ButtonType.Normal)
          .onClick(()=>{
            if(this.imageWidth>=10){
              this.imageWidth -=10
            }

          })
        Button('放大')
          .width(80)
          .fontSize(20)
          .onClick(()=>{
            if(this.imageWidth<=300){
              this.imageWidth +=10
            }
          })

        Slider({
          min:100,
          max:300,
          value:this.imageWidth,
          step:10
        })
          .width('90%')
          .blockColor('#25a')
          .trackThickness(10)
          .showTips(true)
          .onChange(value=>{
            this.imageWidth = value
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

5.3 效果展示