Flutter:SingleChildScrollView中的TabBarView [英] Flutter: TabBarView inside SingleChildScrollView
问题描述
我的问题是我想要在SingleChildScrollView中使用TabBarView，但是它给了我这个错误: RenderFlex 子级的flex值非零，但传入的高度限制不受限制.
如果我删除了 SingleChildScrollView ，它可以工作，但是我需要小部件，因为那样的话，我想推送一个与 TabBar 一起滚动的ListView，例如Instagram.
代码:
import'package:flutter/material.dart';void main(){runApp(MyApp());}MyApp类扩展了StatefulWidget {@override_MyAppState createState()=>_MyAppState();}类别_MyAppState扩展了State< MyApp>与SingleTickerProviderStateMixin {TabController tabController;@override无效的initState(){super.initState();tabController = new TabController(长度:2，vsync:此);}@override无效dispose(){tabController.dispose();super.dispose();}@override窗口小部件build(BuildContext context){返回MaterialApp(家:脚手架(正文:SingleChildScrollView(子:列(孩子们: [TabBar(控制器:tabController，标签:[标签(图标:图标(Icons.photo_library，大小:30，)，)，标签(图标:图标(Icons.perm_media，大小:30，)，)，]，labelColor:Colors.deepOrange，unselectedLabelColor:Colors.black，indicatorColor:Colors.deepOrange，)，展开(子代:TabBarView(控制器:tabController，子代:[Expanded(child:Container())，展开(子级:Container())])，)，]，)，)));}} 更改:
import'package:flutter/material.dart';void main(){runApp(MyApp());}MyApp类扩展了StatefulWidget {@override_MyAppState createState()=>_MyAppState();}类别_MyAppState扩展了State< MyApp>与SingleTickerProviderStateMixin {TabController tabController;@override无效的initState(){super.initState();tabController = new TabController(长度:2，vsync:此);}@override无效dispose(){tabController.dispose();super.dispose();}@override窗口小部件build(BuildContext context){返回MaterialApp(家:脚手架(正文:列(mainAxisSize:MainAxisSize.min，孩子们: [TabBar(控制器:tabController，标签:[标签(图标:图标(Icons.photo_library，大小:30，)，)，标签(图标:图标(Icons.perm_media，大小:30，)，)，]，labelColor:Colors.deepOrange，unselectedLabelColor:Colors.black，indicatorColor:Colors.deepOrange，)，展开(孩子:SingleChildScrollView(孩子:TabBarView(控制器:tabController，孩子:[容器()，容器()])，)，)]，)，))；}} TabBarView需要一个SingleChildScrollView无法提供的有限高度.问题在于您正在使用SingleChildScrollView内的一列中的expand.
来自类似问题的答案可能会帮助您
答案出在错误本身中.当列位于可滚动视图中时，该列将尝试收缩其内容，但是由于您使用Expanded作为该列的子级，因此它与试图收缩其子级的列相反.两者都试图实现完全相反的任务.Og
这是导致此错误的原因，因为这两个指令彼此完全相反.如错误日志中所述，请尝试以下操作:考虑将 mainAxisSize 设置为 MainAxisSize.min (用于列)，并使用 FlexFit.loose 适合于弹性字体(使用Flexible而不是Expanded)./p>
My problem is that I want a TabBarView inside a SingleChildScrollView but it gives me this error:
RenderFlex children have non-zero flex but incoming height constraints are unbounded.
If I remove the SingleChildScrollView it works but I need the widget because then I want to push a ListView that it scrolls with the TabBar, like Instagram.
Code:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
TabController tabController;
@override
void initState() {
super.initState();
tabController = new TabController(length: 2, vsync: this);
}
@override
void dispose() {
tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SingleChildScrollView(
child: Column(
children: [
TabBar(
controller: tabController,
tabs: [
Tab(
icon: Icon(
Icons.photo_library,
size: 30,
),
),
Tab(
icon: Icon(
Icons.perm_media,
size: 30,
),
),
],
labelColor: Colors.deepOrange,
unselectedLabelColor: Colors.black,
indicatorColor: Colors.deepOrange,
),
Expanded(
child: TabBarView(controller: tabController, children: [
Expanded(child: Container()),
Expanded(child: Container())
]),
),
],
),
)));
}
}
Changes:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
TabController tabController;
@override
void initState() {
super.initState();
tabController = new TabController(length: 2, vsync: this);
}
@override
void dispose() {
tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Column(
mainAxisSize: MainAxisSize.min,
children: [
TabBar(
controller: tabController,
tabs: [
Tab(
icon: Icon(
Icons.photo_library,
size: 30,
),
),
Tab(
icon: Icon(
Icons.perm_media,
size: 30,
),
),
],
labelColor: Colors.deepOrange,
unselectedLabelColor: Colors.black,
indicatorColor: Colors.deepOrange,
),
Expanded(
child: SingleChildScrollView(child:TabBarView(controller: tabController, children: [
Container(),
Container()
]),
),)
],
),
));
}
}
The TabBarView requires a finite height which the SingleChildScrollView cant offer. The Problem is you are using expanded in a column that is inside a SingleChildScrollView.
This answer from a similar question might help you
The answer is in the error itself. When the column is inside a view that is scrollable, the column is trying to shrink-wrap its content but since you used Expanded as a child of the column it is working opposite to the column trying to shrink-wrap its children. Both are trying to achieve an exactly opposite task. Og
This is causing this error because these two directives are completely opposite to each other.
As mentioned in the error logs try the following:
Consider setting mainAxisSize to MainAxisSize.min (for column) and using FlexFit.loose fits for the flexible (use Flexible rather than Expanded).
这篇关于Flutter:SingleChildScrollView中的TabBarView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
