flutter 如何将TabBarView Widget正确放置在列Widget中？

o0lyfsai  于 2023-11-21  发布在  Flutter
关注(0)|答案(2)|浏览(129)

将TabBar和TabBarView放置在Scaffold的列小部件中时出错。
我的源代码：

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CustomView(),
    );
  }
}

class CustomView extends StatelessWidget {
  const CustomView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: SingleChildScrollView(
        child: Column(
          children: [
            CustomBox(),
            CustomTitle(),
            CustomMainText(),
            CustomButton(),
            CustomTabView(),
          ],
        ),
      ),
    );
  }
}

class CustomTabView extends StatelessWidget {
  const CustomTabView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Column(
        children: [
          TabBar(
            labelColor: Colors.black,
            tabs: [
              Tab(text: 'tab1'),
              Tab(text: 'tab2'),
            ],
          ),
          TabBarView( // Here is Line 132.
            children: [
              Container(),
              Container(),
            ],
          ),
        ],
      ),
    );
  }
}

字符串
我的错误：

======== Exception caught by rendering library =====================================================
The following assertion was thrown during performResize():
Horizontal viewport was given unbounded height.

Viewports expand in the cross axis to fill their container and constrain their children to match their extent in the cross axis. In this case, a horizontal viewport was given an unlimited amount of vertical space in which to expand.
The relevant error-causing widget was: 
  TabBarView TabBarView:file:///C:/Users/rbqls/AndroidStudioProjects/myfirstflutterproject/lib/main.dart:132:11
When the exception was thrown, this was the stack: 
#0      RenderViewport.computeDryLayout.<anonymous closure> (package:flutter/src/rendering/viewport.dart:1424:15)
#1      RenderViewport.computeDryLayout (package:flutter/src/rendering/viewport.dart:1436:6)
#2      RenderBox.performResize (package:flutter/src/rendering/box.dart:2329:12)
#3      RenderObject.layout (package:flutter/src/rendering/object.dart:1831:9)
#4      RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#5      RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#6      RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#7      RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#8      RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#9      RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#10     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#11     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#12     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#13     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#14     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#15     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#16     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#17     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#18     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#19     RenderCustomPaint.performLayout (package:flutter/src/rendering/custom_paint.dart:545:11)
#20     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#21     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#22     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#23     ChildLayoutHelper.layoutChild (package:flutter/src/rendering/layout_helper.dart:56:11)
#24     RenderFlex._computeSizes (package:flutter/src/rendering/flex.dart:829:43)
#25     RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:931:32)
#26     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#27     ChildLayoutHelper.layoutChild (package:flutter/src/rendering/layout_helper.dart:56:11)
#28     RenderFlex._computeSizes (package:flutter/src/rendering/flex.dart:829:43)
#29     RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:931:32)
#30     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#31     _RenderSingleChildViewport.performLayout (package:flutter/src/widgets/single_child_scroll_view.dart:504:14)
#32     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#33     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#34     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#35     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#36     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#37     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#38     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#39     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#40     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#41     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#42     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#43     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#44     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#45     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#46     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#47     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#48     RenderCustomPaint.performLayout (package:flutter/src/rendering/custom_paint.dart:545:11)
#49     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#50     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#51     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#52     MultiChildLayoutDelegate.layoutChild (package:flutter/src/rendering/custom_layout.dart:171:12)
#53     _ScaffoldLayout.performLayout (package:flutter/src/material/scaffold.dart:1005:7)
#54     MultiChildLayoutDelegate._callPerformLayout (package:flutter/src/rendering/custom_layout.dart:240:7)
#55     RenderCustomMultiChildLayoutBox.performLayout (package:flutter/src/rendering/custom_layout.dart:403:14)
#56     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#57     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#58     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#59     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#60     _RenderCustomClip.performLayout (package:flutter/src/rendering/proxy_box.dart:1376:11)
#61     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#62     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#63     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#64     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#65     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#66     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#67     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#68     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#69     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#70     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#71     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#72     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#73     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#74     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#75     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#76     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#77     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#78     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#79     RenderOffstage.performLayout (package:flutter/src/rendering/proxy_box.dart:3428:13)
#80     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#81     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#82     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#83     _RenderTheatre.performLayout (package:flutter/src/widgets/overlay.dart:751:15)
#84     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#85     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#86     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#87     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#88     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#89     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#90     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#91     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#92     RenderCustomPaint.performLayout (package:flutter/src/rendering/custom_paint.dart:545:11)
#93     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#94     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#95     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#96     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#97     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#98     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#99     RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#100    RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#101    RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#102    RenderView.performLayout (package:flutter/src/rendering/view.dart:165:14)
#103    RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:1707:7)
#104    PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:879:18)
#105    RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:497:19)
#106    WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:883:13)
#107    RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:363:5)
#108    SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1145:15)
#109    SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1082:9)
#110    SchedulerBinding.scheduleWarmUpFrame.<anonymous closure> (package:flutter/src/scheduler/binding.dart:863:7)
(elided 4 frames from class _RawReceivePortImpl, class _Timer, and dart:async-patch)
The following RenderObject was being processed when the exception was fired: RenderViewport#0158c NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...  needs compositing
...  parentData: <none> (can use size)
...  constraints: BoxConstraints(0.0<=w<=411.4, 0.0<=h<=Infinity)
...  size: MISSING
...  axisDirection: right
...  crossAxisDirection: down
...  offset: _PagePosition#8e104(range: null..null, viewport: null, ScrollableState, _ForceImplicitScrollPhysics -> PageScrollPhysics -> PageScrollPhysics -> ClampingScrollPhysics -> ClampingScrollPhysics -> RangeMaintainingScrollPhysics, IdleScrollActivity#1422c, ScrollDirection.idle)
...  anchor: 0.0
RenderObject: RenderViewport#0158c NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
  needs compositing
  parentData: <none> (can use size)
  constraints: BoxConstraints(0.0<=w<=411.4, 0.0<=h<=Infinity)
  size: MISSING
  axisDirection: right
  crossAxisDirection: down
  offset: _PagePosition#8e104(range: null..null, viewport: null, ScrollableState, _ForceImplicitScrollPhysics -> PageScrollPhysics -> PageScrollPhysics -> ClampingScrollPhysics -> ClampingScrollPhysics -> RangeMaintainingScrollPhysics, IdleScrollActivity#1422c, ScrollDirection.idle)
  anchor: 0.0
...  center child: _RenderSliverFractionalPadding#22595 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...    parentData: paintOffset=Offset(0.0, 0.0)
...    constraints: MISSING
...    geometry: null
...    child: RenderSliverFillViewport#65bf0 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...      parentData: paintOffset=Offset(0.0, 0.0)
...      constraints: MISSING
...      geometry: null
...      no children current live
====================================================================================================

型
我能够使用TabBarView的固定高度值解决该错误，如下面的代码所示：

...
SizedBox(
  height: MediaQuery.of(context).size.width,
  child: TabBarView(
    children: [
      Container(),
      Container(),
    ],
  ),
),
...

型
但是，由于TabBarView中的容器小部件的大小会动态更改，因此TabBarView的高度必须动态更改，以适应其子小部件之一的大小。
此外，我还使用过Flexible、Expanded和FittedBox等各种小部件，但都没有解决。
除了使用固定高度之外，还有其他方法吗？
谢谢

flutter

2条答案

按热度按时间
q3aa0525

q3aa05251#

手动切换TabBarView的内容，而不是使用TabbarView本身。

赞(0）分享  回复(0）举报  2023-11-21
j8yoct9x

j8yoct9x2#

尝试扩展的小部件-

class CustomTabView extends StatelessWidget {
  const CustomTabView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Column(
        children: [
          TabBar(
            labelColor: Colors.black,
            tabs: [
              Tab(text: 'tab1'),
              Tab(text: 'tab2'),
            ],
          ),
       Expanded(child:   TabBarView( // Here is Line 132.
            children: [
              Container(),
              Container(),
            ],
          ),
),
        ],
      ),
    );
  }
}

字符串

赞(0）分享  回复(0）举报  2023-11-21
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com