flutter - Flutter - blurRadius 奇怪的行为

问题描述

所以我有一个旋转容器

这是工作代码：

@override
void initState() {
   _controller = AnimationController(
   vsync: this,
   duration: Duration(seconds: 32),
 )..repeat();
  super.initState();
 }

....

  @override
 Widget build(BuildContext context) {
  double screenHeight = MediaQuery.of(context).size.height;
  double screenWidth = MediaQuery.of(context).size.width;
   return Container(
    child: Column(
     children: <Widget>[
      SizedBox(
        height: screenHeight,
        child: Stack(
          children: [
            Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [

              ],
            ),
            Divider(),
            Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Center(
                  child: AnimatedBuilder(
                    animation: _controller,
                    builder: (_, child) {
                      return Transform(
                        alignment: FractionalOffset.center,
                        transform: Matrix4.identity()
                          ..setEntry(3, 2, 0.002)
                          ..rotateY(0.5 * -math.pi)
                          ..rotateZ(-0.1 * math.pi)
                          ..rotateY((_controller.value - 0.6) * -math.pi)
                          ..rotateX(0.5 * math.pi),
                        child: child,
                      );
                    },

                    child: Container(

                      //color: Colors.yellow.withOpacity(0.5),
                      height: 300,
                      width: 200,

                      decoration: BoxDecoration(
                       borderRadius: BorderRadius.circular(40),
                        boxShadow: [
                          BoxShadow(
                            color: Colors.yellow.withOpacity(0.5),
                           spreadRadius: 40,

         //UNCOMMENTING THIS LINE CAUSES STRANGE BEHAVIOUR
                            //blurRadius: 50,
                            //offset: const Offset(0, 0),
                          ),
                        ],
                      ),
                    ),
                    //),
                  ),
                ),
                SizedBox(
                  height: 170,
                )
              ],
            ),
          ],
        ),
      ),
    ],
  ),
 );
}

但是，当我取消注释 blurRadius 代码行时，它的行为很奇怪。看看容器在垂直于屏幕时是如何变形的。

我希望它始终模糊。这是一件很奇怪的事情。

标签： flutteranimationcontainersblur

Flutter 绘制阴影的成本非常高，因此像这样对它们进行动画处理是不好的，因为 Flutter 必须不断地重新绘制阴影。由于阴影也会导致您的变换问题，您应该尝试在 GIMP/Adobe 中制作您想要的阴影或将其截屏，然后将其添加到您的项目中。

您的项目目录中应该有一个 assets 或 images 文件夹，即YOUR_FLUTTER_PROJECT/images. 把阴影图像放在那里。

然后，在pubspec.yaml文件中，您的资产应该有一个字段。在那里添加影子文件的路径，例如：

assets:
  - images/a_dot_burr.jpeg
  - images/a_dot_ham.jpeg
  - images/YOUR_SHADOW_FILE

跑flutter pub get

在您的代码中，将您的替换Container为：

Image.asset('images/YOUR_SHADOW_FILE', height: 300, width: 200),

我还没有测试它，但我认为它应该仍然有效。

flutter - Flutter - blurRadius 奇怪的行为

问题描述

解决方案

推荐阅读