Android 要在CustomClipper上添加高程<；路径>；只是边框，而不是下面的整个材质

我试图通过使用材质的高程在自定义路径上添加高程，但看起来没有这样做 我尝试了其他方法，但得到了整个材质（矩形）的高程。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.pink[300],
        body: Column(
          children: <Widget>[
            TopContainer(),
          ],
        ));
  }
}

class TopContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ClipPath(
        clipper: ImageClipper(),
        child: Material(
          elevation: 15.0,
          child: Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                fit: BoxFit.cover,
                image: NetworkImage(
                  'https://images.pexels.com/photos/3309467/pexels-photo-3309467.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
                ),
              ),
            ),
            constraints: BoxConstraints.expand(
              width: double.infinity,
              height: MediaQuery.of(context).size.height * 0.5,
            ),
          ),
        ));
  }
}

class ImageClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0.0, size.height);
    var firstControlPoint = Offset(size.width * 0.35, size.height * 0.75);
    var firstEndPoint = Offset(size.width * 0.65, size.height * 0.85);
    path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
        firstEndPoint.dx, firstEndPoint.dy);
    ///////////////////////////////////////////////
    var secondControlPoint = Offset(size.width * 0.85, size.height * 0.90);
    var secondEndPoint = Offset(size.width, size.height * 0.75);
    path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
        secondEndPoint.dx, secondEndPoint.dy);

    //    path.lineTo(size.width, size.height * 0.9);
    path.lineTo(size.width, 0.0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return false;
  }
}

导入“包装：颤振/材料.省道”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
debugShowCheckedModeBanner:false，
主页：主屏幕（），
);
}
}
类主屏幕扩展无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回脚手架(
背景颜色：颜色。粉红色[300]，
正文：专栏(
儿童：[
TopContainer（），
],
));
}
}
类TopContainer扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回ClipPath(
裁剪器：ImageClipper（），
儿童：材料(
标高：15.0，
子：容器(
装饰：盒子装饰(
图像：装饰图像(
适合：BoxFit.cover，
图片：NetworkImage(
'https://images.pexels.com/photos/3309467/pexels-photo-3309467.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
),
),
),
约束：BoxConstraints.expand(
宽度：double.infinity，
高度：MediaQuery.of（上下文）.size.height*0.5，
),
),
));
}
}
类ImageClipper扩展了CustomClipper{
@凌驾
路径getClip（大小）{
var path=path（）；
path.lineTo（0.0，大小.高度）；
var firstControlPoint=偏移量（大小.宽度*0.35，大小.高度*0.75）；
var firstEndPoint=偏移（size.width*0.65，size.height*0.85）；
path.quadraticBezierTo（firstControlPoint.dx，firstControlPoint.dy，
firstEndPoint.dx，firstEndPoint.dy）；
///////////////////////////////////////////////
var secondControlPoint=偏移量（大小.宽度*0.85，大小.高度*0.90）；
var secondEndPoint=偏移量（size.width，size.height*0.75）；
path.quadraticBezierTo（secondControlPoint.dx，secondControlPoint.dy，
secondEndPoint.dx，secondEndPoint.dy）；
//path.lineTo（size.width，size.height*0.9）；
path.lineTo（size.width，0.0）；
path.close（）；
返回路径；
}
@凌驾
bool shouldReclip（CustomClipper oldClipper）{
返回false；
}
}

我试图通过使用材质的高程在自定义路径上添加高程，但看起来好像什么都没有做，我尝试了其他方法，但得到了整个材质（矩形）的高程

---

使用自定义的

形状顺序

class WaveShapeBorder extends ShapeBorder {
  @override EdgeInsetsGeometry get dimensions => EdgeInsets.zero;
  @override ui.Path getInnerPath(ui.Rect rect, {ui.TextDirection textDirection}) => null;

  @override
  ui.Path getOuterPath(ui.Rect rect, {ui.TextDirection textDirection}) {
    var ctrl1 = FractionalOffset(0.35, 0.75).withinRect(rect);
    var end1  = FractionalOffset(0.65, 0.85).withinRect(rect);
    var ctrl2 = FractionalOffset(0.85, 0.90).withinRect(rect);
    var end2  = FractionalOffset(1.0,  0.75).withinRect(rect);
    return Path()
      ..moveTo(rect.topLeft.dx, rect.topLeft.dy)
      ..lineTo(rect.bottomLeft.dx, rect.bottomLeft.dy)
      ..quadraticBezierTo(ctrl1.dx, ctrl1.dy, end1.dx, end1.dy)
      ..quadraticBezierTo(ctrl2.dx, ctrl2.dy, end2.dx, end2.dy)
      ..lineTo(rect.topRight.dx, rect.topRight.dy)
      ..close();
  }

  @override void paint(ui.Canvas canvas, ui.Rect rect, {ui.TextDirection textDirection}) {}
  @override ShapeBorder scale(double t) => this;
}

下面是用于测试的示例代码：

class WaveShapeBorderTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [Colors.teal, Colors.green],
          begin: Alignment.topRight,
          end: Alignment.centerLeft,
        ),
      ),
      child: Stack(
        children: [
          Material(
            elevation: 6,
            shape: WaveShapeBorder(),
            clipBehavior: Clip.antiAlias,
            child: Image.asset('images/someImage.png'),
          ),
        ],
      ),
    );
  }
}

当然，您可以自由使用它，但主要思想是使用

Material.shape

和

Material.clipBehavior

属性

这是一个最终结果：

编辑如果您认为您的阴影太“轻”，可以添加一个附加的带有自定义阴影的

容器

：

class WaveShapeBorderTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [Colors.teal, Colors.green],
          begin: Alignment.topRight,
          end: Alignment.centerLeft,
        ),
      ),
      child: Stack(
        children: [
          Container(
            decoration: ShapeDecoration(
              shape: WaveShapeBorder(),
              shadows: [
                BoxShadow(color: Colors.black, blurRadius: 16, offset: Offset(2, 2), spreadRadius: 8),
              ]
            ),
            child: Material(
              clipBehavior: Clip.antiAlias,
              shape: WaveShapeBorder(),
              child: Image.asset('images/someImage.png',),
            ),
          ),
          Icon(Icons.photo, size: 64,),
        ],
      ),
    );
  }
}

你会看到：

---

尝试使用

Material.shape

和

Material.clipBehavior

properties@pskink尝试过但没有结果。发布代码，然后，你使用了什么

clipBehavior

呢？那么你能发布你的自定义

shapeorder

代码吗？@pskink这就是我目前所做的。你这是什么意思？还有？你运行我发布的代码时看到阴影了吗？没有！如我共享的图片所示，没有阴影，如果您可以发布整个工作代码，这将很有帮助。顺便说一句，

elevation

在

dartpad

中不工作，但是第二个代码带有

阴影：[…

works事件在

dartpad

我将尝试，是否有任何原因说明材质提升不使用customPaint（我的初始代码）？