dart 使BoxDecoration图像褪色/透明

brgchamk 于 2023-07-31 发布在其他

关注(0)|答案(5)|浏览(150)

我有下面的代码片段，我想使图像褪色，这样它就不会干扰容器中的其他项目。有没有一种过滤器可以做到这一点？

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

字符串

dart

来源：https://stackoverflow.com/questions/44612599/make-boxdecoration-image-faded-transparent

5条答案

按热度按时间

xnifntxz1#

你可以给予你的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',
                ),
              ),
            ),
          ),
        ),
      ],
    ),
  );
}

字符串
Opacity小部件是另一种选择。
也可以将效果预先应用于资源。

赞(0）回复(0）举报 2023-07-31

t3irkdon2#

您可以简单地使用

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

字符串

赞(0）回复(0）举报 2023-07-31

4dbbbstv3#

对于那些想知道性能是否还可以 *（因为图像和不透明性都是资源密集型的东西）的人，这里是我对文档和源代码的挖掘和答案。

结论：使用DecorationImage(colorFilter: ...)将与官方文件建议的速度一样快。（但Opacity、ColorFilter小工具不支持）

首先，我们不应该使用Opacity或ColorFilter小工具，因为它可能会触发saveLayer，而且很昂贵（根据官方文件）。
相反，我们应该
请仅在必要时使用“不透明度”Widget。有关直接将不透明度应用于图像的示例，请参阅“不透明度API”页面中的“透明图像”部分，该示例比使用“不透明度”Widget更快。
查看建议的方法，我们可以看到以下示例：

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的源代码。此构造函数将直接填充Image的colorBlendMode字段。
在Image的build中，它将被 * 直接 * 传递到RawImage的colorBlendMode字段。
然后，RawImage将创建RenderImage（这是一个渲染对象）并更新RenderImage._colorBlendMode。
接下来，请注意RenderImage是如何处理此问题的-

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。在painting/decoration_image.dart内部，我们可以看到DecorationImagePainter：

class DecorationImagePainter {
  DecorationImagePainter._(this._details, ...);

  final DecorationImage _details;

  void paint(Canvas canvas, Rect rect, Path? clipPath, ImageConfiguration configuration) {
    ...
    paintImage(
      canvas: canvas,
      rect: rect,
      image: _image!.image,
      colorFilter: _details.colorFilter,
      ...
    );
  }
}

型
嘿，那完全一样！

赞(0）回复(0）举报 2023-07-31

xriantvc4#

您可以简单地使用一个堆栈小部件，并在图像上方使用一个简单的彩色容器，降低不透明度。
例如：

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),
         ),

型
该方法还提供了选择渐变滤波器的颜色的能力。

赞(0）回复(0）举报 2023-07-31

mwngjboj5#

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

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

字符串

赞(0）回复(0）举报 2023-07-31

我来回答

dart 使BoxDecoration图像褪色/透明

5条答案

相关问题

热门标签

最新问答