使 BoxDecoration 图像褪色/透明 [英] Make BoxDecoration image faded/transparent
本文介绍了使 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',
),
),
),
),
),
],
),
);
}
Opacity
小部件是另一种选择.
The Opacity
widget is another option.
您还可以将效果预先应用于资产.
You could also pre apply the effect to the asset.
这篇关于使 BoxDecoration 图像褪色/透明的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文