Tabbarview дочерние элементы, прокручивающие вкладки сверху
Это код, который включает постоянную полосу приложения.
class _HomeScreenState extends State<HomeScreen> with TickerProviderStateMixin{
final List<String> tabs = [
StringConstants.tabFood,
StringConstants.tabDrinks
];
TabController _tabController;
@override
void initState() {
_tabController = TabController(length: tabs.length, vsync: this);
super.initState();
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: colorWhite,
body: DefaultTabController(
length: 2,
child: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
elevation: 1,
title: Text("text"),
backgroundColor: colorWhite,
iconTheme: IconThemeData(color: colorDarkGray),
actionsIconTheme: IconThemeData(color: colorDarkGray),
leading: RoundIconButton(
icon: Icons.arrow_back_sharp,
onPressed: () {
Navigator.pop(context);
}),
actions: [
RoundIconButton(icon: Icons.search, onPressed: () {}),
],
expandedHeight: 160.0,
collapsedHeight: 60,
floating: true,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
background: Container(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text(
"text",
style: textStyleTitle,
),
Text(
"subtext",
style: textStyleSubTitle,
)
],
),
),
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage("https://cdn.pixabay.com/photo/2017/08/02/14/26/winter-landscape-2571788_1280.jpg"),
fit: BoxFit.cover,
),
),
),
),
),
SliverPersistentHeader(
pinned: true,
delegate: _SliverAppBarDelegate(
TabBar(
controller: _tabController,
indicatorColor: colorPrimary,
labelStyle: TextStyle(
fontFamily: "JosefinSans",
fontSize: 16,
fontWeight: FontWeight.bold),
labelColor: colorPrimary,
unselectedLabelColor: colorLightGray,
isScrollable: true,
tabs: [
for (final tab in tabs)
Tab(
text: tab,
),
],
),
),
),
];
},
body: TabBarView(
controller: _tabController,
children: [
for (final tab in tabs)
Expanded(child: Container(
color: Colors.blue,
)),
],
),
),
),
);
}
}
class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
_SliverAppBarDelegate(this._tabBar);
final TabBar _tabBar;
@override
double get minExtent => _tabBar.preferredSize.height;
@override
double get maxExtent => _tabBar.preferredSize.height;
@override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
return Padding(
padding: const EdgeInsets.only(left: 20, right: 20),
child: new Container(
child: _tabBar,
),
);
}
Содержимое контейнера (в панели вкладок) прокручивается поверх вкладок. Я ищу, чтобы он прокручивался за вкладками. Я хочу, чтобы вкладки оставались постоянными под панелью приложений, которая работает нормально. Но единственная проблема заключается в том, что содержимое панели вкладок прокручивается поверх вкладок. фон вкладок становится прозрачным, как только начинается прокрутка