颤振-裁剪后材料高程不起作用

时间:2019-03-05 14:52:33

标签: dart flutter flutter-layout

Material小部件的elevation包装到ClipPath后不起作用。

剪辑之前。

before-clipping

剪辑后。

after-clipping

有人知道为什么会这样吗?

这是我的代码。

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;
}

1 个答案:

答案 0 :(得分:1)

我遇到了同样的问题。

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

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

设置->海拔:100

这是我自己的ClipPath底部导航栏的输出 enter image description here

希望它对某人有帮助。