logo标签列表

Flutter列表视图可滚动行

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

我使用了Sized Box，似乎仍然出现错误。

这是我的Widget Tree: SingleChildScrollView -> Column -> children

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（beta频道，v0.4.4，在Mac OS X 10.13.1 17B1003上，语言环境为en-HK）

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

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

[✓] Android Studio（版本3.1）

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

这是你的完整构建函数吗？你提供的代码片段在我的机器上可以正常运行，没有错误。 - Edman
让我展示完整的构建。 - Niccolo
每个ListView都需要设置shrinkWrap: true。 - Pushan Gupta
10个回答
77

尝试这段代码，

你可以使用以下代码在Flutter中实现可滚动的行

如果想要实现可滚动列，只需将Column更改为Row

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

编辑：在Dart 2中，关键字new是可选的。

在这里查看输出结果

15

您可以使用Expanded小部件来包装您的listView。 Expanded小部件告诉屏幕允许小部件想要占用多少空间。

或者您也可以在您的ListView小部件中编写shrinkWrap:true(在许多情况下都适用)。

14

尝试设置您的ListView的以下属性

shrinkWrap: true,
physics: ClampingScrollPhysics(),

对我来说，大部分未绑定的约束和滚动错误都得到了解决。

11

一个水平的 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更改为Column。

你能否更新问题并说明代码中出现的错误及其位置？我刚刚尝试了上面的代码片段，SizedBox解决了我的机器上的问题。 - Edman
实际上，我在问题中发布的代码也在我的机器上运行正常。因为你将ListView包装在具有固定高度的Container中，它就像一个SizedBox一样运作。 - Edman
4

使用“Expanded”小部件将“ListView”包装起来。

new Expanded (
    child: new ListView (
                      .....
    )
)
3
Flutter：RenderFlex子元素具有非零的flex，但传入的高度约束未被限制。 Flutter：如果列位于不提供有限高度约束的父级中，例如它位于垂直可滚动区域中，则它将尝试沿垂直轴缩小其子项的包裹大小。在子项上设置flex（例如使用Expanded）表示该子项应在垂直方向上扩展以填充剩余的空间。 - Niccolo
3
因此，您也可以这样做：

这么做的方法如下：

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

通过将你的ListView包装在一个Container小部件中。最初的回答。
2

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

new SizedBox(
          height: 72.0,
          child: new ListView(
            padding: const EdgeInsets.symmetric(vertical: 4.0),
            children: listViewItems,
            scrollDirection: Axis.horizontal,
          ),
        ),
2
您也可以尝试这个方法来实现水平和垂直滚动。
  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),
            );
          },
        ),
      );
    },
  ),
);
1
原因是在flutter中不能在Listview内部使用Listview，因此您必须根据需要将它们之一更改为列或行。
new Listview(
children: <Widget>[
    new SizedBox(
        height:100.0,
        child: new Row(
            children: <Widget>[
                new Text("hi"),
                new Text("hi"),
                new Text("hi"),
            ]
        )
    )
]

)

这是我认为能够满足您需求的内容。
0
这可能看起来像是一个懒惰的回答，但你尝试过执行 $ 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"),
            ],
          ),
        ),
      ],
    );

  }

}

这就是我得到的内容；

enter image description here

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接