animation - Flutter:检测到滚动时隐藏和显示应用栏
问题描述
我在应用程序栏动画中遇到问题,我正在使用SilverAppBar
, 在我的应用程序中。所以,问题是当我在我的列表中间并且我向上滚动时,应用栏没有出现,但它只是在滚动到项目列表的顶部时出现。我已经测试了snap
参数并给出了它true
,但不是我期望的结果。我有关于为此创建自定义动画的想法,但我在 Flutter 方面并没有太多经验,而且如果有一种方法可以添加参数,或者其他适合我情况的小部件,那就太好了。
我正在使用的演示的实际代码:
Widget _search() => Container(
color: Colors.grey[400],
child: SafeArea(
child: Container(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
enabled: false,
style: TextStyle(fontSize: 16, color: Colors.white),
decoration: InputDecoration(
prefix: SizedBox(width: 12),
hintText: "Search",
contentPadding:
EdgeInsets.symmetric(horizontal: 32.0, vertical: 14.0),
border: InputBorder.none,
),
),
),
)),
);
Container _buildBody() {
return Container(
child: new GridView.count(
crossAxisCount: 2,
children: List.generate(100, (index) {
return Center(
child: Text(
'Item $index',
style: Theme.of(context).textTheme.headline,
),
);
}),
));
}
@override
Widget build(BuildContext context) {
return new Scaffold(
resizeToAvoidBottomPadding: false,
body: new NestedScrollView(
headerSliverBuilder:
(BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
new SliverAppBar(
title: Text("Demo",
style: TextStyle(
color: Colors.white,
)),
pinned: false,
floating: true,
forceElevated: innerBoxIsScrolled,
),
];
},
body: new Column(children: <Widget>[
_search(),
new Expanded(child: _buildBody())
])));
}
我现在得到的结果: 图 1
true
给参数后得到的结果snap
:
图2
WhatsApp、Facebook、LinkedIn 等大量应用程序都有这个动画应用程序栏。为了更详细地解释我对这个动画应用栏的期望,我添加了一个 Google Play Store 示例,显示了想要的动画:Play Store example
解决方案
我在使用刷新指示器时遇到了 CustomScrollView 和 SliverAppbar 的类似问题,我最终创建了自己的自定义应用程序栏。
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
class HomeView extends StatefulWidget {
@override
HomeState createState() => HomeState();
}
class HomeState extends State<HomeView> with SingleTickerProviderStateMixin {
bool _isAppbar = true;
ScrollController _scrollController = new ScrollController();
@override
void initState() {
super.initState();
_scrollController.addListener(() {
if (_scrollController.position.userScrollDirection ==
ScrollDirection.reverse) {
appBarStatus(false);
}
if (_scrollController.position.userScrollDirection ==
ScrollDirection.forward) {
appBarStatus(true);
}
});
}
void appBarStatus(bool status) {
setState(() {
_isAppbar = status;
});
}
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(kToolbarHeight),
child: AnimatedContainer(
height: _isAppbar ? 55.0 : 0.0,
duration: Duration(milliseconds: 200),
child: CustomAppBar(),
),
),
body: ListView.builder(
controller: _scrollController,
itemCount: 20,
itemBuilder: (BuildContext context, int index) {
return container();
},
),
),
);
}
}
Widget container() {
return Container(
height: 80.0,
color: Colors.pink,
margin: EdgeInsets.all(8.0),
width: 100,
child: Center(
child: Text(
'Container',
style: TextStyle(
fontSize: 18.0,
),
)),
);
}
class CustomAppBar extends StatefulWidget {
@override
AppBarView createState() => new AppBarView();
}
class AppBarView extends State<CustomAppBar> {
@override
Widget build(BuildContext context) {
return AppBar(
backgroundColor: Colors.white,
leading: InkWell(
onTap: () => {},
child: new Padding(
padding: const EdgeInsets.all(8.0),
child: CircleAvatar(
backgroundColor: Colors.white,
child: ClipOval(
child: Image.network(
'https://images.squarespace-cdn.com/content/5aee389b3c3a531e6245ae76/1530965251082-9L40PL9QH6PATNQ93LUK/linkedinPortraits_DwayneBrown08.jpg?format=1000w&content-type=image%2Fjpeg'),
),
),
),
),
actions: <Widget>[
IconButton(
alignment: Alignment.centerLeft,
icon: Icon(
Icons.search,
color: Colors.black,
),
onPressed: () {},
),
],
title: Container(
alignment: Alignment.centerLeft,
child: Text("Custom Appbar", style: TextStyle(color: Colors.black),)
),
);
}
}
推荐阅读
- javascript - NW.js 全屏模式其实是无边框窗口化,不是真正的全屏
- ruby - 删除 Ruby 中的重复条目
- java - Check for duplication of number in ArrayList - Java
- mysql - 根据 mySQL 中的不同 id 查找时差
- haskell - 函数组合(Haskell 语言)
- c++ - 如何反转整数参数包?
- python - 下采样后的 f1 或准确度评分 - 分类,支持向量机 - Python
- r - 用点替换单个框并更改R中多个箱线图上的框的顺序
- uml - 如何在 UML 活动图中表示 3 个选项?
- sed - sed 命令查找所有单词都以大写字母开头的行