时间戳

首页 > 解决方案 > 扑。前景模糊效果背景视图

flutter - 扑。前景模糊效果背景视图

问题描述

在使用 Flutter 处理模糊动作期间，您可能会遇到在背景上强制模糊效果的问题。通过使用Stack和内部BackdropFilter。模糊前景视图，影响边界外的其他视图。如何避免这种情况？

//.....
      child: new Stack(
        fit: StackFit.expand,
        children: <Widget>[
          new Image.asset(
            'assets/bg_img.jpg',
            fit: BoxFit.fitHeight,
          ),
          new Container(
            color: Colors.transparent,
            child: new Center(
              child: new Center(
                child: new ClipRect(
                  child: new BackdropFilter(
                    filter: new ui.ImageFilter.blur(
                      sigmaX: 6.0,
                      sigmaY: 6.0,
                    ),
//.....

标签： flutterflutter-layout

解决方案

为了使用Stack视图配置模糊效果，您需要AlignmentDirectional在Stack. 前任。以下。

child: Stack(alignment: AlignmentDirectional.center, 
        children: <Widget>[Column(
             //.. Your blur effect here.

推荐阅读