使BoxDecoration图像变淡/透明

问题描述

我有以下代码片段，我想使图像褪色，以免干扰容器中的其他物品。
是否有可以实现此目的的过滤器？

I have the following snippet of code and I would like to make the image faded such that it does not interfere with other items in the container.Is there a filter that could accomplish this?

child: new Card(
  child: new Container(
    decoration: new BoxDecoration(
      color: const Color(0xff7c94b6),
        image: new DecorationImage(
          image: new ExactAssetImage('lib/images/pic1.jpg'),
             )
           )
     )
   )

推荐答案

您可以给 DecorationImage 一个 ColorFilter 使其背景图像变灰（使用饱和度彩色滤光片）或半透明（使用 dstATop 彩色滤光片）。

You could give your DecorationImage a ColorFilter to make the background image grey (use a saturation color filter) or semi transparent (use a dstATop color filter).

此示例的代码如下。

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => new Scaffold(
    appBar: new AppBar(
      title: new Text('Grey Example'),
    ),
    body: new Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        new Card(
          child: new Container(
            child: new Text(
              'Hello world',
              style: Theme.of(context).textTheme.display4
            ),
            decoration: new BoxDecoration(
              color: const Color(0xff7c94b6),
              image: new DecorationImage(
                fit: BoxFit.cover,
                colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.2), BlendMode.dstATop),
                image: new NetworkImage(
                  'http://www.allwhitebackground.com/images/2/2582-190x190.jpg',
                ),
              ),
            ),
          ),
        ),
      ],
    ),
  );
}

不透明度小部件是另一种选择。

The Opacity widget is another option.

您还可以将效果预先应用于资产。

You could also pre apply the effect to the asset.

这篇关于使BoxDecoration图像变淡/透明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！