Flutter Listview可滚动行 [英] Flutter Listview Scrollable Row

查看：86
本文介绍了Flutter Listview可滚动行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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，似乎仍然出现错误。

I used the Sized Box and seems still got the error.

这是我的小部件树：
SingleChildScrollView->列->儿童

This is my 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）：

Doctor summary (to see all details, run flutter doctor -v):

[✓] Flutter（Mac OS X 10.13.1上的Channel beta，v0.4.4 17B1003，语言环境en -HK）

[✓] Flutter (Channel beta, v0.4.4, on Mac OS X 10.13.1 17B1003, locale en-HK)

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

[✓] Android toolchain - develop for Android devices (Android SDK 26.0.2)

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

[✓] iOS toolchain - develop for iOS devices (Xcode 9.2)

[✓] Android Studio（版本3.1）

[✓] Android Studio (version 3.1)

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

[✓] Connected devices (3 available)

推荐答案

尝试此代码，

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

You can implement scrollable row in flutter using below code

，对于可滚动列，只需将 Column 更改为 Row

and for scrollable column just change Column with Row

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

编辑 ：关键字 new 在 Dart 2

在此处查看输出

这篇关于Flutter Listview可滚动行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆