Flutter 如何在或在内部使用自定义滚动视图时显示自定义剪裁器

如何解决Flutter 如何在或在内部使用自定义滚动视图时显示自定义剪裁器

所以这是交易。我在一个名为 WaveClipper 的类中创建了（有点）一个形状像波浪的自定义剪刀

波浪剪刀类：

class WaveClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    path.lineto(0,220);
    path.quadraticBezierTo(size.width / 4,160,size.width / 2,175);
    path.quadraticBezierTo(3 / 4 * size.width,190,size.width,130);
    path.lineto(size.width,0);
    path.close();
    return path;
  }

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

每当我使用脚手架显示它时，它都显示正常，但是当我尝试将它推入 CustomScrollView 内的 SliverListView 时，什么也没有出现，也没有错误。剪辑器是在内容下吗？以及如何显示它。

我想展示的剪刀：

         Stack(
            children: [
              ClipPath(
                  clipper: WaveClipper(),child: Container(
                    color: Colors.cyanAccent,))
               ],),

我想展示的地方：

Scaffold(
  appBar: AppBar(
    backgroundColor: Colors.white,elevation: 0.0,iconTheme: IconThemeData(
      color: Colors.cyanAccent,backgroundColor: Colors.white,body: CustomScrollView(
    physics: const BouncingScrollPhysics(),slivers: [
      SliverList(
        delegate: SliverChildListDelegate([
          //here 
          //there rest of the content (mostly buttons)
        ]),],)

感谢您的帮助，感谢您抽出宝贵时间。

解决方法

尝试为您的 Container 赋予一些维度：

Stack(
  children: [
    ClipPath(
      clipper: WaveClipper(),child: Container(
        height: 300,color: Colors.amber.shade200,),],

完整源代码

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,title: 'Flutter Demo',home: HomePage(),);
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,elevation: 0.0,iconTheme: IconThemeData(
          color: Colors.cyanAccent,backgroundColor: Colors.white,body: CustomScrollView(
        physics: const BouncingScrollPhysics(),slivers: [
          SliverList(
            delegate: SliverChildListDelegate([
              Stack(
                children: [
                  ClipPath(
                    clipper: WaveClipper(),child: Container(
                      height: 300,]),);
  }
}

class WaveClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0,220);
    path.quadraticBezierTo(size.width / 4,160,size.width / 2,175);
    path.quadraticBezierTo(3 / 4 * size.width,190,size.width,130);
    path.lineTo(size.width,0);
    path.close();
    return path;
  }

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

,

        Container(
            height: device.size.height * 0.3,child: Scaffold(
              body: Stack(
                clipBehavior: Clip.none,children: [
                  ClipPath(
                      clipper: WaveClipper(),child: Container(
                        color: Colors.cyanAccent,))
                ],

用 Scaffold 包裹并使用 Container 给该 Scaffold 一个尺寸，如果有人有更好的解决方案，请务必张贴。