如何在页面视图中嵌套列表视图

时间:2020-08-12 16:09:59

标签: flutter dart flutter-layout

我正在尝试在ListView中使用PageView

我正在尝试创建两个可滚动的页面,如果我使用的是PageView错误,请提供建议。

这是我到目前为止可以做的。

class ProductDetail extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => ProductDetailState();
}

class ProductDetailState extends State {
    int selectedBarIndex = 0;
  PageController _pageController;

  @override
  void initState() {
    super.initState();
    _pageController = PageController();
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        title: Text('Lime new-entries', style: TextStyle(color: Colors.black),),
      ),
      body: SizedBox(
        child: PageView(
          
          controller: _pageController,
          onPageChanged: (index) {
            setState(() => selectedBarIndex= index);
          },
          children: <Widget>[
            
            ListView(
              shrinkWrap: true,
              children: <Widget>[
              
              // Container(color: Colors.purple, child: NewEntryPage(),),
              Container(
                  padding: EdgeInsets.symmetric(vertical: 20.0, horizontal: 0.0),
                  alignment: Alignment.topLeft,
                  child: NewEntryPage()),
            ],),
           
            Container(color: Colors.red,),
          ],
        ),
      ),
      bottomNavigationBar: BottomNavyBar(
        selectedIndex: selectedBarIndex,
        onItemSelected: (index) {
          setState(() => selectedBarIndex = index);
          _pageController.jumpToPage(index);
        },
        items: <BottomNavyBarItem>[
          BottomNavyBarItem(
            title: Text('Sold-entries'),
            icon: Icon(Icons.assignment_returned)
          ),
          BottomNavyBarItem(
            title: Text('New-entries'),
            icon: Icon(Icons.apps)
          ),
        ],
        ),
    );
  }
}

这是我得到的错误,如果有帮助的话

An Observatory debugger and profiler on itel S12 is available at: http://127.0.0.1:38337/QVxHZaGGG2Y=/
I/flutter ( 5479): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter ( 5479): The following assertion was thrown while applying parent data.:
I/flutter ( 5479): Incorrect use of ParentDataWidget.
I/flutter ( 5479): The ParentDataWidget Expanded(flex: 1) wants to apply ParentData of type FlexParentData to a
I/flutter ( 5479): RenderObject, which has been set up to accept ParentData of incompatible type BoxParentData.
I/flutter ( 5479): Usually, this means that the Expanded widget has the wrong ancestor RenderObjectWidget. Typically,
I/flutter ( 5479): Expanded widgets are placed directly inside Flex widgets.
I/flutter ( 5479): The offending Expanded is currently placed inside a Padding widget.
I/flutter ( 5479): The ownership chain for the RenderObject that received the incompatible parent data was:
I/flutter ( 5479):   ClipPath ← Expanded ← Chart ← Padding ← ColoredBox ← ConstrainedBox ← Padding ← Container ←
I/flutter ( 5479): RepaintBoundary ← IndexedSemantics ← ⋯
I/flutter ( 5479): 
I/flutter ( 5479): When the exception was thrown, this was the stack:
I/flutter ( 5479): #0      RenderObjectElement._updateParentData.<anonymous closure> (package:flutter/src/widgets/framework.dart:5645:11)
I/flutter ( 5479): #1      RenderObjectElement._updateParentData (package:flutter/src/widgets/framework.dart:5661:6)
I/flutter ( 5479): #2      RenderObjectElement.attachRenderObject (package:flutter/src/widgets/framework.dart:5682:7)
I/flutter ( 5479): #3      RenderObjectElement.mount (package:flutter/src/widgets/framework.dart:5376:5)
I/flutter ( 5479): #4      SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:5829:11)
I/flutter ( 5479): ...     Normal element mounting (63 frames)
I/flutter ( 5479): #67     Element.inflateWidget (package:flutter/src/widgets/framework.dart:3446:14)
I/flutter ( 5479): #68     Element.updateChild (package:flutter/src/widgets/framework.dart:3214:18)
I/flutter ( 5479): #69     SliverMultiBoxAdaptorElement.updateChild (package:flutter/src/widgets/sliver.dart:1162:36)
I/flutter ( 5479): #70     SliverMultiBoxAdaptorElement.createChild.<anonymous closure> (package:flutter/src/widgets/sliver.dart:1147:20)
I/flutter ( 5479): #71     BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2607:19)
I/flutter ( 5479): #72     SliverMultiBoxAdaptorElement.createChild (package:flutter/src/widgets/sliver.dart:1140:11)
I/flutter ( 5479): #73     RenderSliverMultiBoxAdaptor._createOrObtainChild.<anonymous closure> (package:flutter/src/rendering/sliver_multi_box_adaptor.dart:354:23)
I/flutter ( 5479): #74     RenderObject.invokeLayoutCallback.<anonymous closure> (package:flutter/src/rendering/object.dart:1866:58)
I/flutter ( 5479): #75     PipelineOwner._enableMutationsToDirtySubtrees (package:flutter/src/rendering/object.dart:918:15)
I/flutter ( 5479): #76     RenderObject.invokeLayoutCallback (package:flutter/src/rendering/object.dart:1866:13)
I/flutter ( 5479): #77     RenderSliverMultiBoxAdaptor._createOrObtainChild (package:flutter/src/rendering/sliver_multi_box_adaptor.dart:343:5)
I/flutter ( 5479): #78     RenderSliverMultiBoxAdaptor.insertAndLayoutChild (package:flutter/src/rendering/sliver_multi_box_adaptor.dart:489:5)
I/flutter ( 5479): #79     RenderSliverList.performLayout.advance (package:flutter/src/rendering/sliver_list.dart:219:19)
I/flutter ( 5479): #80     RenderSliverList.performLayout (package:flutter/src/rendering/sliver_list.dart:262:19)
I/flutter ( 5479): #81     RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #82     RenderSliverEdgeInsetsPadding.performLayout (package:flutter/src/rendering/sliver_padding.dart:135:11)
I/flutter ( 5479): #83     RenderSliverPadding.performLayout (package:flutter/src/rendering/sliver_padding.dart:375:11)
I/flutter ( 5479): #84     RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #85     RenderViewportBase.layoutChildSequence (package:flutter/src/rendering/viewport.dart:452:13)
I/flutter ( 5479): #86     RenderViewport._attemptLayout (package:flutter/src/rendering/viewport.dart:1444:12)
I/flutter ( 5479): #87     RenderViewport.performLayout (package:flutter/src/rendering/viewport.dart:1353:20)
I/flutter ( 5479): #88     RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #89     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #90     RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #91     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #92     RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #93     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #94     RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #95     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #96     RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #97     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #98     RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #99     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #100    RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #101    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #102    RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #103    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #104    RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #105    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #106    RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #107    MultiChildLayoutDelegate.layoutChild (package:flutter/src/rendering/custom_layout.dart:171:11)
I/flutter ( 5479): #108    _ScaffoldLayout.performLayout (package:flutter/src/material/scaffold.dart:484:7)
I/flutter ( 5479): #109    MultiChildLayoutDelegate._callPerformLayout (package:flutter/src/rendering/custom_layout.dart:240:7)
I/flutter ( 5479): #110    RenderCustomMultiChildLayoutBox.performLayout (package:flutter/src/rendering/custom_layout.dart:399:14)
I/flutter ( 5479): #111    RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #112    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #113    RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #114    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #115    _RenderCustomClip.performLayout (package:flutter/src/rendering/proxy_box.dart:1248:11)
I/flutter ( 5479): #116    RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #117    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #118    RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #119    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #120    RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #121    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #122    RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #123    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #124    RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #125    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #126    RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #127    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #128    RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #129    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #130    RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #131    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #132    RenderOffstage.performLayout (package:flutter/src/rendering/proxy_box.dart:3225:13)
I/flutter ( 5479): #133    RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #134    _RenderTheatre.performLayout (package:flutter/src/widgets/overlay.dart:700:15)
I/flutter ( 5479): #135    RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #136    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #137    RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #138    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #139    RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #140    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #141    RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #142    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #143    RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #144    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #145    RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #146    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:111:13)
I/flutter ( 5479): #147    RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)
I/flutter ( 5479): #148    RenderView.performLayout (package:flutter/src/rendering/view.dart:167:13)
I/flutter ( 5479): #149    RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:1630:7)
I/flutter ( 5479): #150    PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:887:18)
I/flutter ( 5479): #151    RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:402:19)
I/flutter ( 5479): #152    WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:884:13)
I/flutter ( 5479): #153    RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:284:5)
I/flutter ( 5479): #154    SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1113:15)
I/flutter ( 5479): #155    SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1052:9)
I/flutter ( 5479): #156    SchedulerBinding.scheduleWarmUpFrame.<anonymous closure> (package:flutter/src/scheduler/binding.dart:861:7)
I/flutter ( 5479): (elided 11 frames from class _RawReceivePortImpl, class _Timer, dart:async, and dart:async-patch)
I/flutter ( 5479): ════════════════════════════════════════════════════════════════════════════════════════════════════
D/GraphicBuffer( 5479): register, handle(0x91ff7d50) (w:480 h:854 s:480 f:0x1 u:0x000f02)
D/GraphicBuffer( 5479): register, handle(0x91ff7ea0) (w:480 h:854 s:480 f:0x1 u:0x000f02)
I/flutter ( 5479): value:2
I/flutter ( 5479): Another exception was thrown: RenderCustomMultiChildLayoutBox object was given an infinite size during layout.
I/flutter ( 5479): Another exception was thrown: _RenderInkFeatures object was given an infinite size during layout.
I/flutter ( 5479): Another exception was thrown: RenderPhysicalModel object was given an infinite size during layout.
I/flutter ( 5479): Another exception was thrown: RenderFlex object was given an infinite size during layout.
I/flutter ( 5479): Another exception was thrown: RenderPositionedBox object was given an infinite size during layout.
I/flutter ( 5479): Another exception was thrown: RenderPadding object was given an infinite size during layout.
I/flutter ( 5479): Another exception was thrown: RenderRepaintBoundary object was given an infinite size during layout.
I/flutter ( 5479): Another exception was thrown: RenderIndexedSemantics object was given an infinite size during layout.
I/flutter ( 5479): Another exception was thrown: NoSuchMethodError: The method '>' was called on null.

这是返回列的newEntryPage代码


class NewEntryPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => NewEntryPageState();
}

class NewEntryPageState extends State<NewEntryPage>
    with SingleTickerProviderStateMixin {
  final List<Tab> myTabs = <Tab>[
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
  ];

  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: myTabs.length);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    return Column(
      children: <Widget>[
        TopSummaryCard(),
        Container(
          margin: EdgeInsets.symmetric(vertical: 20.0),
          padding: const EdgeInsets.all(10.0),
          color: Colors.white,
          child: Column(
            children: <Widget>[
              Container(
                child: Row(
                  children: [
                    IconButton(
                      icon: Icon(Icons.arrow_back_ios),
                      onPressed: () {
                        if (_tabController.index > 0) {
                          _tabController.animateTo(_tabController.index - 1);
                        } else {
                          Scaffold.of(context).showSnackBar(SnackBar(
                            content: Text("Can't go back"),
                          ));
                        }
                      },
                    ),
                    Expanded(
                      child: TabBar(
                        isScrollable: true,
                        controller: _tabController,
                        labelStyle: TextStyle(color: Colors.black),
                        unselectedLabelColor: Colors.black,
                        labelColor: Colors.blue,
                        tabs: List.generate(
                          20,
                          (index) {
                            return Tab(
                              text: "Tab $index",
                            );
                          },
                        ),
                      ),
                    ),
                    IconButton(
                      icon: Icon(Icons.arrow_forward_ios),
                      onPressed: () {
                        if (_tabController.index + 1 < 20) {
                          _tabController.animateTo(_tabController.index + 1);
                        } else {
                          Scaffold.of(context).showSnackBar(SnackBar(
                            content: Text("Can't move forward"),
                          ));
                        }
                      },
                    ),
                  ],
                ),
                //   }
              ),
              // )
              BarChartSample1()
            ],
          ),
        ),
        BottomBarNavigationPatternExample(),
      ],
    );
  }
}

2 个答案:

答案 0 :(得分:1)

在您的ListView上,将shrinkWrap设置为true。这将使ListView仅占用其所需的空间,而无需扩展。

ListView(
shrinkWrap: true,
  children: <Widget>[
    Container(
      color: Colors.purple,
      child: NewEntryPage(),),
  ],
),

答案 1 :(得分:1)

问题出在ListView上。 ListView始终要求高度有限。如您在错误中清楚看到的那样,错误saya => RenderFlex对象在布局期间被赋予了无限大小。

现在,问题是,您需要使用以下两个小部件中的任何一个将ListView包装成一定的高度,

示例:

Expanded(
  child: ListView(
    shrinkWrap: true,
    children: <Widget>[
      Container(
       color: Colors.purple,
       child: NewEntryPage()
      )
    ]
  ) 
)

如果仍然出现错误,则可以使用此方法:

示例

Flexible(
  flex: 2, // you can play with the flex like 1,2,3....
  fit: FlexFit.loose,
  child: ListView(
    shrinkWrap: true,
    children: <Widget>[
      Container(
       color: Colors.purple,
       child: NewEntryPage()
      )
    ]
  )
)

这将帮助自动占用剩余空间,并帮助ListView占用上述任何小部件所提供的空间