search

openwebf / webf

Build flutter apps with HTML/CSS and JavaScript.
https://openwebf.com/
Apache License 2.0
1.49k stars 105 forks source link

error by widget element #613

Open liuzitong123a opened 4 weeks ago

liuzitong123a commented 4 weeks ago

Affected version

0.16.0

Flutter versions

3.13.0

No same issues found.

Steps to Reproduce

use code

Code example

const flutterContainer = document.createElement('flutter-listview');
flutterContainer.style.height = '100vh';
flutterContainer.style.display = 'block';

document.body.appendChild(flutterContainer);

const colors = ['red', 'yellow', 'black', 'blue', 'green'];

for (let i = 0; i < 200; i++) {
  const div = document.createElement('div');
  div.style.width = '100%';
  div.style.border = `1px solid ${colors[i % colors.length]}`;
  div.appendChild(document.createTextNode(`${i}`));

  const badge = document.createElement('img');
  badge.src = 'https://badge.yimutian.com/v1/bull-year3-5.png'
  badge.style.position = 'absolute';
  badge.style.bottom = '0';
  badge.style.left = '40px';
  badge.style.width = '16px';
  badge.style.height = '16px';
  div.appendChild(badge);

  const img = document.createElement('img');
  img.src = 'https://gw.alicdn.com/tfs/TB1CxCYq5_1gK0jSZFqXXcpaXXa-128-90.png';
  div.appendChild(img);
  img.style.width = '100px';

  flutterContainer.appendChild(div);
}

Expected results

no error

Actual results

======== Exception caught by widgets library =======================================================
The following assertion was thrown building WebFHTMLElementStatefulWidget-[<'674705366'>](state: HTMLElementState#080a7):
A RenderRepaintBoundaryFlowLayout was mutated in RenderSliverList.performLayout.

The RenderObject was mutated when none of its ancestors is actively performing layout.
The RenderObject being mutated was: RenderRepaintBoundaryFlowLayout#8b283 relayoutBoundary=up1
  needs compositing
  parentData: isPositioned=false; offset=Offset(0.0, 0.0); runIndex: 0; (can use size)
  constraints: BoxConstraints(411.4<=w<=Infinity, 785.5<=h<=Infinity)
  layer: OffsetLayer#d0b50
  size: Size(411.4, 785.5)
  creatorElement: HTML Element(51e2b)
  contentSize: Size(411.4, 785.5)
  contentConstraints: BoxConstraints(411.4<=w<=Infinity, 785.5<=h<=Infinity)
  maxScrollableSize: Size(411.4, 785.5)
  scrollableViewportSize: Size(411.4, 785.5)
  needsLayout: false
  position: CSSPositionType.static
  backgroundColor: null
  isSizeTight: false
  width: null
  height: null
  intrinsicWidth: 0.0
  intrinsicHeight: 0.0
  borderEdge: EdgeInsets.zero
  contentVisibility: ContentVisibility.visible
  scrollableSize: Size(411.4, 785.5)
  viewportSize: Size(411.4, 785.5)
  clipX: false
  clipY: false
  transformOrigin: Offset(0.0, 0.0)
  transformAlignment: Alignment.center
The RenderObject that was mutating the said RenderRepaintBoundaryFlowLayout was: RenderSliverList#f7da1 relayoutBoundary=up2 NEEDS-LAYOUT NEEDS-COMPOSITING-BITS-UPDATE
  needs compositing
  parentData: paintOffset=Offset(0.0, 0.0) (can use size)
  constraints: SliverConstraints(AxisDirection.down, GrowthDirection.forward, ScrollDirection.reverse, scrollOffset: 43.8, remainingPaintExtent: 785.5, crossAxisExtent: 411.4, crossAxisDirection: AxisDirection.right, viewportMainAxisExtent: 785.5, remainingCacheExtent: 1079.3, cacheOrigin: -43.8)
  geometry: SliverGeometry(scrollExtent: 15293.8, paintExtent: 785.5, maxPaintExtent: 15293.8, hasVisualOverflow: true, cacheExtent: 1051.1)
  currently live children: 0 to 14
The relevant error-causing widget was: 
  WebFHTMLElementStatefulWidget-[<'674705366'>] WebFHTMLElementStatefulWidget:file:///Users/ymt/Desktop/krakenProject/ymt_webf/webf/lib/src/widget/webf_adapter_widget.dart:84:12
When the exception was thrown, this was the stack: 
#0      RenderObject._debugCanPerformMutations.<anonymous closure> (package:flutter/src/rendering/object.dart:1684:9)
#1      RenderObject._debugCanPerformMutations (package:flutter/src/rendering/object.dart:1745:6)
#2      RenderObject.adoptChild (package:flutter/src/rendering/object.dart:1511:12)
#3      ContainerRenderObjectMixin.insert (package:flutter/src/rendering/object.dart:3778:5)
#4      RenderLayoutBox.insert (package:webf/src/rendering/box_model.dart:205:11)
#5      RenderBoxModel.attachRenderBox (package:webf/src/rendering/box_model.dart:1742:26)
#6      RenderBoxModel.attachToContainingBlock (package:webf/src/rendering/box_model.dart:1497:7)
#7      Element._updateRenderBoxModelWithPosition (package:webf/src/dom/element.dart:840:12)
#8      Element.attachTo (package:webf/src/dom/element.dart:1042:11)
#9      Element.ensureChildAttached (package:webf/src/dom/element.dart:1119:17)
#10     WebFHTMLElementToFlutterElementAdaptor.mount (package:webf/src/widget/element_flutter_element_adapter.dart:25:24)
...     Normal element mounting (49 frames)
#59     Element.inflateWidget (package:flutter/src/widgets/framework.dart:3953:16)
#60     Element.updateChild (package:flutter/src/widgets/framework.dart:3682:18)
#61     SliverMultiBoxAdaptorElement.updateChild (package:flutter/src/widgets/sliver.dart:1451:37)
#62     SliverMultiBoxAdaptorElement.createChild.<anonymous closure> (package:flutter/src/widgets/sliver.dart:1436:20)
#63     BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2682:19)
#64     SliverMultiBoxAdaptorElement.createChild (package:flutter/src/widgets/sliver.dart:1428:12)
#65     RenderSliverMultiBoxAdaptor._createOrObtainChild.<anonymous closure> (package:flutter/src/rendering/sliver_multi_box_adaptor.dart:353:23)
#66     RenderObject.invokeLayoutCallback.<anonymous closure> (package:flutter/src/rendering/object.dart:2300:59)
#67     PipelineOwner._enableMutationsToDirtySubtrees (package:flutter/src/rendering/object.dart:1056:15)
#68     RenderObject.invokeLayoutCallback (package:flutter/src/rendering/object.dart:2300:14)
#69     RenderSliverMultiBoxAdaptor._createOrObtainChild (package:flutter/src/rendering/sliver_multi_box_adaptor.dart:342:5)
#70     RenderSliverMultiBoxAdaptor.insertAndLayoutChild (package:flutter/src/rendering/sliver_multi_box_adaptor.dart:490:5)
#71     RenderSliverList.performLayout.advance (package:flutter/src/rendering/sliver_list.dart:241:19)
#72     RenderSliverList.performLayout (package:flutter/src/rendering/sliver_list.dart:283:12)
#73     RenderObject.layout (package:flutter/src/rendering/object.dart:2189:7)
#74     RenderSliverEdgeInsetsPadding.performLayout (package:flutter/src/rendering/sliver_padding.dart:149:12)
#75     RenderSliverPadding.performLayout (package:flutter/src/rendering/sliver_padding.dart:386:11)
#76     RenderObject.layout (package:flutter/src/rendering/object.dart:2189:7)
#77     RenderViewportBase.layoutChildSequence (package:flutter/src/rendering/viewport.dart:550:13)
#78     RenderViewport._attemptLayout (package:flutter/src/rendering/viewport.dart:1634:12)
#79     RenderViewport.performLayout (package:flutter/src/rendering/viewport.dart:1541:20)
#80     RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:2027:7)
#81     PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:1020:18)
#82     RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:516:19)
#83     WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:865:13)
#84     RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:381:5)
#85     SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1289:15)
#86     SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1218:9)
#87     SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:1076:5)
#88     _invoke (dart:ui/hooks.dart:145:13)
#89     PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:338:5)
#90     _drawFrame (dart:ui/hooks.dart:112:31)
andycall commented 4 weeks ago

wrap img elements with div could avoid this issue

liuzitong123a commented 4 weeks ago

修改部分代码：

  const div2 = document.createElement('div');
  const badge = document.createElement('img');
  badge.src = 'https://badge.yimutian.com/v1/bull-year3-5.png'
  badge.style.position = 'absolute';
  badge.style.bottom = '0';
  badge.style.left = '40px';
  badge.style.width = '16px';
  badge.style.height = '16px';
  div2.appendChild(badge)
  div.appendChild(div2);

依旧报错，删除定位后正常