Flutter：透明剪裁的 AppBar

Question

我有一个挥动的应用栏，看起来像这样：

如您所见，裁剪区域不是透明的，而是具有（黑色）canvas 颜色，并且阻挡了一些 ListView 条目。

应用栏的代码如下所示：

class MainAppBar extends StatelessWidget implements PreferredSizeWidget {
...
@override
Widget build(BuildContext context) {
    return PreferredSize(
        child: ClipPath(
          clipper: WaveClip(),
          child: Container(
            color: getAppBarColor(),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                ...
              ],
            ),
          ),
        ),
        preferredSize: const Size.fromHeight(kToolbarHeight + 60));
  }
}

正如大家所看到的，我正在使用带有自定义剪辑器的 ClipPath 来剪辑 Container。如何以透明方式剪辑它？

Answer 1

试试这个：

Scaffold(
  extendBodyBehindAppBar: true,

这将使应用栏后面的项目可见

Flutter：透明剪裁的 AppBar

Flutter: Transparent clipped AppBar

flutter

dart

mobile

transparency