使用sliver 布局 报错

[colorfulldays]

kraken 0.9.0

错误堆栈 如下

: The following assertion was thrown during performLayout():
flutter: 'package:flutter/src/foundation/node.dart': Failed assertion: line 114 pos 12: 'parent == null ||
flutter: attached == parent!.attached': is not true.
flutter: 
flutter: Either the assertion indicates an error in the framework itself, or we should provide substantially
flutter: more information in this error message to help you determine and fix the underlying cause.
flutter: In either case, please report this assertion by filing a bug on GitHub:
flutter:   https://github.com/flutter/flutter/issues/new?template=2_bug.md
flutter: 
flutter: When the exception was thrown, this was the stack:
flutter: #2      AbstractNode.detach (package:flutter/src/foundation/node.dart:114:12)
flutter: #3      RenderObjectWithChildMixin.detach (package:flutter/src/rendering/object.dart:3034:11)
flutter: #4      ElementSliverBoxChildManager.removeChild (package:kraken/src/dom/element.dart:1868:13)
flutter: #5      RenderSliverMultiBoxAdaptor._destroyOrCacheChild (package:flutter/src/rendering/sliver_multi_box_adaptor.dart:365:21)
flutter: #6      RenderSliverMultiBoxAdaptor.collectGarbage.<anonymous closure> (package:flutter/src/rendering/sliver_multi_box_adaptor.dart:509:9)
flutter: #7      RenderObject.invokeLayoutCallback.<anonymous closure> (package:flutter/src/rendering/object.dart:1889:59)
flutter: #8      PipelineOwner._enableMutationsToDirtySubtrees (package:flutter/src/rendering/object.dart:912:15)
flutter: #9      RenderObject.invokeLayoutCallback (package:flutter/src/rendering/object.dart:1889:14)
flutter: #10     RenderSliverMultiBoxAdaptor.collectGarbage (package:flutter/src/rendering/sliver_multi_box_adaptor.dart:507:5)
flutter: #11     RenderSliverList.performLayout (package:flutter/src/rendering/sliver_list.dart:300:5)
flutter: #12     RenderObject.layout (package:flutter/src/rendering/object.dart:1779:7)
flutter: #13     RenderViewportBase.layoutChildSequence (package:flutter/src/rendering/viewport.dart:510:13)
flutter: #14     RenderViewport._attemptLayout (package:flutter/src/rendering/viewport.dart:1574:12)
flutter: #15     RenderViewport.performLayout (package:flutter/src/rendering/viewport.dart:1483:20)
flutter: #16     RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:1636:7)
flutter: #17     PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:881:18)
flutter: #18     RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:462:19)
flutter: #19     RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:328:5)
flutter: #20     SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1144:15)
flutter: #21     SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1082:9)
flutter: #22     SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:998:5)
flutter: #26     _invoke (dart:ui/hooks.dart:163:10)
flutter: #27     PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:259:5)
flutter: #28     _drawFrame (dart:ui/hooks.dart:126:31)
flutter: (elided 5 frames from class _AssertionError and dart:async)
flutter: 
flutter: The following RenderObject was being processed when the exception was fired: RenderSliverList#96b49 relayoutBoundary=up1 NEEDS-LAYOUT NEEDS-COMPOSITING-BITS-UPDATE:
flutter:   parentData: paintOffset=Offset(0.0, 0.0) (can use size)
flutter:   constraints: SliverConstraints(AxisDirection.down, GrowthDirection.forward, ScrollDirection.idle,
flutter:     scrollOffset: 270.2, remainingPaintExtent: 641.0, crossAxisExtent: 360.0, crossAxisDirection:
flutter:     AxisDirection.right, viewportMainAxisExtent: 641.0, remainingCacheExtent: 1141.0, cacheOrigin:
flutter:     -250.0)
flutter:   geometry: SliverGeometry(scrollExtent: 5355.0, paintExtent: 641.0, maxPaintExtent: 5355.0,
flutter:     hasVisualOverflow: true, cacheExtent: 1136.3)
flutter:   currently live children: 0 to 22
flutter: This RenderObject had the following descendants (showing up to depth 5):
flutter:     child with index 0: RenderTextBox#3ea95 relayoutBoundary=up2 NEEDS-PAINT DETACHED
flutter:       child: KrakenRenderParagraph#a7a92 relayoutBoundary=up3 NEEDS-PAINT
flutter:         text: TextSpan
flutter:     child with index 1: RenderFlowLayout#cfdee relayoutBoundary=up2
flutter:       child 1: RenderFlowLayout#31836 relayoutBoundary=up3
flutter:         child 1: RenderTextBox#d0da6 relayoutBoundary=up4
flutter:           child: KrakenRenderParagraph#e5385 relayoutBoundary=up5
flutter:             text: TextSpan
flutter:       child 2: RenderFlowLayout#a115b relayoutBoundary=up3
flutter:     child with index 2: RenderFlowLayout#7c09e relayoutBoundary=up2
flutter:       child 1: RenderFlowLayout#6dbf0 relayoutBoundary=up3
flutter:         child 1: RenderTextBox#db8d8 relayoutBoundary=up4
flutter:           child: KrakenRenderParagraph#29c67 relayoutBoundary=up5
flutter:             text: TextSpan
flutter:       child 2: RenderFlowLayout#62101 relayoutBoundary=up3
flutter:     child with index 3: RenderFlowLayout#93a75 relayoutBoundary=up2
flutter:       child 1: RenderFlowLayout#87073 relayoutBoundary=up3
flutter:         child 1: RenderTextBox#c2906 relayoutBoundary=up4
flutter:           child: KrakenRenderParagraph#1f07a relayoutBoundary=up5
flutter:             text: TextSpan
flutter:       child 2: RenderFlowLayout#cb1a6 relayoutBoundary=up3
flutter:     child with index 4: RenderFlowLayout#173c1 relayoutBoundary=up2
flutter:       child 1: RenderFlowLayout#6031d relayoutBoundary=up3
flutter:         child 1: RenderTextBox#fb70b relayoutBoundary=up4
flutter:           child: KrakenRenderParagraph#b68e8 relayoutBoundary=up5
flutter:             text: TextSpan
flutter:     ...(descendants list truncated after 25 lines)

js 代码

<template>
  <div :style="style.container">
   

   <div v-for="item in 100" :key="item">
     <div :style="handleStyle(item)">
       Text text text  {{item}}
     </div>
     <div :style="style.span"/>
   </div>
  </div>
</template>

<script>

const style = {


 container : {
      width:"100%",
      height:"100vh",
      display:"sliver"
    },

    item : {
      width:"100%",
      height:"50px",
      background:"#dddddd"
    },

     span : {
      width:"100%",
      height:"5px",
      background:"#00ffaa"
    },
  }

export default {
  name: 'HelloWorld',


  
  created:function (){
    console.log("oncreated");
    for(let i = 0;i < 100;i++){
      this.list.push(i);
    }

  },
  props: {
    msg: String
  },

  data(){

    return{
      list:[],
      style
    }
  },
  methods:{
    handleStyle(index){
      let style = {
      width:"100%",
      height:"50px",
      background:"#dddddd"
    };
     if(index % 2 == 0){
       style.background = "#ddffdd";
     }
     return style;
    }

  }
}
</script>

[wssgcg1213]

原因是 vue 会插入一个空的文本节点做定位, 这里 detach 的时候兼容性有一些问题导致报错

[wssgcg1213]

等下我提个 PR

[colorfulldays]

等下我提个 PR

sliver 针对vue的适配 感觉还有问题。稍微复杂点的列表页面，展示效果都不太符合预期

[wssgcg1213]

等下我提个 PR

sliver 针对vue的适配 感觉还有问题。稍微复杂点的列表页面，展示效果都不太符合预期

Vue 的行为比较奇怪, 前面和后面都有一个空的 text 节点, 刚好这个跟前几天的优化冲突了, 没有专门测试过 vue 的情况, 这个case已经加上单元测试了