考虑此图片。如您所见,它具有一个应用程序栏,而该应用程序栏具有“选项卡式”按钮。 我正在尝试对应用栏进行动画处理,以使其在向上滚动时隐藏,并且仅显示“选项卡按钮”,而在向上滚动时不显示应用栏。请帮帮我。对不起英语不好,不是美国人,我也不是英语
答案 0 :(得分:18)
如果我对您的理解正确,以下代码应可使应用程序栏在滚动时隐藏,而TabBar仍可见:
new Scaffold(
body: new NestedScrollView(
controller: _scrollViewController,
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
new SliverAppBar(
title: new Text(widget.title),
pinned: true,
floating: true,
forceElevated: innerBoxIsScrolled,
bottom: new TabBar(
tabs: <Tab>[
new Tab(text: "STATISTICS"),
new Tab(text: "HISTORY"),
],
controller: _tabController,
),
),
];
},
body: new TabBarView(
children: <Widget>[
new StatisticsPage(),
new HistoryPage(),
],
controller: _tabController,
),
),
);
示例来自this post。
答案 1 :(得分:4)
通过将 SliverAppbar 与 NestedScrollView 结合使用,我能够使带有标签栏的浮动应用栏类似于 WhatsApp 的浮动应用栏。
在 NestedScrollView 中添加 floatHeaderSlivers: true 和
固定:真,浮动:真,在 SliverAppBar 中
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)],
);
},
),
);
}
}
答案 2 :(得分:3)
答案 3 :(得分:2)
我建议您必须通过SliverAppBar和SliverList才能实现布局。 以下代码可以帮助您理解这一点。
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
home: new MyHomePage(),
debugShowCheckedModeBanner: false,
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
List buildTextViews(int count) {
List<Widget> strings = List();
for (int i = 0; i < count; i++) {
strings.add(new Padding(padding: new EdgeInsets.all(16.0),
child: new Text("Item number " + i.toString(),
style: new TextStyle(fontSize: 20.0))));
}
return strings;
}
return Scaffold(
body: new CustomScrollView(slivers: <Widget>[
const SliverAppBar(
title: const Text('Sliver App Bar'),
),
new SliverList(
delegate: new SliverChildListDelegate(buildTextViews(50)))
])
);
}
}
答案 4 :(得分:1)
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
bool _showAppbar = true;
ScrollController _scrollBottomBarController = new ScrollController();
bool isScrollingDown = false;
bool _show = true;
double bottomBarHeight = 75;
double _bottomBarOffset = 0;
@override
void initState() {
super.initState();
myScroll();
}
@override
void dispose() {
super.dispose();
_scrollBottomBarController.removeListener(() {});
super.dispose();
}
void showBottomBar() {
setState(() {
_show = true;
});
}
void hideBottomBar() {
setState(() {
_show = false;
});
}
void myScroll() async {
_scrollBottomBarController.addListener(() {
if (_scrollBottomBarController.position.userScrollDirection ==
ScrollDirection.reverse) {
if (!isScrollingDown) {
isScrollingDown = true;
_showAppbar = false;
hideBottomBar();
}
}
if (_scrollBottomBarController.position.userScrollDirection ==
ScrollDirection.forward) {
if (isScrollingDown) {
isScrollingDown = false;
_showAppbar = true;
showBottomBar();
}
}
});
}
Widget containterContent(){
return Container(
height: 50.0,
color: Colors.cyanAccent,
margin: EdgeInsets.all(8.0),
width: MediaQuery.of(context).size.width - 100,
child: Center(child: Text('Item 1',
style: TextStyle(
fontSize: 14.0,
),)),
);
}
Widget body() {
return ListView(
controller: _scrollBottomBarController,
children: <Widget>[
containterContent(),
containterContent(),
containterContent(),
containterContent(),
containterContent(),
containterContent(),
containterContent(),
containterContent(),
containterContent(),
containterContent(),
],
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: _showAppbar
? AppBar(
title: Text('My Tasks'),
)
: PreferredSize(
child: Container(),
preferredSize: Size(0.0, 0.0),
),
bottomNavigationBar: Container(
height: bottomBarHeight,
width: MediaQuery.of(context).size.width,
child: _show
?BottomNavigationBar(
currentIndex: 0, // this will be set when a new tab is tapped
items: [
BottomNavigationBarItem(
icon: new Icon(Icons.home),
title: new Text('Home'),
),
BottomNavigationBarItem(
icon: new Icon(Icons.mail),
title: new Text('Messages'),
),
BottomNavigationBarItem(
icon: Icon(Icons.person), title: Text('Profile'))
],
)
: Container(
color: Colors.white,
width: MediaQuery.of(context).size.width,
),
),
body: body(
),
);
}
}
答案 5 :(得分:1)
截图:
代码:
正如我提到的 here,您可以像这样使用 NestedScrollView
:
@override
Widget build(BuildContext context) {
return Scaffold(
body: DefaultTabController(
length: 2,
child: NestedScrollView(
headerSliverBuilder: (context, value) {
return [
SliverAppBar(
title: Text('AppBar'),
pinned: true,
floating: true,
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.call), text: 'Call'),
Tab(icon: Icon(Icons.message), text: 'Message'),
],
),
),
];
},
body: TabBarView(
children: [
FlutterLogo(),
FlutterLogo(),
],
),
),
),
);
}