HarmonyOS中的Image图片样式设置

最新推荐文章于 2024-10-29 15:24:08 发布

忙碌的布谷鸟

最新推荐文章于 2024-10-29 15:24:08 发布

阅读量1.7k

点赞数 12

分类专栏： HarmonyOS 文章标签： HarmonyOS

本文链接：https://blog.csdn.net/guoquanyou/article/details/135850563

版权

HarmonyOS 专栏收录该内容

9 篇文章

订阅专栏

文章详细介绍了如何在Flutter应用中使用Image组件，包括设置图片的渲染模式（原色或黑白）、调整解码尺寸以降低分辨率、以及应用像素颜色滤镜。展示了通过API如`renderMode`、`sourceSize`和`colorFilter`实现图片效果的技术方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@Entry
@Component
struct ImageSimple {

  build() {
    Column({ space: 10 }) {
      //通过renderMode属性设置图片的渲染模式为原色或黑白
      Row({ space: 50 }) {
        Image($r('app.media.girl'))
          // 设置图片的渲染模式为原色
          .renderMode(ImageRenderMode.Original)
          .width(100)
          .height(100)
          .border({ width: 1 })
            // overlay是通用属性，用于在组件上显示说明文字
          .overlay('Original', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })

        Image($r('app.media.girl'))
          // 设置图片的渲染模式为黑白
          .renderMode(ImageRenderMode.Template)
          .width(100)
          .height(100)
          .border({ width: 1 })
          .overlay('Template', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
      }
      .margin(20)
      .justifyContent(FlexAlign.Center)

      //通过sourceSize属性设置图片解码尺寸，降低图片的分辨率。
      Row({ space: 50 }) {
        Image($r('app.media.girl'))
          .sourceSize({
            width: 150,
            height:180
          })
          .objectFit(ImageFit.ScaleDown)
          .aspectRatio(1)
          .width('25%')
          .border({ width: 1 })
          .overlay('width:150 height:180', { align: Alignment.Bottom, offset: { x: 0, y: 40 } })

        Image($r('app.media.girl'))
          .sourceSize({
            width: 90,
            height:100
          })
          .objectFit(ImageFit.ScaleDown)
          .width('25%')
          .aspectRatio(1)
          .border({ width: 1 })
          .overlay('width:90 height:100', { align: Alignment.Bottom, offset: { x: 0, y: 40 } })

      }

      //通过colorFilter修改图片的像素颜色，为图片添加滤镜。
      Row({ space: 50 }) {
        Image($r('app.media.girl'))
          .width('25%')
          .margin(10)

        Image($r('app.media.girl'))
          .width('25%')
          .margin(10)
          .colorFilter(
            [1, 1, 0, 0, 0,
              0, 1, 0, 0, 0,
              0, 0, 1, 0, 0,
              0, 0, 0, 1, 0])

      }
      .margin(30)
      .justifyContent(FlexAlign.Center)



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

1）通过renderMode属性设置图片的渲染模式为原色或黑白
2）通过sourceSize属性设置图片解码尺寸，降低图片的分辨率
3）通过colorFilter修改图片的像素颜色，为图片添加滤镜