时间戳

首页 > 解决方案 > 剪裁后材料标高不起作用

dart - 剪裁后材料标高不起作用

问题描述

Material将小部件elevation包装到ClipPath.

剪裁前。

剪裁前

剪裁后。

剪裁后

任何人都知道为什么会这样？

这是我的代码。

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Center(
          child: ClipPath(
            clipper: MyCustomClipper(),
            child: Material(
              child: SizedBox(height: 100.0, width: 100.0),
              color: Colors.lightBlue,
              elevation: 8.0,
            ),
          ),
        ),
      ),
    );
  }
}

class MyCustomClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    double x = size.width;
    double y = size.height;
    Path path = Path()
      ..lineTo(0, y)
      ..lineTo(x, y - 20.0)
      ..lineTo(x, 0)
      ..lineTo(0, 0)
      ..close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => true;
}

标签： dartflutterflutter-layout

解决方案

我有同样的问题。

这就是我所做的，将 ClipPath 小部件包装在 Material 小部件中，

赋予颜色为 --> Colors.transparent, //这很重要

设置 --> 海拔：100

这是我自己的 ClipPath 底部导航栏的输出 在此处输入图像描述

希望它可以帮助某人。

推荐阅读