我的标签栏和卡片小部件中有两个标签,它们组成了两个标签栏视图。在这种情况下,我正在使用Slivers.CustomScrollView是我的父窗口小部件。我在这些视图中显示文本,但它们要从底部移开多余的空白空间,如果这些小部件放置在tabbarview之外,则它们可以正常工作并根据其内容调整高度。 tabbarview,如您所见,它工作正常。
这是我的代码:
import 'package:flutter/material.dart';
class TabviewIssue extends StatefulWidget {
@override
_TabviewIssueState createState() => _TabviewIssueState();
}
class _TabviewIssueState extends State<TabviewIssue>with TickerProviderStateMixin {
TabController _tabController;
@override
void initState() {
super.initState();
this._tabController = TabController(length: 2, vsync: this);
}
String htmlText = 'So vitamins and nutrients are optimally preserved, flavors unfold particularly well. In order to keep the cat food fresh, a special flavor protection foil in the packaging ensures that the oxygen content in the pack is reduced, oxidation is inhibited and the flavors in the cat food are preserved. True love Landlust cat food has exactly the energy content that your cat needs. It provides optimal nutrients and is very digestible. Cat food from True Love is healthy food that tastes cats.';
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverToBoxAdapter(child: SizedBox(height: 50,)),
SliverToBoxAdapter(
child: Container(
color: Colors.grey.shade100,
child: Padding(
padding: const EdgeInsets.all(10.0),
child: TabBar(
indicator: BoxDecoration(color: Colors.grey.shade400),
labelColor: Colors.white,
unselectedLabelColor: Colors.black,
indicatorColor: Colors.grey,
tabs: <Widget>[
Tab(
child: Text("Product Features",
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.w500))),
Tab(
child: Text("Reviews",
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.w500))),
],
controller: this._tabController,
),
)),
),
SliverFillRemaining(
child: TabBarView(
controller: _tabController,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
color: Colors.grey.shade200,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(children: <Widget>[
Text("Features",
style: TextStyle(
fontSize: 17, fontWeight: FontWeight.bold)),
Text( htmlText),
]),
)),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
color: Colors.grey.shade200,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(children: <Widget>[
Text("Features",
style: TextStyle(
fontSize: 17, fontWeight: FontWeight.bold)),
Text( htmlText),
]),
)),
),
]),
),
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
color: Colors.grey.shade200,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(children: <Widget>[
Text("Features",
style: TextStyle(
fontSize: 17, fontWeight: FontWeight.bold)),
Text( htmlText),
]),
)),
),
)
],
),
),
);
}
}
class TabviewIssue extends StatefulWidget {
@override
_TabviewIssueState createState() => _TabviewIssueState();
}
class _TabviewIssueState extends State<TabviewIssue>
with TickerProviderStateMixin {
TabController _tabController;
@override
void initState() {
super.initState();
this._tabController = TabController(length: 2, vsync: this);
}
String htmlText =
'So vitamins and nutrients are optimally preserved, flavors unfold particularly well. In order to keep the cat food fresh, a special flavor protection foil in the packaging ensures that the oxygen content in the pack is reduced, oxidation is inhibited and the flavors in the cat food are preserved. True love Landlust cat food has exactly the energy content that your cat needs. It provides optimal nutrients and is very digestible. Cat food from True Love is healthy food that tastes cats.';
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverToBoxAdapter(
child: SizedBox(
height: 50,
)),
SliverToBoxAdapter(
child: Container(
color: Colors.grey.shade100,
child: Padding(
padding: const EdgeInsets.all(10.0),
child: TabBar(
indicator: BoxDecoration(color: Colors.grey.shade400),
labelColor: Colors.white,
unselectedLabelColor: Colors.black,
indicatorColor: Colors.grey,
tabs: <Widget>[
Tab(
child: Text("Product Features",
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.w500))),
Tab(
child: Text("Reviews",
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.w500))),
],
controller: this._tabController,
),
)),
),
SliverFillRemaining(
child: TabBarView(controller: _tabController, children: <Widget>[
//TAB 1
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
ListView(
shrinkWrap: true,
children: <Widget>[
Card(
color: Colors.grey.shade200,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(children: <Widget>[
Text("Features",
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.bold)),
Text(htmlText),
]),
)),
Card(
color: Colors.grey.shade200,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(children: <Widget>[
Text("Features",
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.bold)),
Text(htmlText + htmlText),
]),
)),
],
),
Expanded(
child: Container(
child: Text('All remaining space'),
color: Colors.red,
),
)
],
),
//TAB 2
ListView(
children: <Widget>[
Card(
color: Colors.grey.shade200,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(children: <Widget>[
Text("Features",
style: TextStyle(
fontSize: 17, fontWeight: FontWeight.bold)),
Text(htmlText),
]),
)),
Card(
color: Colors.grey.shade200,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(children: <Widget>[
Text("Features",
style: TextStyle(
fontSize: 17, fontWeight: FontWeight.bold)),
Text(htmlText + htmlText),
]),
)),
],
),
]),
),
],
),
),
);
}
}