在Image小部件中使用opacity参数改变Image.asset的透明度

Question

我有一张简单的图片，希望将其变为半透明。我看过一些实现方法，但没有一个提到 Image.asset 自身的 opacity 参数，该参数接受一个类型为 Animation 的小部件。通过此参数可以永久更改不透明度吗？

Image.asset(
  "assets/images/triangles_small.png",
  height: 380,
),

- parkorian

Answer 1

实际上，问题是在Image.asset中使用opacity。您可以使用AlwaysStoppedAnimation。

Image.asset(
  "image/link",
  opacity: const AlwaysStoppedAnimation(.5),

想要动画效果，可以在这里传递动画参数。

- Yeasin Sheikh

Answer 2

如果您想在Image小部件内使用参数，可以构建类似于以下内容的东西：

Image.asset(
        "assets/images/triangles_small.png",
        height: 380,
        opacity: AnimationController(
            vsync: this,
            value: 0.5
        )
      ),

但更好的做法是使用@Hippo Fish收据，将图像包装在Opacity小部件中：

Opacity(
          opacity: 0.5,
          child: Image.asset(
            "image/link",
            height: 380,
            width: 380,
          ),
        )

当然你需要使用混合模式，例如：

with SingleTickerProviderStateMixin

使用垂直同步：这样做

- Dmitry Rodionov