TabBarView 在列内扩展时出错

huangapple
go评论49阅读模式
英文:

TabBarView expanded inside a column error

问题

我从TabBarView中收到了这个错误。
当我使用具有特定高度的容器时，没有错误。
但我不想设置特定的高度，
我希望它占据列的其余部分。所以我尝试使用expanded和flexible，但我收到了这个错误。

我真的需要使用TabBarView，不能使用其他选项。
有人能帮忙吗？

异常已发生。
FlutterError（RenderFlex的子元素具有非零的flex，但传入的高度约束未定义。
当列位于不提供有限高度约束的父级中时，例如，如果它位于垂直可滚动中，它将尝试在垂直轴上包装其子元素。在子元素上设置flex（例如使用Expanded）表示子元素应扩展以填充垂直方向上的剩余空间。
这两个指令是互斥的。如果父级要包装其子元素，子元素不能同时扩展以适应其父级。
考虑将mainAxisSize设置为MainAxisSize.min，并对可伸缩的子元素使用FlexFit.loose适合（使用Flexible而不是Expanded）。这将允许可伸缩的子元素将自己的尺寸调整为小于无限剩余空间，否则它们将被迫占用，然后将导致RenderFlex包装子元素，而不是扩展以适应父级提供的最大约束。
如果此消息未帮助您确定问题，请考虑使用debugDumpRenderTree（）：
https://flutter.dev/debugging/#rendering-layer
http://api.flutter.dev/flutter/rendering/debugDumpRenderTree.html
受影响的RenderFlex是：
RenderFlex#c8da4 relayoutBoundary=up14 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE（创建者：Column ← _SingleChildViewport ← IgnorePointer-[GlobalKey#a14ea] ← Semantics ← Listener ← _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#45e38] ← Listener ← _ScrollableScope ← _ScrollSemantics-[GlobalKey#ecd8b] ← NotificationListener<ScrollMetricsNotification> ← RepaintBoundary ← ⋯，parentData：<none>（可以使用大小），约束：BoxConstraints（0.0<=w<=363.4，0.0<=h<=Infinity），大小：MISSING，方向：垂直，mainAxisAlignment：start，mainAxisSize：min，crossAxisAlignment：center，verticalDirection：down）
创建者信息已设置为：
Column ← _SingleChildViewport ← IgnorePointer-[GlobalKey#a14ea] ← Semantics ← Listener ← _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#45e38] ← Listener ← _ScrollableScope ← _ScrollSemantics-[GlobalKey#ecd8b] ← NotificationListener<ScrollMetricsNotification> ← RepaintBoundary ← ⋯
提供无限宽度约束的最近祖先是：_RenderSingleChildViewport#b15e8 relayoutBoundary=up13 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE：
需要合成
创建者：_SingleChildViewport ← IgnorePointer-[GlobalKey#a14ea] ← Semantics ← Listener ← _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#45e38] ← Listener ← _ScrollableScope ← _ScrollSemantics-[GlobalKey#ecd8b] ← NotificationListener<ScrollMetricsNotification> ← RepaintBoundary ← CustomPaint ← ⋯
parentData：<none>（可以使用大小）
约束：BoxConstraints（0.0<=w<=363.4，h=636.6）
大小：MISSING
偏移：Offset（0.0，-0.0）
另请参见：https://flutter.dev/layout/
如果上述任何方法都无法足够帮助解决此问题，请随时提交错误报告：
https://github.com/flutter/flutter/issues/new?template=2_bug.md）

import 'package:flutter/material.dart';
import 'package:news_app/helper/enum.dart';
import 'package:news_app/screens/home/home_top_bar.dart';
import 'package:news_app/screens/home/latest_widget.dart';
import 'package:news_app/screens/home/news_tile.dart';
import 'package:news_app/screens/home/see_all_widget.dart';
import 'package:news_app/screens/home/trending_widget.dart';
import 'package:news_app/widgets/text_fields/search_field.dart';

class HomeSection extends StatefulWidget {
  const HomeSection({super.key});

  @override
  State<HomeSection> createState() => _HomeSectionState();
}

class _HomeSectionState extends State<HomeSection> with TickerProviderStateMixin {
  TextEditingController search = TextEditingController();

  @override
  Widget build(BuildContext context) {
    final TabController tabController = TabController(
      length: 2,
      initialIndex: 1,
      vsync: this,
    );
    return Column(
      children: [
        const HomeTopBar(),
        SearchField(
          controller: search,
          onChanged: (value) {},
          prefixIcon: Icon(
            Icons.search,
            size: 30,
            color: Theme.of(context).secondaryHeaderColor,
          ),
          suffixIcons: Image.asset('assets/icons/slider_menu.png',
              color: Theme.of(context).secondaryHeaderColor,
          ),
        ),
        SizedBox(
          height: MediaQuery.of(context).size.height * 0.0101,
        ),
        Expanded(
          child: SingleChildScrollView(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                const SeeAllBar(heading: "Trending"),
                TrendingWidget(
                  newsCategory: "Europe",
                  title: "Russian warship: Moskva sinks in Black Sea",
                  publishedTime: "4h ago",
                  image: Image.asset('assets/temp/trending1.png'),
                  publisher: "BBC",
                  publisherLogo: Image.asset('assets/temp/bbc.png'),
                ),
                SizedBox(
                  height: MediaQuery.of(context).size.height * 0.0101,
                ),
                const SeeAllBar(heading: "Latest"),
                TabBar(
                  controller: tabController,
                  isScrollable: true,
                  tabs: const [
                    Text("All"),
                    Text("Politics"),
                  ],
                ),
                Expanded(
                  child: TabBarView(
                    controller: tabController,
                    children: const [
                      Text("All"),
                      Text("Politics"),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}
英文:

I am getting this error from the TabBarView.
When I use a container with a specific height there are no errors.
but I don't want to set a specific height
I want it to take the rest of the column. So I tried using expanded and flexible but I am getting this error.

i really need to use TabBarView I can't use any other options.
Can any body help plz

Exception has occurred.
FlutterError (RenderFlex children have non-zero flex but incoming height constraints are unbounded.
When a column is in a parent that does not provide a finite height constraint, for example if it is in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis. Setting a flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining space in the vertical direction.
These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child cannot simultaneously expand to fit its parent.
Consider setting mainAxisSize to MainAxisSize.min and using FlexFit.loose fits for the flexible children (using Flexible rather than Expanded). This will allow the flexible children to size themselves to less than the infinite remaining space they would otherwise be forced to take, and then will cause the RenderFlex to shrink-wrap the children rather than expanding to fit the maximum constraints provided by the parent.
If this message did not help you determine the problem, consider using debugDumpRenderTree():
https://flutter.dev/debugging/#rendering-layer
http://api.flutter.dev/flutter/rendering/debugDumpRenderTree.html
The affected RenderFlex is:
RenderFlex#c8da4 relayoutBoundary=up14 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE(creator: Column ← _SingleChildViewport ← IgnorePointer-[GlobalKey#a14ea] ← Semantics ← Listener ← _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey&lt;RawGestureDetectorState&gt;#45e38] ← Listener ← _ScrollableScope ← _ScrollSemantics-[GlobalKey#ecd8b] ← NotificationListener&lt;ScrollMetricsNotification&gt; ← RepaintBoundary ← ⋯, parentData: &lt;none&gt; (can use size), constraints: BoxConstraints(0.0&lt;=w&lt;=363.4, 0.0&lt;=h&lt;=Infinity), size: MISSING, direction: vertical, mainAxisAlignment: start, mainAxisSize: min, crossAxisAlignment: center, verticalDirection: down)
The creator information is set to:
Column ← _SingleChildViewport ← IgnorePointer-[GlobalKey#a14ea] ← Semantics ← Listener ← _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey&lt;RawGestureDetectorState&gt;#45e38] ← Listener ← _ScrollableScope ← _ScrollSemantics-[GlobalKey#ecd8b] ← NotificationListener&lt;ScrollMetricsNotification&gt; ← RepaintBoundary ← ⋯
The nearest ancestor providing an unbounded width constraint is: _RenderSingleChildViewport#b15e8 relayoutBoundary=up13 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE:
needs compositing
creator: _SingleChildViewport ← IgnorePointer-[GlobalKey#a14ea] ← Semantics ← Listener ← _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey&lt;RawGestureDetectorState&gt;#45e38] ← Listener ← _ScrollableScope ← _ScrollSemantics-[GlobalKey#ecd8b] ← NotificationListener&lt;ScrollMetricsNotification&gt; ← RepaintBoundary ← CustomPaint ← ⋯
parentData: &lt;none&gt; (can use size)
constraints: BoxConstraints(0.0&lt;=w&lt;=363.4, h=636.6)
size: MISSING
offset: Offset(0.0, -0.0)
See also: https://flutter.dev/layout/
If none of the above helps enough to fix this problem, please don&#39;t hesitate to file a bug:
https://github.com/flutter/flutter/issues/new?template=2_bug.md)

import &#39;package:flutter/material.dart&#39;;
import &#39;package:news_app/helper/enum.dart&#39;;
import &#39;package:news_app/screens/home/home_top_bar.dart&#39;;
import &#39;package:news_app/screens/home/latest_widget.dart&#39;;
import &#39;package:news_app/screens/home/news_tile.dart&#39;;
import &#39;package:news_app/screens/home/see_all_widget.dart&#39;;
import &#39;package:news_app/screens/home/trending_widget.dart&#39;;
import &#39;package:news_app/widgets/text_fields/search_field.dart&#39;;
class HomeSection extends StatefulWidget {
const HomeSection({super.key});
@override
State&lt;HomeSection&gt; createState() =&gt; _HomeSectionState();
}
class _HomeSectionState extends State&lt;HomeSection&gt;
with TickerProviderStateMixin {
TextEditingController search = TextEditingController();
@override
Widget build(BuildContext context) {
final TabController tabController = TabController(
length: 2,
initialIndex: 1,
vsync: this,
);
return Column(
children: [
const HomeTopBar(),
SearchField(
controller: search,
onChanged: (value) {},
prefixIcon: Icon(
Icons.search,
size: 30,
color: Theme.of(context).secondaryHeaderColor,
),
suffixIcons: Image.asset(
&#39;assets/icons/slider_menu.png&#39;,
color: Theme.of(context).secondaryHeaderColor,
),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.0101,
),
Expanded(
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const SeeAllBar(heading: &quot;Trending&quot;),
TrendingWidget(
newsCategory: &quot;Europe&quot;,
title: &quot;Russian warship: Moskva sinks in Black Sea&quot;,
publishedTime: &quot;4h ago&quot;,
image: Image.asset(&#39;assets/temp/trending1.png&#39;),
publisher: &quot;BBC&quot;,
publisherLogo: Image.asset(&#39;assets/temp/bbc.png&#39;),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.0101,
),
const SeeAllBar(heading: &quot;Latest&quot;),
TabBar(
controller: tabController,
isScrollable: true,
tabs: const [
Text(&quot;All&quot;),
Text(&quot;Politics&quot;),
],
),
Expanded(
child: TabBarView(
controller: tabController,
children: const [
Text(&quot;All&quot;),
Text(&quot;Politics&quot;),
],
),
),
],
),
),
),
],
);
}
}

答案1

得分: 1

如果您只需要为TabBarView添加滚动 - 请将主列包装在具有固定高度的容器中。然后，您可以在其中使用Expanded，而无需使用SingleChildScrollView。

return Container(
  color: Colors.redAccent,
  height: MediaQuery.of(context).size.height,  //<<< 您的设备高度
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      Container(
        height: _topHeight,
        width: double.infinity,
        color: Colors.orange,
        child: Center(child: Text('TopBar')),
      ),
      Container(
        height: _searchHeight,
        width: double.infinity,
        color: Colors.yellowAccent,
        child: Center(child: Text('Search Field')),
      ),
      SizedBox(
        height: _sizeBoxHeight,
      ),
      Expanded(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const Text("Trending Bar"),
            Container(
              height: 210,
              width: double.infinity,
              color: Colors.blueAccent,
              child: Center(child: Text('Trending widget')),
            ),
            SizedBox(
              height: _sizeBoxHeight,
            ),
            const Text("Latest"),
            TabBar(
              controller: tabController,
              isScrollable: true,
              tabs: const [
                Text("All"),
                Text("Politics"),
              ],
            ),
            Expanded(
              child: TabBarView(
                controller: tabController,
                children: [
                  ListView.builder(itemBuilder: (context, index) {
                    return Text('All $index');
                  }, itemCount: 100,),
                  ListView.builder(itemBuilder: (context, index) {
                    return Text('Politics $index');
                  }, itemCount: 100,),
                ],
              ),
            ),
          ],
        ),
      ),
    ],
  ),
);

TabBarView 在列内扩展时出错


<details>
<summary>英文:</summary>
If you need scrolling only for TabBarView - wrap main Column with fixed height container. Then you can use Expanded inside without SingleChildScrollView. 
return Container(
color: Colors.redAccent,
height: MediaQuery.of(context).size.height,  //&lt;&lt;&lt; your device height
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
height: _topHeight,
width: double.infinity,
color: Colors.orange,
child: Center(child: Text(&#39;TopBar&#39;)),
),
Container(
height: _searchHeight,
width: double.infinity,
color: Colors.yellowAccent,
child: Center(child: Text(&#39;Search Field&#39;)),
),
SizedBox(
height: _sizeBoxHeight,
),
Expanded(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const Text(&quot;Trending Bar&quot;),
Container(
height: 210,
width: double.infinity,
color: Colors.blueAccent,
child: Center(child: Text(&#39;Trending widget&#39;)),
),
SizedBox(
height: _sizeBoxHeight,
),
const Text(&quot;Latest&quot;),
TabBar(
controller: tabController,
isScrollable: true,
tabs: const [
Text(&quot;All&quot;),
Text(&quot;Politics&quot;),
],
),
Expanded(
child: TabBarView(
controller: tabController,
children: [
ListView.builder(itemBuilder: (context, index) {
return Text (&#39;All $index&#39;);
}, itemCount: 100,),
ListView.builder(itemBuilder: (context, index) {
return Text (&#39;Politics $index&#39;);
}, itemCount: 100,),
],
),
),
],
),
),
],
),
); 
[![enter image description here][1]][1]
[1]: https://i.stack.imgur.com/CsjY5.png
</details>

huangapple
  • 本文由 发表于 2023年2月6日 18:56:35
  • 转载请务必保留本文链接：https://go.coder-hub.com/75360401.html
  • dart
  • flutter
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定