首页 文章

Flutter Listview可滚动行

提问于
浏览 次
4
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 - > 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

医生总结（查看所有细节，运行扑动医生-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个可用）

dart flutter

7 回答

  • 0

    试试这段代码，

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

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

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

    see the output here

    回复于
  • 0

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

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

    回复于
  • 4

    水平 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 .

    回复于
  • 5

    用'Expanded'小部件包装'ListView' .

    new Expanded (
    child: new ListView (
                      .....
    )
)
    回复于
  • 0

    原因是您无法在列表视图中使用Listview，因此您必须根据需要将其中一个设置为列或行 .

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

    ）

    根据我的说法，这将满足您的要求 .

    回复于
  • 6

    您需要在 SizedBox 小部件中包装水平 ListView . 看看这个示例代码：

    new SizedBox(
          height: 72.0,
          child: new ListView(
            padding: const EdgeInsets.symmetric(vertical: 4.0),
            children: listViewItems,
            scrollDirection: Axis.horizontal,
          ),
        ),
    回复于
  • 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

    回复于

相关问题