带有堆栈的 Flutter 自定义剪裁器无法正常工作答案

【问题标题】：Flutter custom clipper with stack not working correctly带有堆栈的 Flutter 自定义剪裁器无法正常工作
【发布时间】：2019-08-11 08:28:03
【问题描述】：

我对 Flutter 非常感兴趣，目前我正在尝试使用 clipPart 小部件创建自定义裁剪器。但它似乎无法正常工作。

这是我的代码

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
  title: "My App",
  home: HomePage(),
  debugShowCheckedModeBanner: false,
));

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Container(
            alignment: Alignment.topCenter,
            color: Colors.teal,
            child: HomeScreenTop(),
          )
        ],
      ),
    );
  }
}

class HomeScreenTop extends StatefulWidget {
  @override
  _HomeScreenTopState createState() => _HomeScreenTopState();
}

class _HomeScreenTopState extends State<HomeScreenTop> {
  @override
  Widget build(BuildContext context) {
    return Stack(
      textDirection: TextDirection.ltr,
      children: <Widget>[
        Align(
          alignment: Alignment.topCenter,
          child: WaveContainer(),
        ),
      ],
    );
  }
}

class WaveContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ClipPath(
      clipper: CustomShapeClipper(),
      clipBehavior: Clip.antiAlias,
      child: Container(
        width: MediaQuery.of(context).size.width,
        height: 400.0,
        color: Colors.orange,
      ),
    );
  }
}

class CustomShapeClipper extends CustomClipper<Path> {
  @override
  getClip(Size size) {
    print(size.height);
    final Path path =Path();
    path.lineTo(size.width / 2, size.height);
    path.lineTo(size.width,  0);

    path.close();
    return path;
  }

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

}

我想做的是，从上到下创建一个三角形，正如我从教程中知道的那样，x = 0 和y = 0 的偏移量应该指向页面的left-top 角。所以如果像这样创建

path.lineTo(size.width / 2, size.height);
path.lineTo(size.width,  0);

路径应该是从left-top 到middle-down 到right-top 再回到left-top

但是当我尝试代码时我得到的是这样的

而且，堆栈不起作用..三角形应该在容器内隔离，但为什么自定义裁剪器可以超过底部容器？？

我真的很困惑，请帮助

【问题讨论】：

我只是复制粘贴了你的代码，它给了我imgur.com/oUwhZgT
@Ryosuke 这正是我的预期......这很奇怪......你使用什么颤振版本？
Flutter 1.3.10-pre.5 • channel master • https://github.com/flutter/flutter.git Framework • revision ddee4f716c (10 days ago) • 2019-03-10 23:22:28 -0400 Engine • revision 0d2cf5857b Tools • Dart 2.2.1 (build 2.2.1-dev.1.0 2fb6cd9f5f)
这很奇怪...我尝试在 iOS 模拟器中运行良好.. 谢谢@Ryosuke
@Ryosuke 我什么都没做......

标签： dart flutter flutter-layout

【解决方案1】：

通过将模拟器从 Genymotion 更改为 iOS IphoneX 模拟器来解决。不知道为什么它在 iOS 和 android 之间表现出不同的行为，但我认为 iOS 模拟器是正确的..

【讨论】：