温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Flutter将整个App变为灰色的方法是什么

发布时间:2021-12-14 10:07:28 来源:亿速云 阅读:163 作者:iii 栏目:开发技术

这篇文章主要介绍“Flutter将整个App变为灰色的方法是什么”,在日常操作中,相信很多人在Flutter将整个App变为灰色的方法是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Flutter将整个App变为灰色的方法是什么”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

    前言

    为了让更多的人永远记住12月13日,各大厂都在这一天将应用变灰了。

    Flutter将整个App变为灰色的方法是什么

    那么接下来我们看一下Flutter是如何实现的。

    Flutter中实现整个App变为灰色

    在Flutter中实现整个App变为灰色是非常简单的,

    只需要在最外层的控件上包裹ColorFiltered,用法如下:

    ColorFiltered(颜色过滤器)

    看名字就知道是增加颜色滤镜效果的,

    ColorFiltered(
          colorFilter:ColorFilter.mode(Colors.grey, BlendMode.color),
          child: child,
        );

    将上面代码放到全局根widget下,即可设置全部页面颜色变灰

    通过colorFilter可设置某种颜色过滤,比如变灰设置灰色即可,以及颜色混合模式
    ColorFiltered 小部件继承SingleChildRenderObjectWidget,因此会提供一个child子布局,这里可以放置想要过滤颜色的页面;

    最终我们就合成一张这样带滤镜效果

    追踪源码

    我我们持续追踪源码到 RenderImage 类中,可以看到最终也是创建了一个 ColorFilter

    class ColorFiltered extends SingleChildRenderObjectWidget {
      /// Creates a widget that applies a [ColorFilter] to its child.
      ///
      /// The [colorFilter] must not be null.
      const ColorFiltered({required this.colorFilter, Widget? child, Key? key})
          : assert(colorFilter != null),
            super(key: key, child: child);
    
      /// The color filter to apply to the child of this widget.
      final ColorFilter colorFilter;
    
      @override
      RenderObject createRenderObject(BuildContext context) => _ColorFilterRenderObject(colorFilter);
    
      @override
      void updateRenderObject(BuildContext context, RenderObject renderObject) {
        (renderObject as _ColorFilterRenderObject).colorFilter = colorFilter;
      }
    
      @override
      void debugFillProperties(DiagnosticPropertiesBuilder properties) {
        super.debugFillProperties(properties);
        properties.add(DiagnosticsProperty<ColorFilter>('colorFilter', colorFilter));
      }
    }

    设置前

    Flutter将整个App变为灰色的方法是什么

    设置后

    Flutter将整个App变为灰色的方法是什么

    功能就这样实现了,功能简单,意义不凡。

    附:ColorFiltered还可以实现类似“滤镜”效果,让一张图片和color进行融合:

    Row(
    
          children: <Widget>[
    
            Expanded(
    
              child: Image.asset('images/1.png'),
    
            ),
    
            Expanded(
    
                child: ColorFiltered(
    
              colorFilter: ColorFilter.mode(Colors.pink[200], BlendMode.modulate),
    
              child: Image.asset('images/1.png'),
    
            ))
    
          ],
    
        )

    到此,关于“Flutter将整个App变为灰色的方法是什么”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    AI