在渲染图像下方展开可滚动列表

Question

我有一个可点击图像的Livtview，当点击一个图像时，它会渲染另一个页面，原始图像上方有一个Text，我试图在也可以作为第一个列表滚动的图像之后添加一个listview，但是没有顶部图像移动或在这一点上任何一种方式都很好。我尝试在第一页上构建列表视图并且它一直给出一个视口错误，所以我将shrinkwrap添加到listview中，现在我在屏幕底部出现了一个红色条，它不会滚动到可查看的内容上屏幕。

以下是第二个listview所在的部分代码。

@override
  Widget build(BuildContext context) {
    var _children = <Widget>[
      new Center(
        child: new Text(widget.spec.name,
          style: new TextStyle(fontSize: 30.0, fontWeight: FontWeight.bold),
        ),
      ),
      new Center(
          child: new Container(
            padding: new EdgeInsets.only(
                left: 10.0, right: 10.0, top: 20.0, bottom: 10.0),
            child: new Image.asset(widget.spec.pic.assetName),
          )
      ),

      new Center(
        child: new Container(
          padding: new EdgeInsets.only(
              left: 10.0, right: 10.0, top: 20.0, bottom: 10.0),
          child: new Text('Facilities for Specialty',
            style: new TextStyle(fontSize: 30.0),
            textAlign: TextAlign.center,
          ),
        ),
      ),

      new RefreshIndicator(
        child: new ListView.builder(
          itemBuilder: _itemBuilder,
          itemCount: listcount,
          shrinkWrap: true,
          scrollDirection: Axis.vertical,
        ),
        onRefresh: _onRefresh,

      ),


    ];
    return new Scaffold(
      appBar: new AppBar(title: new Text("My Specialty")),
      body: new Column(
        children: _children,
      ),
    );
  }

有人有什么想法吗？

当shrinkWrap为false时，这是错误。但是当它真正的滚动不起作用时。

The following assertion was thrown during performResize():
I/flutter ( 1519): Vertical viewport was given unbounded height.
I/flutter ( 1519): Viewports expand in the scrolling direction to fill their container.In this case, a vertical
I/flutter ( 1519): viewport was given an unlimited amount of vertical space in which to expand. This situation
I/flutter ( 1519): typically happens when a scrollable widget is nested inside another scrollable widget.
I/flutter ( 1519): If this widget is always nested in a scrollable widget there is no need to use a viewport because
I/flutter ( 1519): there will always be enough vertical space for the children. In this case, consider using a Column
I/flutter ( 1519): instead. Otherwise, consider using the "shrinkWrap" propery (or a ShrinkWrappingViewport) to size
I/flutter ( 1519): the height of the viewport to the sum of the heights of its children.
I/flutter ( 1519): 
I/flutter ( 1519): When the exception was thrown, this was the stack:
I/flutter ( 1519): #0      RenderViewport.performResize.<anonymous closure> (package:flutter/src/rendering/viewport.dart:701)
I/flutter ( 1519): #2      RenderViewport.performResize (package:flutter/src/rendering/viewport.dart:696)
I/flutter ( 1519): #3      RenderObject.layout (package:flutter/src/rendering/object.dart:1854)
I/flutter ( 1519): #4      RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105)
I/flutter ( 1519): #5      RenderObject.layout (package:flutter/src/rendering/object.dart:1869)
I/flutter ( 1519): #6      RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105)
I/flutter ( 1519): #7      RenderObject.layout (package:flutter/src/rendering/object.dart:1869)
I/flutter ( 1519): #8      RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105)
I/flutter ( 1519): #9      RenderObject.layout (package:flutter/src/rendering/object.dart:1869)
I/flutter ( 1519): #10     RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105)
I/flutter ( 1519): #11     RenderObject.layout (package:flutter/src/rendering/object.dart:1869)
I/flutter ( 1519): #12     RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105)
I/flutter ( 1519): #13     RenderObject.layout (package:flutter/src/rendering/object.dart:1869)
I/flutter ( 1519): #14     RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105)
I/flutter ( 1519): #15     RenderObject.layout (package:flutter/src/rendering/object.dart:1869)
I/flutter ( 1519): #16     RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:544)
I/flutter ( 1519): #17     RenderObject.layout (package:flutter/src/rendering/object.dart:1869)
I/flutter ( 1519): #18     MultiChildLayoutDelegate.layoutChild (package:flutter/src/rendering/custom_layout.dart:124)
I/flutter ( 1519): #19     _ScaffoldLayout.performLayout (package:flutter/src/material/scaffold.dart:85)
I/flutter ( 1519): #20     MultiChildLayoutDelegate._callPerformLayout (package:flutter/src/rendering/custom_layout.dart:194)
I/flutter ( 1519): #21     RenderCustomMultiChildLayoutBox.performLayout (package:flutter/src/rendering/custom_layout.dart:338)
I/flutter ( 1519): #22     RenderObject.layout (package:flutter/src/rendering/object.dart:1869)
I/flutter ( 1519): #23     RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105)
I/flutter ( 1519): #24     RenderObject.layout (package:flutter/src/rendering/object.dart:1869)
I/flutter ( 1519): #25     RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105)
I/flutter ( 1519): #26     _RenderCustomClip.performLayout (package:flutter/src/rendering/proxy_box.dart:1015)
I/flutter ( 1519): #27     RenderObject.layout (package:flutter/src/rendering/object.dart:1869)
I/flutter ( 1519): #28     RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105)
I/flutter ( 1519): #29     RenderObject.layout (package:flutter/src/rendering/object.dart:1869)
I/flutter ( 1519): #30     RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105)
I/flutter ( 1519): #31     RenderObject.layout (package:flutter/src/rendering/object.dart:1869)
I/flutter ( 1519): #32     RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105)
I/flutter ( 1519): #33     RenderObject.layout (package:flutter/src/rendering/object.dart:1869)
I/flutter ( 1519): #34     RenderOffstage.performLayout (package:flutter/src/rendering/proxy_box.dart:2609)
I/flutter ( 1519): #35     RenderObject.layout (package:flutter/src/rendering/object.dart:1869)
I/flutter ( 1519): #36     RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105)
I/flutter ( 1519): #37     RenderObject.layout (package:flutter/src/rendering/object.dart:1869)
I/flutter ( 1519): #38     RenderStack.performLayout (package:flutter/src/rendering/stack.dart:433)
I/flutter ( 1519): #39     RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:1746)
I/flutter ( 1519): #40     PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:1041)
I/flutter ( 1519): #41     BindingBase&SchedulerBinding&GestureBinding&ServicesBinding&RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:251)
I/flutter ( 1519): #42     BindingBase&SchedulerBinding&GestureBinding&ServicesBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:504)
I/flutter ( 1519): #43     BindingBase&SchedulerBinding&GestureBinding&ServicesBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:189)
I/flutter ( 1519): #44     BindingBase&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:688)
I/flutter ( 1519): #45     BindingBase&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:636)
I/flutter ( 1519): #46     _drawFrame (file:///b/build/slave/Linux_Engine/build/src/flutter/lib/ui/hooks.dart:70)
I/flutter ( 1519): (elided one frame from class _AssertionError)
I/flutter ( 1519): 
I/flutter ( 1519): The following RenderObject was being processed when the exception was fired:
I/flutter ( 1519):   RenderViewport#7f9aa NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 1519):   creator: Viewport ← _ScrollableScope ← IgnorePointer-[GlobalKey#d069c] ← Listener ←
I/flutter ( 1519):   _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#a4705] ←
I/flutter ( 1519):   RepaintBoundary ← CustomPaint ← RepaintBoundary ← NotificationListener<ScrollNotification> ←
I/flutter ( 1519):   GlowingOverscrollIndicator ← Scrollable ← ⋯
I/flutter ( 1519):   parentData: <none> (can use size)
I/flutter ( 1519):   constraints: BoxConstraints(0.0<=w<=411.4, 0.0<=h<=Infinity)
I/flutter ( 1519):   size: MISSING
I/flutter ( 1519):   AxisDirection.down
I/flutter ( 1519):   offset: ScrollPositionWithSingleContext#0c3e5(offset: 0.0, range: null..null, viewport: null,
I/flutter ( 1519):   ScrollableState, AlwaysScrollableScrollPhysics -> ClampingScrollPhysics, IdleScrollActivity#59379,
I/flutter ( 1519):   ScrollDirection.idle)
I/flutter ( 1519):   anchor: 0.0
I/flutter ( 1519): This RenderObject had the following child:
I/flutter ( 1519):   RenderSliverList#bc50e NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 1519): ════════════════════════════════════════════════════════════════════════════════════════════════════
I/flutter ( 1519): Another exception was thrown: 'package:flutter/src/rendering/box.dart': Failed assertion: line 1430: 'hasSize': is not true.
I/flutter ( 1519): Another exception was thrown: 'package:flutter/src/rendering/box.dart': Failed assertion: line 1430: 'hasSize': is not true.
I/flutter ( 1519): Another exception was thrown: 'package:flutter/src/rendering/box.dart': Failed assertion: line 1430: 'hasSize': is not true.
I/flutter ( 1519): Another exception was thrown: 'package:flutter/src/rendering/box.dart': Failed assertion: line 1430: 'hasSize': is not true.
I/flutter ( 1519): Another exception was thrown: 'package:flutter/src/rendering/box.dart': Failed assertion: line 1430: 'hasSize': is not true.
I/flutter ( 1519): Another exception was thrown: 'package:flutter/src/rendering/box.dart': Failed assertion: line 1430: 'hasSize': is not true.
I/flutter ( 1519): Another exception was thrown: 'package:flutter/src/rendering/box.dart': Failed assertion: line 1430: 'hasSize': is not true.
I/flutter ( 1519): Another exception was thrown: 'package:flutter/src/rendering/box.dart': Failed assertion: line 1430: 'hasSize': is not true.
I/flutter ( 1519): Another exception was thrown: 'package:flutter/src/rendering/box.dart': Failed assertion: line 1430: 'hasSize': is not true.

Answer 1

我会将RefreshIndicator和ListView包裹在Expanded中。这告诉Flutter他们想要消耗剩余的空间。你不应该shrinkWrap它。

Answer 2

child: Expanded(
    child: ListView.builder( itemBuilder: () => {...}, itemCount: ...)

Answer 3

您只需将RefreshIndicator包装在此Expanded小部件中

使用Expanded小部件可使Row，Column或Flex的子级展开以填充主轴上的可用空间（例如，水平放置行或垂直的列）。如果扩展了多个子项，则根据弹性因子在可用子项之间进行分配。

  Expanded(
    child: RefreshIndicator(
      child: ListView.builder(
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            title: Text('Item ${index + 1}'),
          );
        },
        itemCount: 10,
        scrollDirection: Axis.vertical,
      ),
      onRefresh: _onRefresh,

    ),
  )