Question

                        new ListView(
                          children: [
                            new SizedBox(
                              height: 100.0,
                              child: ListView(
                                scrollDirection: Axis.horizontal,
                                children: <Widget>[
                                  new Text("hi"),
                                  new Text("hi"),
                                  new Text("hi"),
                                ],
                              ),
                            ),
                          ],
                        ),

我使用了大小的盒子，似乎仍然有错误。

这是我的小部件树： SingleChildScrollView - ＆gt;专栏 - ＆gt;儿童

Performing hot reload... flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════ flutter: The following assertion was thrown during performResize(): flutter: Vertical viewport was given unbounded height. flutter: Viewports expand in the scrolling direction to fill their container.In this case, a vertical flutter: viewport was given an unlimited amount of vertical space in which to expand. This situation flutter: typically happens when a scrollable widget is nested inside another scrollable widget. flutter: If this widget is always nested in a scrollable widget there is no need to use a viewport because flutter: there will always be enough vertical space for the children. In this case, consider using a Column flutter: instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size flutter: the height of the viewport to the sum of the heights of its children. flutter: flutter: When the exception was thrown, this was the stack: flutter: #0      RenderViewport.performResize.<anonymous closure> (package:flutter/src/rendering/viewport.dart:944:15) flutter:
#1      RenderViewport.performResize (package:flutter/src/rendering/viewport.dart:997:6) flutter: #2      RenderObject.layout (package:flutter/src/rendering/object.dart:1555:9) flutter: #3     
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #4      RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #5     
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #6      RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #7     
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #8      RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #9     
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #10     RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #11    
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #12     RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #13     RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:738:15) flutter: #14     RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #15     RenderPadding.performLayout (package:flutter/src/rendering/shifted_box.dart:199:11) flutter: #16   RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #17     _RenderSingleChildViewport.performLayout (package:flutter/src/widgets/single_child_scroll_view.dart:479:13) flutter: #18     RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #19    
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #20     RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #21    
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #22     RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #23    
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #24     RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #25    
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #26     RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #27    
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #28     RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #29     RenderPositionedBox.performLayout (package:flutter/src/rendering/shifted_box.dart:381:13) flutter: #30   RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #31     MultiChildLayoutDelegate.layoutChild (package:flutter/src/rendering/custom_layout.dart:141:11) flutter: #32
_ScaffoldLayout.performLayout (package:flutter/src/material/scaffold.dart:399:7) flutter: #33     MultiChildLayoutDelegate._callPerformLayout (package:flutter/src/rendering/custom_layout.dart:211:7) flutter: #34  RenderCustomMultiChildLayoutBox.performLayout (package:flutter/src/rendering/custom_layout.dart:355:14) flutter: #35 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #36    
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #37     RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #38    
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #39    
_RenderCustomClip.performLayout (package:flutter/src/rendering/proxy_box.dart:1143:11) flutter: #40    RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #41    
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #42     RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #43    
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #44     RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #45    
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #46     RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #47     RenderStack.performLayout (package:flutter/src/rendering/stack.dart:520:15) flutter: #48     RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #49    
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #50     RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #51    
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #52     RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #53    
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #54     RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #55    
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #56     RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #57    
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #58     RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #59    
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #60     RenderOffstage.performLayout (package:flutter/src/rendering/proxy_box.dart:2809:13) flutter: #61    RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #62     RenderStack.performLayout (package:flutter/src/rendering/stack.dart:520:15) flutter: #63     RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #64    
__RenderTheatre&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #65     RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #66    
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #67     RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #68    
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #69     RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #70    
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #71     RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #72    
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #73     RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #74    
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #75     RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #76     RenderView.performLayout (package:flutter/src/rendering/view.dart:125:13) flutter: #77     RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:1445:7) flutter: #78     PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:709:18) flutter: #79    
_WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:270:19) flutter: #80    
_WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:627:13) flutter: #81    
_WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:208:5) flutter: #82    
_WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:990:15) flutter: #83    
_WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:930:9) flutter: #84    
_WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.scheduleWarmUpFrame.<anonymous closure> (package:flutter/src/scheduler/binding.dart:751:7) flutter:
#86     _Timer._runTimers (dart:isolate/runtime/libtimer_impl.dart:382:19) flutter: #87    
_Timer._handleMessage (dart:isolate/runtime/libtimer_impl.dart:416:5) flutter: #88     _RawReceivePortImpl._handleMessage (dart:isolate/runtime/libisolate_patch.dart:165:12) flutter: (elided one frame from package dart:async) flutter: flutter: The following RenderObject was being processed when the exception was fired: flutter:   RenderViewport#c5015 NEEDS-LAYOUT NEEDS-PAINT flutter:   creator: Viewport ← _ScrollableScope ← IgnorePointer-[GlobalKey#58446] ← Semantics ← Listener ← flutter:   _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#efcf9] ← flutter:   _ExcludableScrollSemantics-[GlobalKey#1ff3b] ← Scrollable ← ListView ← Column ← Padding ← ⋯ flutter:   parentData: <none> (can use size) flutter:   constraints: BoxConstraints(0.0<=w<=335.0,
0.0<=h<=Infinity) flutter:   size: MISSING flutter:   axisDirection: down flutter:   crossAxisDirection: right flutter:   offset: ScrollPositionWithSingleContext#05c53(offset: 0.0, range: null..null, viewport: null, flutter:   ScrollableState, AlwaysScrollableScrollPhysics -> BouncingScrollPhysics, IdleScrollActivity#31dab, flutter:   ScrollDirection.idle) flutter:   anchor: 0.0 flutter: This RenderObject had the following descendants (showing up to depth 5): flutter:   RenderSliverPadding#912f7 NEEDS-LAYOUT NEEDS-PAINT flutter:     RenderSliverList#41182 NEEDS-LAYOUT NEEDS-PAINT flutter:       RenderRepaintBoundary#8a6de NEEDS-LAYOUT NEEDS-PAINT flutter:         RenderConstrainedBox#4bfc3 NEEDS-LAYOUT NEEDS-PAINT flutter:          
_RenderExcludableScrollSemantics#0976e NEEDS-LAYOUT NEEDS-PAINT flutter: ════════════════════════════════════════════════════════════════════════════════════════════════════ flutter: Another exception was thrown: RenderBox was not laid out: RenderViewport#c5015 NEEDS-LAYOUT NEEDS-PAINT flutter: Another exception was thrown: RenderBox was not laid out: RenderViewport#c5015 NEEDS-PAINT flutter: Another exception was thrown: RenderBox was not laid out: RenderIgnorePointer#a987c relayoutBoundary=up14 NEEDS-PAINT flutter: Another exception was thrown: RenderBox was not laid out: RenderSemanticsAnnotations#9bd09 relayoutBoundary=up13 NEEDS-PAINT flutter: Another exception was thrown: RenderBox was not laid out: RenderPointerListener#12af7 relayoutBoundary=up12 NEEDS-PAINT Reloaded 1 of 493 libraries in 603ms. flutter: Another exception was thrown: RenderBox was not laid out: RenderSemanticsGestureHandler#27e1a relayoutBoundary=up11 NEEDS-PAINT flutter: Another exception was thrown: RenderBox was not laid out:
_RenderExcludableScrollSemantics#85fc5 relayoutBoundary=up10 NEEDS-PAINT flutter: Another exception was thrown: RenderBox was not laid out: RenderFlex#19bee relayoutBoundary=up9 NEEDS-PAINT flutter: Another exception was thrown: RenderBox was not laid out: RenderPadding#e802a relayoutBoundary=up8 NEEDS-PAINT flutter: Another exception was thrown: RenderBox was not laid out:
_RenderSingleChildViewport#5d1aa relayoutBoundary=up7 NEEDS-PAINT flutter: Another exception was thrown: RenderBox was not laid out: RenderIgnorePointer#f73b8 relayoutBoundary=up6 NEEDS-PAINT flutter: Another exception was thrown: RenderBox was not laid out: RenderSemanticsAnnotations#610b2 relayoutBoundary=up5 NEEDS-PAINT flutter: Another exception was thrown: RenderBox was not laid out: RenderPointerListener#cbdf9 relayoutBoundary=up4 NEEDS-PAINT flutter: Another exception was thrown: RenderBox was not laid out: RenderSemanticsGestureHandler#37577 relayoutBoundary=up3 NEEDS-PAINT flutter: Another exception was thrown: 'package:flutter/src/rendering/shifted_box.dart': Failed assertion: line 310 pos 12: 'child.hasSize': is not true. flutter: Another exception was thrown: RenderBox was not laid out:
_RenderSingleChildViewport#5d1aa relayoutBoundary=up7 NEEDS-P

医生摘要（查看所有详细信息，运行flutter doctor -v）：

[✓] Flutter（Channel beta，v0.4.4，Mac OS X 10.13.1 17B1003，locale en-HK）

[✓] Android工具链 - 针对Android设备开发（Android SDK 26.0.2）

[✓] iOS工具链 - 为iOS设备开发（Xcode 9.2）

[✓] Android Studio（3.1版）

[✓]连接设备（3个可用）

Answer 1

尝试此代码，

您可以使用以下代码在flutter中实现可滚动的行

对于可滚动列，只需将“行”更改为“列”

new SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: new Row(
   children: <Widget>[
     new Text('hi'),
     new Text('hi'),
     new Text('hi'),
   ]
  )
)

see the output here

Answer 2

您可以使用扩展窗口小部件来包装listView。展开的小部件会告诉屏幕以允许其占用的空间为准。

或者您也可以在shrinkWrap:true小部件中编写ListView（在很多情况下可以使用）。

Answer 3

水平ListView将垂直展开以占据其父级的高度。恰好在这种情况下，父亲是一个垂直ListView，它具有无限高度。您需要约束内部ListView的高度。

可能最简单的方法是通过SizedBox小部件。

ListView(
  children: [
    SizedBox(
      height: 300.0,
      child: ListView(scrollDirection: Axis.horizontal, ...),
    ),
  ],
)

编辑：

问题实际上是由垂直ListView引起的，因为它是Column的孩子。原因与上面类似，ListView将扩展为其父级的高度，Column具有无限高度。

此代码段显示症状。

Column(
  children: <Widget>[
    ListView(children: [Text("hi"), Text("hi"), Text("hi")]),
  ],
)

这种情况下的解决方案取决于您的设置。你可以再次将它包裹在SizedBox附近。您可以将列项目作为ListView的一部分。或者您也可以更改ListView的{{1}}。

Answer 4

包装＆＃39; ListView＆＃39;使用＆＃39; Expanded＆＃39;窗口小部件。

new Expanded (
    child: new ListView (
                      .....
    )
)

Answer 5

原因是您不能在列表视图中使用列表视图，因此您必须根据要求将其中一个添加到列或行中。

new Listview(
children: <Widget>[
    new SizedBox(
        height:100.0,
        child: new Row(
            children: <Widget>[
                new Text("hi"),
                new Text("hi"),
                new Text("hi"),
            ]
        )
    )
]

）

根据我的要求，这将满足您的要求。

Answer 6

尝试设置ListView的以下属性

shrinkWrap: true,
physics: ClampingScrollPhysics(),

对我来说，大多数“未绑定”约束和滚动错误已解决。

Answer 7

您需要将水平ListView包装在SizedBox小部件内。看看以下示例代码：

new SizedBox(
          height: 72.0,
          child: new ListView(
            padding: const EdgeInsets.symmetric(vertical: 4.0),
            children: listViewItems,
            scrollDirection: Axis.horizontal,
          ),
        ),

Answer 8

这似乎是一个懒惰的答案，但是您是否尝试过进行$ flutter clean？

当我使用打开新的flutter项目时给定的标准样板运行此代码时，它运行得很好，并使用了给您带来问题的相同代码。

我知道这是一个比较老的问题，但希望有人会觉得有用。

这就是我使用的；

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {


  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: 
        _listView(),

    );
  }

  ListView _listView() {
    return new ListView(
      children: [
        new SizedBox(
          height: 100.0,
          child: ListView(
            scrollDirection: Axis.horizontal,
            children: <Widget>[
            new Text("hi"),
            new Text("hi"),
            new Text("hi"),
            ],
          ),
        ),
      ],
    );

  }

}

这就是我得到的；

Answer 9

使用此

 child: SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    child: Row(
      children: <Widget>[
        buildCard(context),
        buildCard(context),
        buildCard(context),
      ],
    ),
  ),

Answer 10

所以您也可以这样做：

Container(
    height: 100.0,
    child: ListView(
        scrollDirection: Axis.horizontal,
        children: <Widget>[
            new Text("hi"),
            new Text("hi"),
            new Text("hi"),
        ]
    ),
),

通过将ListView包装在Container小部件中

Answer 11

您也可以尝试水平滚动和垂直滚动。

  return Scaffold(
  body: ListView.builder(
    scrollDirection: Axis.vertical,
    itemBuilder: (BuildContext context, int index) {
      return Container(
        height: 200,
        margin: EdgeInsets.all(20),
        child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: 20,
          itemBuilder: (BuildContext context, int index) {
            return Container(
              color: Colors.grey,
              width: 100,
              height: 100,
              margin: EdgeInsets.all(20),
            );
          },
        ),
      );
    },
  ),
);

Flutter Listview可滚动行

11 个答案:

编辑：