我有Tabbarview,它需要修复垂直边界(因为它没有取无穷大)。那我怎么给动态高度呢?
请注意:标签栏包含扩展图块列表
我尝试给出固定高度,但这给了我溢出的空间。
class FaqScreen extends StatefulWidget {
@override
State<StatefulWidget> createState() => FaqScreenState();
}
class FaqScreenState extends BaseState<FaqScreen>
with SingleTickerProviderStateMixin {
TabController _controller;
List<FaqCategory> faqCategories;
int _index;
@override
void initState() {
super.initState();
faqCategories = DependencyInjector().dependency.getFaq();
_controller = TabController(length: faqCategories.length, vsync: this);
_controller.addListener(_setItemIndex);
_index = 0;
}
void _setItemIndex() {
setState(() {
_index = _controller.index;
});
}
@override
Widget implementBuild(BuildContext context) {
return AuthScreensWrapper(
headlineText: "Frequently \nasked question",
screenHeading: "Search your question",
suffixIconPath: "$iconAssetsBasePath/ic_blue_search.svg",
children: <Widget>[
Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.only(
top: screenUtil.setHeight(20.0),
left: screenUtil.setWidth(15.0),
),
child: _tabBar(),
),
_tabBarView(),
],
),
],
);
}
Widget _tabBar() {
return TabBar(
controller: _controller,
isScrollable: true,
labelPadding: EdgeInsets.symmetric(
horizontal: screenUtil.setWidth(8.0),
),
indicator: UnderlineTabIndicator(
borderSide: BorderSide(width: 0.0, color: AppColors.whiteColor),
),
tabs: <Widget>[
for (int i = 0; i < faqCategories.length; i++) _buildTab(i),
]);
}
Widget _buildTab(int i) {
if (i == _index)
return Container(
height: screenUtil.setHeight(40.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25.0),
color: AppColors.accentColor,
//border: Border.all(color: AppColors.blueColor),
),
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: screenUtil.setWidth(10.0),
),
child: Center(
child: Text(
faqCategories[i].categoryName,
style: AppTextStyle.categoryWhiteTextStyle(screenUtil),
),
),
),
);
else
return Container(
height: screenUtil.setHeight(40.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25.0),
color: AppColors.whiteColor,
border: Border.all(color: AppColors.blueColor),
),
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: screenUtil.setWidth(10.0),
),
child: Center(
child: Text(
faqCategories[i].categoryName,
style: AppTextStyle.categoryBlackTextStyle(screenUtil),
),
),
),
);
}
Widget _tabBarView() {
return Container(
height: MediaQuery.of(context).size.height,
child: Padding(
padding: EdgeInsets.only(
top: screenUtil.setHeight(10.0),
left: screenUtil.setWidth(25.0),
right: screenUtil.setWidth(25.0),
),
child: TabBarView(
controller: _controller,
children: faqCategories
.map(
(faqCategory) => _buildTabView(faqCategory),
)
.toList(),
),
)
);
}
Widget _buildTabView(FaqCategory faqCategory) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.only(`enter code here`
top: screenUtil.setHeight(15.0),
bottom: screenUtil.setHeight(15.0),
),
child: Text(
faqCategory.categoryTitle,
style: AppTextStyle.descriptionTextStyle(screenUtil),
),
),
MediaQuery.removePadding(
context: context,
removeTop: true,
child: ListView.builder(
shrinkWrap: true,
physics: ClampingScrollPhysics(),
itemCount: faqCategory.questions.length,
itemBuilder: (BuildContext context, int index) {
return _buildFaq(faqCategory.questions[index]);
},
),
)
],
);
}
Widget _buildFaq(Question faq) {
return ListTileTheme(
contentPadding: EdgeInsets.symmetric(horizontal: 0.0),
child: ExpansionTile(
title: Text(
faq.question,
style: AppTextStyle.questionTextStyle(screenUtil),
),
trailing: SvgIcon.getSvgIcon(
"$iconAssetsBasePath/ic_down_blue_arrow.svg",
screenUtil,
12.0,
12.0),
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Text(
faq.answer,
style: AppTextStyle.answerTextStyle(screenUtil),
),
),
],
),
);
}
}
I/flutter (31165): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (31165): The following assertion was thrown during layout:
I/flutter (31165): A RenderFlex overflowed by 11 pixels on the bottom.
I/flutter (31165): </br>
I/flutter (31165): The overflowing RenderFlex has an orientation of Axis.vertical.</br>
I/flutter (31165): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and</br>
I/flutter (31165): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.</br>
I/flutter (31165): Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the</br>
I/flutter (31165): RenderFlex to fit within the available space instead of being sized to their natural size.</br>
I/flutter (31165): This is considered an error condition because it indicates that there is content that cannot be</br>
I/flutter (31165): seen. If the content is legitimately bigger than the available space, consider clipping it with a</br>
I/flutter (31165): ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
I/flutter (31165): like a ListView.
I/flutter (31165): The specific RenderFlex in question is: RenderFlex#6616d OVERFLOWING:
I/flutter (31165): needs compositing
I/flutter (31165): creator: Column ← KeyedSubtree-[<0>] ← RepaintBoundary ← IndexedSemantics ←
I/flutter (31165): NotificationListener<KeepAliveNotification> ← KeepAlive ← AutomaticKeepAlive ← KeyedSubtree-[Key
I/flutter (31165): <[<0>]>] ← SliverFillViewport ← Viewport ← IgnorePointer-[GlobalKey#d8ead] ← Semantics ← ⋯
I/flutter (31165): parentData: <none> (can use size)
I/flutter (31165): constraints: BoxConstraints(w=414.0, h=928.7)
I/flutter (31165): size: Size(414.0, 928.7)
I/flutter (31165): direction: vertical
I/flutter (31165): mainAxisAlignment: start
I/flutter (31165): mainAxisSize: max
I/flutter (31165): crossAxisAlignment: start
I/flutter (31165): textDirection: ltr
I/flutter (31165): verticalDirection: down
I/flutter (31165): ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
I/flutter (31165): ════════════════════════════════════════════════════════════════════════════════════════════════════
I/flutter (31165): Another exception was thrown: A RenderFlex overflowed by 32 pixels on the bottom.