使BoxDecoration图像褪色/透明

Question

我有以下代码片段，我想让图像褪色，这样它就不会干扰容器中的其他项目。 是否有可以实现此目的的过滤器？

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

Answer 1

您可以为 var res = message.Payload.Body.Data.Replace("-", "+").Replace("_", "/"); byte[] bodyBytes = Convert.FromBase64String(res); string val = Encoding.UTF8.GetString(bodyBytes); DecorationImage提供背景图片灰色（使用ColorFilter彩色滤镜）或半透明（使用saturation彩色滤镜）。

此示例的代码如下所示。

dstATop

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', ), ), ), ), ), ], ), ); } 窗口小部件是另一种选择。

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

Answer 2

您可以简单地使用

ColorFiltered(
  colorFilter: ColorFilter.mode(Colors.black.withOpacity(0.2), BlendMode.dstATop),
  child: YourWidget(),
) 

Answer 3

您可以简单地使用Stack小部件，并在图像上方使用简单的彩色容器以降低不透明度。

EG：

        import 'package:flutter/material.dart';
        import 'package:flutter/widgets.dart';
        import 'package:flutter/rendering.dart';

        import './page2.dart';
        import './page3.dart';
        import './page4.dart';

        void main() {
          debugPaintSizeEnabled = true ;
          return runApp(Start());
        }

        class Start extends StatelessWidget {

          @override
          Widget build(BuildContext context) {
            // TODO: implement build
            return MaterialApp(
              title: 'InIt',
              home: Builder(builder: (context) {
                return GestureDetector(
                  onTap: () {
                    return Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (BuildContext context) {
                          return Page2();
                        },
                      ),
                    );
                  },
                  child: Scaffold(
                    body: Stack(
                      children: <Widget>[

                        Container(
                          decoration: BoxDecoration(
                            image: DecorationImage(
                                image: AssetImage('images/page1.jpg'),
                                fit: BoxFit.fitHeight),
                          ),
                        ),
                        Container(
                          color: Color.fromRGBO(255, 255, 255, 0.19),
                        ),
                        Container(
                          alignment: Alignment.center,
                          child: Center(
                            child: Text(
                              'LETS BE PRODUCTIVE TODAY',
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  fontSize: 50.0,
                                  fontFamily: 'bold',
                                  fontWeight: FontWeight.bold,
                                  color: Color.fromRGBO(255, 255, 255, 1)),
                            ),
                          ),
                        ),
                        Container(
                          margin: EdgeInsets.only(bottom: 10.0),
                          alignment: Alignment.bottomCenter,
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: <Widget>[
                              RawMaterialButton(
                                onPressed: () {},
                                constraints:
                                    BoxConstraints.tightFor(height: 10.0, width: 10.0),
                                shape: CircleBorder(),
                                fillColor: Colors.white,
                              ),
                              Page2call(),
                              Page3call(),
                              Page4call(),
                            ],
                          ),
                        )
                      ],
                    ),
                  ),
                );
              }),
            );
          }
        }

        class Page2call extends StatelessWidget {
          @override
          Widget build(BuildContext context) {
            // TODO: implement build
            return RawMaterialButton(
              onPressed: () {
                return Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (BuildContext context) {
                      return Page2();
                    },
                  ),
                );
              },
              constraints: BoxConstraints.tightFor(height: 10.0, width: 10.0),
              shape: CircleBorder(),
              fillColor: Colors.white,
            );
          }
        }

        class Page3call extends StatelessWidget {
          @override
          Widget build(BuildContext context) {
            // TODO: implement build
            return RawMaterialButton(
              onPressed: () {
                return Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (BuildContext context) {
                      return Page3();
                    },
                  ),
                );
              },
              constraints: BoxConstraints.tightFor(height: 10.0, width: 10.0),
              shape: CircleBorder(),
              fillColor: Colors.white,
            );
          }
        }

        class Page4call extends StatelessWidget {
          @override
          Widget build(BuildContext context) {
            // TODO: implement build
            return RawMaterialButton(
              onPressed: () {
                return Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (BuildContext context) {
                      return Page4();
                    },
                  ),
                );
              },
              constraints: BoxConstraints.tightFor(height: 10.0, width: 10.0),
              shape: CircleBorder(),
              fillColor: Colors.white,
            );
          }
        }

这是一个完全实际实现的示例。您可以在此处增加不透明度 为了使背景更加褪色，第四个参数是不透明度：

Container(
                color: Color.fromRGBO(255, 255, 255, 0.19),
         ),

此方法还使您能够选择褪色滤镜的颜色。

Answer 4

对于那些怀疑 性能是否合格（因为图像和不透明度都是资源密集型事物）的人，这是我对文档和源代码和答案。

结论：使用DecorationImage(colorFilter: ...)的速度将与官方文档建议的速度一样。 （但是Opacity，ColorFilter小部件不是）

首先，我们不应该使用Opacity或ColorFilter小部件，因为它可能触发saveLayer且价格昂贵（按official doc）。 / p>

相反，我们should

仅在必要时使用“不透明度”小部件。有关将不透明度直接应用于图像的示例，请参见Opacity API页面上的“透明图像”部分，该过程比使用Opacity小部件要快。

查看建议的method，我们看到以下示例：

Image.network(
  'https://raw.githubusercontent.com/flutter/assets-for-api-docs/master/packages/diagrams/assets/blend_mode_destination.jpeg',
  color: Color.fromRGBO(255, 255, 255, 0.5),
  colorBlendMode: BlendMode.modulate
)

现在的问题是，投票最多的答案（即以下代码）是否与官方文档提到的Image小部件一样快？

Container(
  child: Text('hi'),
  decoration: 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',
      ),
    ),
  ),
),

要回答这个问题，让我们看一下Image.network的来源。该构造函数将直接填写colorBlendMode的{​​{1}}字段。

在Image的{​​{1}}中，它将直接传递给Image的{​​{1}}字段。

然后，build将创建RawImage（这是一个RenderObject）并更新colorBlendMode。

接下来，请注意RenderImage如何处理此问题-

RawImage

深入研究RenderImage将显示RenderImage._colorBlendMode（并且 BlendMode? _colorBlendMode; set colorBlendMode(BlendMode? value) { if (value == _colorBlendMode) return; _colorBlendMode = value; _updateColorFilter(); markNeedsPaint(); } ... /// If non-null, this color is blended with each image pixel using [colorBlendMode]. Color? get color => _color; Color? _color; set color(Color? value) { if (value == _color) return; _color = value; _updateColorFilter(); markNeedsPaint(); } ... ColorFilter? _colorFilter; void _updateColorFilter() { if (_color == null) _colorFilter = null; else _colorFilter = ColorFilter.mode(_color!, _colorBlendMode ?? BlendMode.srcIn); } 不会在其他地方使用，除非创建此rendering/image.dart。

因此，我们知道colorBlendMode的两个参数最终将进入_colorBlendMode。

实际上，_colorFilter将在Image.network中用作

RenderImage._colorFilter

所以我们知道！将在_colorFilter中使用它与本机方法通信。难怪它比RenderImage.paint快。

不返回我们的 @override void paint(PaintingContext context, Offset offset) { ... paintImage( canvas: context.canvas, rect: offset & size, image: _image!, colorFilter: _colorFilter, ... ); } 。在paintImage内，我们看到Opacity：

DecorationImage

嘿，那是完全一样的！

Answer 5

使用Opacity class。 使其子项部分透明的小部件。

Opacity(
  opacity: 0.5,
  child: Image.asset('images/lion.png'),
)