通过Text，TextInput，Slider，Image实现图片大小控制

m0_75219943

已于 2024-04-17 16:33:21 修改

阅读量1.1k

点赞数 15

文章标签： html 前端

于 2024-04-15 19:52:36 首次发布

本文链接：https://blog.csdn.net/m0_75219943/article/details/137785923

版权

一、整体样式：

二、使用线性布局构建出整体框架

应为整个页面是从上到下排列所以使用Column布局作为最外层框架

@Entry
@Component
struct aaa{
  build() {
    Column() { 
    }
    .width('100%')//设置整个页面的宽
    .height('100%')//设置整个页面的高
  }
}

@Entry
@Component
struct aaa{
  @State imgWidth:number=100
  build() {
    Column() {
      Column(){
        //放图片
      }
      .justifyContent(FlexAlign.Center)//图片主轴上居中
      .width('100%')//
      .height(300)
      Row(){
       //放text组件和textinput组件
      }
      .width('90%')
      .height(50)
      .justifyContent(FlexAlign.SpaceEvenly)//平均分配每一个元素位置
      
    }
    .width('100%')
    .height('100%')
  }
}

三、在框架中添加组件

image组件

1.参数：

1.1 src 图片的数据源，支持本地图片和网络图片

1.1.1 图片在media文件下 Image($r('app.media.img')) img图片名字

1.1.2 在rawfile下 Image($rawfile('snap')) snap图片名字

2.专属属性:

2.1 alt 加载时显示的占位图，支持本地图片（png、jpg、bmp、svg和gif类型），不支持网络图片。默认值：null

2.2 objectFit 设置图片的填充效果。默认值：ImageFit.Cover

2.3 objectRepeat 设置图片的重复样式。从中心点向两边重复，剩余空间不足放下一张图片时会截断。默认值：ImageRepeat.NoRepeat

2.4 interpolation 设置图片的插值效果，即减轻低清晰度图片在放大显示时出现的锯齿问题。默认值：ImageInterpolation.None

2.4.1 None 不使用图片插值。

2.4.2 High 高图片插值，插值质量最高，可能会影响图片渲染的速度。

2.4.3 Medium 中图片插值。

2.4.4 Low 低图片插值。

2.5 sourceSize 设置图片解码尺寸，降低图片的分辨率，常用于需要让图片显示尺寸比组件尺寸更小的场景。和ImageFit.None配合使用时可在组件内显示小图。单位：px

2.6 fillColor 设置填充颜色，设置后填充颜色会覆盖在图片上。

2.7 autoResize 设置图片解码过程中是否对图源自动缩放。设置为true时，组件会根据显示区域的尺寸决定用于绘制的图源尺寸，有利于减少内存占用。如原图大小为1920x1080，而显示区域大小为200x200，则图片会自动解码到200x200的尺寸，大幅度节省图片占用的内存。默认值：true

2.8 copyOption 设置图片是否可复制。当copyOption设置为非CopyOptions.None时，支持使用长按、鼠标右击、快捷组合键'CTRL+C'等方式进行复制。默认值：CopyOptions.None

3.实操

给图片设置一个宽，应为图片的大小是变化的，所以宽不是一个固定值，是一个变量。在build的外面设置一个叫imgWidth的变量，类型是number，初始值是100。并把图片的宽绑定给imgWidth，imgWidth是一个可以被改变的变量，改变imgWidth的值必须用this引用。

@Entry
@Component
struct aaa{
  @State imgWidth:number=100//创建一个可以被改变的值，初始值为100
  build() {
    Column() {
      Column(){
        Image($r('app.media.icon'))
          .width(this.imgWidth)//给图片设置宽，并绑定imgWidth
      }
      .justifyContent(FlexAlign.Center)
      .width('100%')
      .height(300)
      Row(){

      }
      .width('90%')
      .height(50)
      .justifyContent(FlexAlign.SpaceEvenly)

    }
    .width('100%')
    .height('100%')
  }
}

Text组件

1.参数：Text(content?: string | Resource)

content 文本内容。包含子组件Span时不生效，显示Span内容，并且此时text组件的样式不生效。

2.属性：

2.1 textAlig 设置文本段落在水平方向的对齐方式默认值：TextAlign.Start

2.1.1 Start 水平对齐首部。

2.1.2 Center 水平居中对齐。

2.1.3 End 水平对齐尾部。

2.2 textOverflow 设置文本超长时的显示方式。默认值：{overflow: TextOverflow.Clip}

2.2.1 Clip 文本超长时进行裁剪显示。

2.2.2 Ellipsis 文本超长时显示不下的文本用省略号代替。

2.2.3 None 文本超长时不进行裁剪。

2.3 maxLines 设置文本的最大行数。

2.4 lineHeight 设置文本的文本行高，设置值不大于0时，不限制文本行高，自适应字体大小，Length为number类型时单位为fp。

2.5 decoration 设置文本装饰线样式及其颜色。默认值：{type: TextDecorationType.None, color：Color.Black}

2.5.1 TextDecorationType

2.5.1.1 Underline 文字下划线修饰。

2.5.1.2 LineThrough 穿过文本的修饰线。

2.5.1.3 文字上划线修饰。

2.5.1.4 不使用文本装饰线。

2.5.2 color

2.5.2.1 Color 颜色枚举值。

2.5.2.2 number HEX格式颜色，支持rgb。示例：0xffffff。

2.5.2.3 string rgb或者rgba格式颜色。示例：'#ffffff', '#ff000000', 'rgb(255, 100, 255)', 'rgba(255, 100, 255, 0.5)'。

2.5.2.4 Resource 使用引入资源的方式，引入系统资源或者应用资源中的颜色。

3.事件：

onChange(callback: (value: string) => void) 输入内容发生变化时，触发该回调。value：输入的文本内容。触发该事件的条件：1、键盘输入。2、粘贴、剪切。3、键盘快捷键Ctrl+v。

4.实操

@Entry
@Component
struct aaa{
  @State imgWidth:number=100
  build() {
    Column() {
      Column(){
        Image($r('app.media.icon'))
          .width(this.imgWidth)
      }
      .justifyContent(FlexAlign.Center)
      .width('100%')
      .height(300)
      Row(){
        Text('图片尺寸：')
        TextInput({text:'100' })
          .width(130)//设置宽
          .type(InputType.Number)//只能输入数字，不能输入其他字符
          .onChange((value)=>{//添加事件，获取输入的值，value：输入的文本内容
            console.log(value+'')//在日志中查看有没有获取到输入的值，+'' 把value的类型变成字符串
            this.imgWidth=parseInt(value)//把获取到的值赋值给imgWidth，parseInt:把字符串转化成number类型
          })
      }
      .width('90%')
      .height(50)
      .justifyContent(FlexAlign.SpaceEvenly)

    }
    .width('100%')
    .height('100%')
  }
}

Slider组件

1.参数：

1.1 value 当前进度值，默认值：参数min

1.2 min 设置最小值。默认值：0

1.3 max 设置最大值。默认值：100

1.4 step 设置Slider滑动步长。默认值：1取值范围：[0.01, max]

1.5 style 设置Slider的滑块与滑轨显示样式。默认值：SliderStyle.OutSet

1.6 direction 设置滑动条滑动方向为水平或竖直方向。默认值：Axis.Horizontal

1.7 reverse 设置滑动条取值范围是否反向，横向Slider默认为从左往右滑动，竖向Slider默认为从上往下滑动。默认值：false

2.专属属性:

2.1 blockColor 设置滑块的颜色

2.2 trackColor 设置滑轨的背景颜色

2.3 selectedColor 设置滑轨的已滑动部分颜色

2.4 showSteps 设置当前是否显示步长刻度值默认值：false

2.5 showTips 设置滑动时是否显示百分比气泡提示。默认值：false

2.6 trackThickness 设置滑轨的粗细。

3.事件：

onChange(callback: (value: number, mode: SliderChangeMode) => void) Slider滑动时触发事件回调。value：当前滑动进度值。若返回值有小数，可使用number.toFixed()方法将数据处理为预期的精度。mode：拖动状态。

4.实操

@Entry
@Component
struct aaa{
  @State imgWidth:number=100
  build() {
    Column() {
      Column(){
        Image($r('app.media.icon'))
          .width(this.imgWidth)
      }
      .justifyContent(FlexAlign.Center)
      .width('100%')
      .height(300)
      Row(){
        Text('图片尺寸：')
        TextInput({text:'100' })
          .width(130)
          .type(InputType.Number)
          .onChange((value)=>{
            console.log(value+'')
            this.imgWidth=parseInt(value)
          })
      }
      .width('90%')
      .height(50)
      .justifyContent(FlexAlign.SpaceEvenly)
      Divider()//分割线，分隔器组件，分隔不同内容块/内容元素
        .width('70%')//宽
        .strokeWidth(3)//分割线宽度
      Slider({value:100,max:300,style: SliderStyle.InSet})//value:当前进度值,max:滑块最大值，style: SliderStyle.InSet：滑块在滑轨内。
        .width('80%')//滑块宽
        .margin(30)//滑块距离包裹它的边框距离
        .showTips(true)//显示百分比
        .onChange((value)=>{//滑动时触发事件回调。
          this.imgWidth=value//把滑块的值赋值给imgWidth，value：当前滑动进度值
          console.log(value.toString())//在日志中查看有没有获取到滑块的值，toString():把获取到的值变成字符串类型
        })
    }
    .width('100%')
    .height('100%')
  }
}