flutter - Flutter 如何在使用自定义滚动视图时（或内部）显示自定义剪辑器

Question

所以这是交易。我在一个名为 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)
        ]),
      ),
    ],
  ),
)

任何帮助表示赞赏，并感谢您抽出宝贵的时间。

Answer 1

尝试为您的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,
                      color: Colors.amber.shade200,
                    ),
                  ),
                ],
              ),
            ]),
          ),
        ],
      ),
    );
  }
}

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

Answer 2

        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 指定尺寸。

Answer 3

import 'package:flutter/material.dart';

class LoginScreen extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
   return Scaffold(
     body: Container(
       child: Stack(
         children: [
           Opacity(opacity: 0.5,
           child: ClipPath(
             clipper: WaveClipper(),
             child: Container(color: Colors.red,
             height: 200,),
           ),
           ),
           ClipPath(
             clipper: WaveClipper(),
             child: Container(color: Colors.deepOrange,
             height: 180,),
           ),
         ],
       ),
     ),
   );
  }
}

class WaveClipper extends CustomClipper<Path>{
  @override
  Path getClip(Size size){
    debugPrint(size.width.toString());
    var path = new Path();
    path.lineTo(0,size.height);
    var firstStart = Offset(size.width / 5,size.height);
    var firstEnd = Offset(size.width / 2.25,size.height - 50);
     path.quadraticBezierTo(firstStart.dx, firstStart.dy, firstEnd.dx, firstEnd.dy);

 var secondStart = Offset(size.width -(size.width/3.24), size.height - 105);
    var secondEnd = Offset(size.width, size.height - 10);
    path.quadraticBezierTo(secondStart.dx, secondStart.dy, secondEnd.dx, secondEnd.dy);

    path.lineTo(size.width, 0);
    path.close();
    return path;

  }

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