飞镖 – 使BoxDecoration图像褪色/透明

发布时间：2020-12-14 14:51:12 所属栏目：百科来源：网络整理

导读：我有以下代码片段,我想使图像褪色,以免它干扰容器中的其他项目. 是否有可以实现此目的的过滤器？ child: new Card( child: new Container( decoration: new BoxDecoration( color: const Color(0xff7c94b6),image: new DecorationImage( image: new ExactAss

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

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彩色滤镜).

screenshot

此示例的代码如下.

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',],);
}

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!