第二百二十二回 如何修改图片的透明度

我们在上一章回中介绍了"如何延时处理数据"相关的内容，本章回中将介绍 如何修改图片的透明度.闲话休提，让我们一起Talk Flutter吧。

1. 概念介绍

在实际项目中经常会使用图片组件，我们在前面章回中介绍过它的基本用法，本章回中将在此基础上介绍如何修改图片的透明度。

2. 修改方法

修改图片透明度有两种方法，一种是通过自身的属性来修改，另外一种是借助其它组件来修改，接下来我们将分别介绍这两种修改图片透明度的方式：

2.1 自身属性

图片组件Image提供了opacity属性来修改图片的透明度，不过该属性是动画类型(Animation?),我们需要给它赋值一个动画对象才可以。我们将在后面的小节中通过示例代码来演示它该属性的使用方法。

2.2 其它组件

我们还可以借助Opacity属性修改图片的透明度，该组件主要通过两个属性来修改图片的透明度，详细如下：

• child属性：用来存放被修改透明度的子组件；
• opacity属性：用来修改child对应的子组件的透明度；

我们只需要把图片组件赋值给该组件的childe属性，然后给opacity属性赋值就可以修改图片的透明度。不过需要注意的是opacity属性是double类型，它的取值范围在0-1之间。

该组件不但可以修改图片的透明的度，也可以修改其它组件的透明度。

3. 示例代码

///通过图片属性来修改
Image(
  opacity: AlwaysStoppedAnimation(0.2),
  width: 160,
  height: 100,
  image: AssetImage("images/panda.jpeg"),
  fit: BoxFit.fill,
  filterQuality:FilterQuality.high ,
);

///通过Opacity属性来来修改
Opacity(
  opacity: 0.6,
  child: Image(
    width: 160,
    height: 100,
    image: AssetImage("images/panda.jpeg"),
    fit: BoxFit.fill,
    filterQuality:FilterQuality.high ,
  ),
);

上面的示例代码中演示了两种修改图片透明度的方法，它的运行效果相同，我在这里就不演示程序运行结果了，建议大家自己动手去实践。

4. 内容总结

最后，我们对本章回中的内容做一个全面的总结：

• 可以使用Image组件的opacity属性修改图片的透明度；
• 可以使用Opacity组件修改图片的透明度；
• Opacity组件还可以修改其它组件的透明度；

看官们，与"如何修改图片的透明度"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!