我们可以在SliverAppBar中添加TabBar吗?
由于SliverAppBar具有bottom
属性,我认为我们可以在SliverAppBar中添加Tabbar,但是问题是TabBar需要DefaultTabbarController和DefaultTabbarController仅在Material Widget中工作,而SliverAppbar仅在Scaffold Body中工作,而在我的appbar中不工作,但我需要在脚手架上安装TabView。有什么解释?
答案 0 :(得分:5)
是的,您可以使用 NestedScrollView 在 SliverAppBar 中添加 Tabbar。您还可以自定义类似于 whatsapp 的应用栏,即浮动应用栏。为此,请务必在 NestedScrollView 中添加 floatHeaderSlivers: true。 Link to working code
import 'dart:math';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: CustomSliverAppbar(),
);
}
}
class CustomSliverAppbar extends StatefulWidget {
@override
_CustomSliverAppbarState createState() => _CustomSliverAppbarState();
}
class _CustomSliverAppbarState extends State<CustomSliverAppbar>
with SingleTickerProviderStateMixin {
TabController _tabController;
@override
void initState() {
_tabController = TabController(
initialIndex: 0,
length: 2,
vsync: this,
);
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
floatHeaderSlivers: true,
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
title: Text(
"WhatsApp type sliver appbar",
),
centerTitle: true,
pinned: true,
floating: true,
bottom: TabBar(
indicatorColor: Colors.black,
labelPadding: const EdgeInsets.only(
bottom: 16,
),
controller: _tabController,
tabs: [
Text("TAB A"),
Text("TAB B"),
]),
),
];
},
body: TabBarView(
controller: _tabController,
children: [
TabA(),
const Center(
child: Text('Display Tab 2',
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
),
],
),
),
);
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
}
class TabA extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scrollbar(
child: ListView.separated(
separatorBuilder: (context, child) => Divider(
height: 1,
),
padding: EdgeInsets.all(0.0),
itemCount: 30,
itemBuilder: (context, i) {
return Container(
height: 100,
width: double.infinity,
color: Colors.primaries[Random().nextInt(Colors.primaries.length)],
);
},
),
);
}
}
答案 1 :(得分:2)
您可以用SilverAppBar
包装TabBar
(底部为SilverFillRemaining
)和TabBarView
(包装CustomScrollView
)。然后将CustomScrollView
设置为Scaffold
的正文。为此,您需要创建一个TabController
。
完整示例在这里:
import 'package:flutter/material.dart';
class SilverAppBarWithTabBarScreen extends StatefulWidget {
@override
_SilverAppBarWithTabBarState createState() => _SilverAppBarWithTabBarState();
}
class _SilverAppBarWithTabBarState extends State<SilverAppBarWithTabBarScreen>
with SingleTickerProviderStateMixin {
TabController controller;
@override
void initState() {
super.initState();
controller = new TabController(length: 3, vsync: this);
}
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new CustomScrollView(
slivers: <Widget>[
new SliverAppBar(
title: Text("Silver AppBar With ToolBar"),
pinned: true,
expandedHeight: 160.0,
bottom: new TabBar(
tabs: [
new Tab(text: 'Tab 1'),
new Tab(text: 'Tab 2'),
new Tab(text: 'Tab 3'),
],
controller: controller,
),
),
new SliverFillRemaining(
child: TabBarView(
controller: controller,
children: <Widget>[
Text("Tab 1"),
Text("Tab 2"),
Text("Tab 3"),
],
),
),
],
),
);
}
}
答案 2 :(得分:1)
我能够实现您的要求。但是我只有一个问题,即,当我在TabView中添加滚动小部件时,它不会产生所需的结果。
我已经打开an issue on GitHub。
这是我的代码:
class HomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() => HomePageState();
}
class HomePageState extends State<HomePage>
with SingleTickerProviderStateMixin {
TabController tabController;
@override
void initState() {
super.initState();
tabController = TabController(length: 2, vsync: this);
}
@override
Widget build(BuildContext context) {
Color tabColor = Theme.of(context).primaryColorDark;
TextStyle tabStyle = TextStyle(color: tabColor);
return SafeArea(
child: Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
title: Text("AppBar"),
floating: true,
primary: true,
pinned: false,
),
SliverFillRemaining(
child: Scaffold(
appBar: TabBar(
controller: tabController,
tabs: <Widget>[
Tab(
child: Text(
'Tab1',
style: tabStyle,
),
),
Tab(
child: Text(
'Tab2',
style: tabStyle,
),
),
],
),
body: TabBarView(
controller: tabController,
children: <Widget>[
Scaffold(
body: Text('Tab One'),
),
Scaffold(
body: Text('Tab Two'),
),
],
),
),
),
],
),
),
);
}
}