本文介绍了隐藏向下滚动的底部导航栏,反之亦然的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在正文和底部导航栏中都有一个列表。我想在帖子列表向下滚动时用向下滑动的动画隐藏底部导航栏,而在向上滚动时通过向上滑动的动画可见。
I have a list in the body and bottom navigation bar. I want to hide bottom navigation bar with a slide down animation when the posts list is scrolled down and visible with a slide up animation when scrolled up. How to do it?
推荐答案
这是代码。
void main() => runApp(MaterialApp(home: Scaffold(body: MyApp())));
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
ScrollController _scrollController;
double _containerMaxHeight = 56, _offset, _delta = 0, _oldOffset = 0;
@override
void initState() {
super.initState();
_offset = 0;
_scrollController = ScrollController()
..addListener(() {
setState(() {
double offset = _scrollController.offset;
_delta += (offset - _oldOffset);
if (_delta > _containerMaxHeight)
_delta = _containerMaxHeight;
else if (_delta < 0) _delta = 0;
_oldOffset = offset;
_offset = -_delta;
});
});
}
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
return Stack(
alignment: Alignment.bottomCenter,
children: <Widget>[
ListView.builder(
physics: ClampingScrollPhysics(),
controller: _scrollController,
itemCount: 20,
itemBuilder: (context, index) => ListTile(title: Text(index.toString())),
),
Positioned(
bottom: _offset,
width: constraints.maxWidth,
child: Container(
width: double.infinity,
height: _containerMaxHeight,
color: Colors.grey[300],
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
_buildItem(Icons.home, "Home"),
_buildItem(Icons.blur_circular, "Collection"),
_buildItem(Icons.supervised_user_circle, "Community"),
_buildItem(Icons.notifications, "Notifications"),
],
),
),
),
],
);
},
);
}
Widget _buildItem(IconData icon, String title) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(icon, size: 28),
Text(title, style: TextStyle(fontSize: 10)),
],
);
}
}
注意:我尝试过 bottomNavigationBar
,但是事情没有按预期进行,因此我创建了自己的底部导航栏,您可以进一步修改代码以供使用。
Note: I tried bottomNavigationBar
but things were not working as expected so I created kind of my own bottom navigation bar and you can modify the code further for your use.
这篇关于隐藏向下滚动的底部导航栏,反之亦然的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!