首页 > 解决方案 > 创建 ClipPath Flutter 时出现错误“每个子项必须仅布置一次”

问题描述

我是 Flutter 的新手,我想通过使用 Clip Path 为我的顶栏制作一个自定义形状,我正确地遵循了一些教程,但对我来说,我得到了每个孩子必须准确地布置一次错误

这是我的代码

class MainPage extends StatefulWidget {
  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          ClipPath(
            clipper: TopBarClipper(),
            child: Container(
              width: double.infinity,
              height: 300,
              color: Colors.black26,
            ),
          ),
        ],
      )
    );
  }
}

class TopBarClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0, size.height - 100);
    path.quadraticBezierTo(
        size.width / 5, size.height, size.width, size.height - 150);
    //path.lineTo(size.width, size.height);
    path.lineTo(size.width, 0);
    path.close();
    // TODO: implement getClip
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    // TODO: implement shouldReclip
    return null;
    throw UnimplementedError();
  }
}

这是我尝试跑步的时候

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
The following assertion was thrown during performLayout():
Each child must be laid out exactly once.

The _ScaffoldLayout custom multichild layout delegate forgot to lay out the following child: 
  _ScaffoldSlot.body: RenderStack#57108 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    parentData: offset=Offset(0.0, 0.0); id=_ScaffoldSlot.body
    constraints: MISSING
    size: MISSING
    alignment: AlignmentDirectional.topStart
    textDirection: ltr
    fit: loose
The relevant error-causing widget was: 
  Scaffold file:///C:/Users/****/AndroidStudioProjects/****/lib/main/MainPage.dart:14:12
When the exception was thrown, this was the stack: 
#0      MultiChildLayoutDelegate._callPerformLayout.<anonymous closure> (package:flutter/src/rendering/custom_layout.dart:246:11)
#1      MultiChildLayoutDelegate._callPerformLayout (package:flutter/src/rendering/custom_layout.dart:259:8)
#2      RenderCustomMultiChildLayoutBox.performLayout (package:flutter/src/rendering/custom_layout.dart:402:14)
#3      RenderObject.layout (package:flutter/src/rendering/object.dart:1777:7)
#4      RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:113:14)
...
The following RenderObject was being processed when the exception was fired: RenderCustomMultiChildLayoutBox#e4670 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...  parentData: <none> (can use size)
...  constraints: BoxConstraints(w=360.0, h=702.0)
...  size: Size(360.0, 702.0)
RenderObject: RenderCustomMultiChildLayoutBox#e4670 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
  parentData: <none> (can use size)
  constraints: BoxConstraints(w=360.0, h=702.0)
  size: Size(360.0, 702.0)
...  child 1: RenderStack#57108 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...    parentData: offset=Offset(0.0, 0.0); id=_ScaffoldSlot.body
...    constraints: MISSING
...    size: MISSING
...    alignment: AlignmentDirectional.topStart
...    textDirection: ltr
...    fit: loose
...    child 1: RenderClipPath#ded0f NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...      parentData: not positioned; offset=Offset(0.0, 0.0)
...      constraints: MISSING
...      size: MISSING
...      child: RenderConstrainedBox#b2003 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...        parentData: <none>
...        constraints: MISSING
...        size: MISSING
...        additionalConstraints: BoxConstraints(w=Infinity, h=300.0)
...        child: _RenderColoredBox#a551f NEEDS-LAYOUT NEEDS-PAINT
...          parentData: <none>
...          constraints: MISSING
...          size: MISSING
...          behavior: opaque
...  child 2: RenderStack#953d0 relayoutBoundary=up1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...    parentData: offset=Offset(0.0, 0.0); id=_ScaffoldSlot.body (can use size)
...    constraints: BoxConstraints(0.0<=w<=360.0, 0.0<=h<=702.0)
...    size: Size(360.0, 300.0)
...    alignment: AlignmentDirectional.topStart
...    textDirection: ltr
...    fit: loose
...    child 1: RenderClipPath#5d400 relayoutBoundary=up2 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...      parentData: not positioned; offset=Offset(0.0, 0.0) (can use size)
...      constraints: BoxConstraints(0.0<=w<=360.0, 0.0<=h<=702.0)
...      size: Size(360.0, 300.0)
...      child: RenderConstrainedBox#cb85b relayoutBoundary=up3 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...        parentData: <none> (can use size)
...        constraints: BoxConstraints(0.0<=w<=360.0, 0.0<=h<=702.0)
...        size: Size(360.0, 300.0)
...        additionalConstraints: BoxConstraints(w=Infinity, h=300.0)
...        child: _RenderColoredBox#b00e1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...          parentData: <none> (can use size)
...          constraints: BoxConstraints(w=360.0, h=300.0)
...          size: Size(360.0, 300.0)
...          behavior: opaque
...  child 3: RenderStack#6c594 relayoutBoundary=up1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...    parentData: offset=Offset(344.0, 686.0); id=_ScaffoldSlot.floatingActionButton (can use size)
...    constraints: BoxConstraints(0.0<=w<=360.0, 0.0<=h<=702.0)
...    size: Size(0.0, 0.0)
...    alignment: centerRight
...    textDirection: ltr
...    fit: loose
...    child 1: RenderTransform#01581 relayoutBoundary=up2 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...      parentData: not positioned; offset=Offset(0.0, 0.0) (can use size)
...      constraints: BoxConstraints(0.0<=w<=360.0, 0.0<=h<=702.0)
...      size: Size(0.0, 0.0)
...      transform matrix: [0] 0.0,0.0,0.0,0.0
[1] 0.0,0.0,0.0,0.0
[2] 0.0,0.0,1.0,0.0
[3] 0.0,0.0,0.0,1.0
...      origin: null
...      alignment: center
...      textDirection: ltr
...      transformHitTests: true
...      child: RenderTransform#56c78 relayoutBoundary=up3 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...        parentData: <none> (can use size)
...        constraints: BoxConstraints(0.0<=w<=360.0, 0.0<=h<=702.0)
...        size: Size(0.0, 0.0)
...        transform matrix: [0] 0.7,0.7,0.0,0.0
[1] -0.7,0.7,0.0,0.0
[2] 0.0,0.0,1.0,0.0
[3] 0.0,0.0,0.0,1.0
...        origin: null
...        alignment: center
...        textDirection: ltr
...        transformHitTests: true
════════════════════════════════════════════════════════════════════════════════════════════════════

我在互联网上阅读,有人说这只是 Flutter 错误,我确实清理了我的颤振并重新运行,但它仍然出现,

它只是在我使用 ClipPath 时出现。

为什么会这样?

谢谢

标签: androidflutterdartmobileflutter-layout

解决方案


我刚刚找到了答案,但不知道这是否是一个好方法,

我只是将shouldReclip退货更改为true并解决了问题。


推荐阅读