模糊滤镜不显示基于角度的变换小部件

Question

在以下代码中，如果最里面的

Transform

小部件的角度为 -90 度，则不会显示任何内容：

import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:vector_math/vector_math.dart' as vm;

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Transform(
            transform: Matrix4.identity()
              ..setEntry(3, 2, 0.001)
              ..rotateX(vm.radians(20))
              ..rotateY(vm.radians(-30)),
            child: Stack(children: [
              Transform(
                alignment: Alignment.topLeft,
                transform: Matrix4.identity()..rotateX(vm.radians(-90)), // (1) Change this angle
                child: Container(
                  width: 100,
                  height: 200,
                  color: Colors.grey.shade200,
                ),
              ),
              Positioned.fill(
                child: BackdropFilter(
                  filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
                  child: Container(color: Colors.transparent),
                ),
              ),
            ]),
          ),
        ),
      ),
    );
  }
}

如果我将角度更改为-91，则会显示模糊的小部件。如果角度为-90，如何才能显示模糊的小部件？

Answer 1

当您围绕 X 轴将小部件旋转 90 度时 (rotateX(vm.radians(-90)))，可能会导致小部件消失，因为旋转有效地翻转了小部件，使其背向相机，使其从当前视点不可见。

要解决此问题，您可以尝试以下方法：

1。调整旋转角度： 不要旋转 -90 度，而是尝试较小的角度，例如 -89 度。这将几乎垂直地旋转小部件，但使其稍微向相机倾斜，使其部分可见。

transform: Matrix4.identity()..rotateX(vm.radians(-89)),

2。使用不同的变换： 您可以尝试绕 Y 轴或 Z 轴旋转，而不是绕 X 轴旋转，以达到所需的效果，同时保持小部件可见。

transform: Matrix4.identity()..rotateY(vm.radians(180)),

这会将小部件绕 Y 轴旋转 180 度，从而水平翻转它。

3.更改小部件的位置： 如果旋转小部件导致其消失，您可以尝试调整其在堆栈中的位置，以确保旋转后它仍然可见。

 Transform(
  alignment: Alignment.center,
  transform: Matrix4.identity()..rotateX(vm.radians(-90)),
  child: Container(
    width: 100,
    height: 200,
    color: Colors.grey.shade200,
  ),
),

这是您可以尝试的三件事