需要在TabBarView中展开，但高度错误

Question

我需要一个带有Expanded小部件的TabBarView。TabBarView位于窗口小部件之间。适用于具有高度的Sizedbox。

等错误

断言失败：行1651位置12:'_debugDoingThisLayout"：不是真正的

RenderBox未布局：RenderFlex#3caee relayoutBoundary=up6 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE

断言失败：第1687行位置12："hasSize">

TabBarView位于代码末尾：

class TabBarNavigation extends StatefulWidget {
TabBarNavigation({this.posts});
final List<Post> posts;
@override
_TabBarNavigationState createState() => _TabBarNavigationState();
}
class _TabBarNavigationState extends State<TabBarNavigation>
with SingleTickerProviderStateMixin {
TabController _tabController;
@override
void initState() {
super.initState();
_tabController = TabController(
length: 2,
vsync: this,
);
}
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
initialIndex: 0,
child: Padding(
padding: kPaddingTabBar,
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(5.0),
decoration: BoxDecoration(
color: kLightGrey,
borderRadius: BorderRadius.all(
Radius.circular(50),
),
),
child: TabBar(
tabs: <Tab>[Tab(text: kArtwork), Tab(text: kPastJobs)],
unselectedLabelColor: Colors.black54,
labelColor: Colors.black,
unselectedLabelStyle: kBoldText,
labelStyle: kBoldText,
indicatorSize: TabBarIndicatorSize.tab,
indicator: BoxDecoration(
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(50),
color: Colors.white,
),
),
),
const SizedBox(height: kCommonSeparation),
Expanded(
child: TabBarView(
controller: _tabController,
children: [ArtworkTab(widget.posts), PastJobsTab()]
)
),
],
),
),
);
}
}

Answer 1

异常说："断言失败：行1687位置12:'hasSize"。我认为这就是为什么TabBarView需要常量大小的原因，我建议你用固定高度的Container标签包裹，而不是用Expanded。对不起我的英语。

当一些断言方法失败时，就会发生这种类型的异常，因此，我认为理解这种异常可能很有用：https://www.w3adda.com/dart-tutorial/dart-assert-statement

我建议你把代码改成这样：

Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
initialIndex: 0,
child: Padding(
padding: kPaddingTabBar,
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(5.0),
decoration: BoxDecoration(
color: kLightGrey,
borderRadius: BorderRadius.all(
Radius.circular(50),
),
),
child: TabBar(
tabs: <Tab>[Tab(text: kArtwork), Tab(text: kPastJobs)],
unselectedLabelColor: Colors.black54,
labelColor: Colors.black,
unselectedLabelStyle: kBoldText,
labelStyle: kBoldText,
indicatorSize: TabBarIndicatorSize.tab,
indicator: BoxDecoration(
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(50),
color: Colors.white,
),
),
),
const SizedBox(height: kCommonSeparation),
Container(
height: 200,
child: TabBarView(
controller: _tabController,
children: [ArtworkTab(widget.posts), PastJobsTab()]
)
),
],
),
),
);
}

所以，我做了一个快速的小部件来解决这个问题，可以自由使用：

import 'package:flutter/material.dart';
class CustomEasyTabBar extends StatefulWidget {
final List<Tab> tabs;
final List<Widget> pages;
CustomEasyTabBar({
@required this.tabs,
@required this.pages,
}) {
assert(tabs != null && pages != null);
assert(tabs.length == pages.length);
}
@override
_CustomEasyTabBarState createState() => _CustomEasyTabBarState();
}
class _CustomEasyTabBarState extends State<CustomEasyTabBar>
with TickerProviderStateMixin {
TabController tabController;
int currentTabIndex = 0;
@override
void dispose() {
tabController.dispose();
super.dispose();
}
@override
void initState() {
super.initState();
this.tabController = TabController(
initialIndex: 0,
length: this.widget.tabs.length,
vsync: this,
);
this.tabController.addListener(() {
setState(() {
this.currentTabIndex = this.tabController.index;
});
});
}
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
_builderTabs(this.widget.tabs),
_builderPages(this.currentTabIndex, this.widget.pages),
],
);
}
Widget _builderPages(int currentIndex, List<Widget> pages) {
int localIndex = 0;
return Column(
children: pages.map<Widget>((e) {
if (localIndex == currentIndex) {
localIndex++;
return e;
}
localIndex++;
return Container();
}).toList(),
);
}
Widget _builderTabs(List<Tab> tabs) {
double width = MediaQuery.of(context).size.width;
return Container(
width: width,
decoration: BoxDecoration(color: CustomColors.primary),
child: Center(
child: TabBar(
controller: tabController,
indicatorWeight: 4,
labelColor: Colors.white,
unselectedLabelColor: Colors.white30,
indicatorColor: CustomColors.secondary,
isScrollable: true,
tabs: tabs,
),
),
);
}
}