为什么 CustomClipper 突然不工作了？

Question

我正在研究将图像剪切为曲线，但 CustomClipper 突然无法工作。\n仅clipper属性IreneClipper。我该如何修复它？

\n\n

import 'package:flutter/material.dart';\n\nvoid main() => runApp(MyApp());\n\nclass MyApp extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      title: 'Flutter Clock',\n      theme: ThemeData(\n        primarySwatch: Colors.blue\n      ),\n      home: IreneClip(),\n    );\n  }\n}\n\nclass IreneClip extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(backgroundColor: Colors.orange,),\n      body: ClipPath(\n        child: Image.asset('assets/irene.jpg'),\n        clipper: IreneClipper(),\n      ),\n    );\n  }\n}\n\nclass IreneClipper extends CustomClipper<Path> {\n  @override\n  Path getClip(Size size) {\n    Path path = Path();\n    path.moveTo(0.0, size.height);\n    return Path();\n  }\n\n  @override\n  bool shouldReclip(CustomClipper<Path> oldClipper) {\n    return false;\n  }\n\n}\n

\n\n

错误信息

\n\n

\n

I/flutter (25014): \xe2\x95\x90\xe2\x95\x90\xe2\x95\xa1 渲染库捕获异常\n \xe2\x95\x9e\xe2\x95\x90\xe2\x95\x90 \xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2 \x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95 \x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90 \xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2 \x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95 \x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90 \xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90 I/flutter\n (25014)：在performLayout()期间抛出以下断言：\ n I/flutter (25014): _ScaffoldLayout 自定义多子布局\n 委托忘记布局以下子项： I/flutter (25014):
\n _ScaffoldSlot.body: RenderClipPath#ab20f NEEDS-LAYOUT NEEDS-PAINT I/flutter ( 25014)：每个子项必须恰好布置一次。I/flutter\n (25014): I/flutter (25014): 抛出异常时，这是\n堆栈： I/flutter (25014): #0
\n MultiChildLayoutDelegate._callPerformLayout.\n (package:flutter /src/rendering/custom_layout.dart:222:13) I/flutter\n (25014): #1 MultiChildLayoutDelegate._callPerformLayout\n (包:flutter/src/rendering/custom_layout.dart:230:8)

\n

\n\n

扑医生

\n\n

[\xe2\x88\x9a] Flutter (Channel beta, v1.0.0, on Microsoft Windows [Version 10.0.17134.472], locale ko-KR)\n    \xe2\x80\xa2 Flutter version 1.0.0 at C:\\flutter\n    \xe2\x80\xa2 Framework revision 5391447fae (5 weeks ago), 2018-11-29 19:41:26 -0800\n    \xe2\x80\xa2 Engine revision 7375a0f414\n    \xe2\x80\xa2 Dart version 2.1.0 (build 2.1.0-dev.9.4 f9ebf21297)\n\n[\xe2\x88\x9a] Android toolchain - develop for Android devices (Android SDK 28.0.3)\n    \xe2\x80\xa2 Android SDK at C:\\AndroidSDK\n    \xe2\x80\xa2 Android NDK location not configured (optional; useful for native profiling support)\n    \xe2\x80\xa2 Platform android-28, build-tools 28.0.3\n    \xe2\x80\xa2 ANDROID_HOME = C:\\AndroidSDK\n    \xe2\x80\xa2 Java binary at: C:\\Program Files\\Android\\Android Studio\\jre\\bin\\java\n    \xe2\x80\xa2 Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1136-b06)\n    \xe2\x80\xa2 All Android licenses accepted.\n\n[\xe2\x88\x9a] Android Studio (version 3.2)\n    \xe2\x80\xa2 Android Studio at C:\\Program Files\\Android\\Android Studio\n    \xe2\x80\xa2 Flutter plugin version 31.3.1\n    \xe2\x80\xa2 Dart plugin version 181.5656\n    \xe2\x80\xa2 Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1136-b06)\n\n[!] IntelliJ IDEA Community Edition (version 2018.2)\n    \xe2\x80\xa2 IntelliJ at C:\\Program Files\\JetBrains\\IntelliJ IDEA Community Edition 2018.2\n    X Flutter plugin not installed; this adds Flutter specific functionality.\n    X Dart plugin not installed; this adds Dart specific functionality.\n    \xe2\x80\xa2 For information about installing plugins, see\n      https://flutter.io/intellij-setup/#installing-the-plugins\n\n[!] VS Code, 64-bit edition (version 1.30.1)\n    \xe2\x80\xa2 VS Code at C:\\Program Files\\Microsoft VS Code\n    \xe2\x80\xa2 Flutter extension not installed; install from\n      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter\n\n[\xe2\x88\x9a] Connected device (1 available)\n    \xe2\x80\xa2 Android SDK built for x86 \xe2\x80\xa2 emulator-5554 \xe2\x80\xa2 android-x86 \xe2\x80\xa2 Android 9 (API 28) (emulator)\n

\n

Answer 1

我解决了，如果你想热重载剪切图像，shouldReclip方法必须返回。true

class IreneClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();
    path.lineTo(0.0, size.height-40);
    path.lineTo(size.width, size.height-60);
    path.lineTo(size.width, 0.0);
    path.close();
    return path;
  }

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