Flutter Listview Scrollable Row

2019-04-09 17:36发布

站内文章 / 前端开发
54 0 0

问题:

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

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

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

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

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

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

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

[✓] Android Studio (version 3.1)

[✓] Connected devices (3 available)

回答1:

Try this code,

You can implement scrollable row in flutter using below code

and for scrollable column just change "Row" with "Column"

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

see the output here



回答2:

You can use Expanded widget to wrap your listView. Expanded widget tells the screen to allow as much as space the widget wants to take.

Or you can also write shrinkWrap:true in your ListView widget (works in a lot of cases).



回答3:

A horizontal ListView will expand vertically to occupy the height of its parent. It happens to be that in this case the parent is a vertical ListView, which has infinite height. You need to constrain the height of your inner ListView.

Probably the simplest way to do that is through a SizedBox widget.

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

EDIT:

The problem is actually caused by the vertical ListView, because it is the child of a Column. The reason is similar as above, a ListView will expand to be the height of its parent and a Column has unbounded height.

This snippet displays the symptom.

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

The solution in this case depends on your setup. You could wrap it around a SizedBox again. You could make the column items part of your ListView. Or you could also change the ListView for a Column.



回答4:

The reason is you cant use a Listview inside a Listview in flutter so you have to make one of them to either column or row as per requirement . 

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

)

This would satisfy your requirement according to me .



回答5:

Wrap the 'ListView' with an 'Expanded' widget.

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


回答6:

You'll need to wrap your horizontal ListView inside SizedBox widget. Have a look at this sample code:

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


回答7:

This might seem like a lazy answer but have you tried doing a $ flutter clean?

When I run this using the standard boilerplate given when you open a new flutter project it runs just fine, using the same code that gave you issues.

I know this is an older question but hopefully someone finds this useful.

This is what I used;

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"),
            ],
          ),
        ),
      ],
    );

  }

}

And this is what I got;



标签： dart flutter
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~