我在使用应用栏动画时遇到问题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())
])));
}
我现在得到的结果:Image 1 https://i.stack.imgur.com/WHIpH.gif
我给出后得到的结果true
to the snap
范围:Image 2 https://i.stack.imgur.com/QVjfH.gif
许多应用程序(例如 WhatsApp、Facebook、LinkedIn...)都有这个动画应用栏。为了更多地解释我对这个动画应用栏的期望,我添加了一个 Google Play 商店的示例,显示了想要的动画:Play 商店示例 https://i.stack.imgur.com/wwCTL.gif