flutter - SliverHeader 行为管理
问题描述
我的颤振应用程序有NestedScrollView
一个headerSliverBuilder
.
我SliverAppBar
在这个builder里面是这样的:
SliverAppBar(
elevation: 0,
snap: true,
pinned: false,
floating: true,
forceElevated: false,
primary: false,
automaticallyImplyLeading: false,
backgroundColor: Colors.white,
expandedHeight: 65.0 + 75,
flexibleSpace: Container(
child: Column(children: <Widget>[
MyTabBar(true, 65, () {}, () {}),
Container(height: 75, color: Colors.orange)
]),
decoration: BoxDecoration(boxShadow: [
BoxShadow(
color: Colors.black26,
blurRadius: 4.0,
spreadRadius: .0,
),
], color: Colors.white),
)
)
现在,滚动时的行为有点奇怪。我希望它可以滚动整个 SliverAppBar,包括flexibleSpace
. 但这就是发生的事情:
它在我的标题的橙色部分下方滚动,然后滚动到上面的选项卡部分。选项卡部分消失的那一刻,橙色部分也消失了。呵呵..
当我从向下滚动中恢复条形时也是如此。然后橙色部分就在原地出现,顶部滑入。我想让它全部滑入。
自上次颤振更新以来,我的整个行为都发生了变化。
有谁知道我需要做些什么来实现我的预期行为?
这是我这个简单示例的完整代码:https ://github.com/nietsmmar/SliverHeaderTest/tree/master/flutter_app
解决方案
AnimatedContainer
在小部件内部使用怎么样Stack
?
像这样的东西...
import 'package:flutter/material.dart';
import 'package:vector_math/vector_math_64.dart' hide Colors;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final ScrollController scrollController = ScrollController();
return MaterialApp(
theme: ThemeData(
primaryColor: Colors.blue,
),
home: Scaffold(
body: Stack(
children: <Widget>[
SafeArea(
child: ListView(
controller: scrollController,
padding: const EdgeInsets.only(top: 100),
children: List.generate(
100,
(index) => ListTile(
title: Text('This is item #$index'),
),
),
),
),
AnimatedAppBar(
scrollController: scrollController,
child: PreferredSize(
preferredSize: Size.fromHeight(100),
child: const Center(child: Text('APP BAR')),
),
),
],
),
),
);
}
}
class AnimatedAppBar extends StatefulWidget {
AnimatedAppBar({
required this.scrollController,
this.child,
this.toolbarHeight,
});
final ScrollController scrollController;
final PreferredSize? child;
final double? toolbarHeight;
@override
_AnimatedAppBarState createState() => _AnimatedAppBarState();
}
class _AnimatedAppBarState extends State<AnimatedAppBar> {
late double _totalHeight;
late double _lastPosition;
late bool _isShown;
@override
void initState() {
super.initState();
_totalHeight = widget.toolbarHeight ??
kToolbarHeight + (widget.child?.preferredSize.height ?? 0.0);
_lastPosition = widget.scrollController.offset;
_isShown = true;
widget.scrollController.addListener(_scrollListener);
}
void _scrollListener() {
if (_isShown && _lastPosition < widget.scrollController.offset) {
setState(() => _isShown = false);
} else if (!_isShown && _lastPosition > widget.scrollController.offset) {
setState(() => _isShown = true);
}
_lastPosition = widget.scrollController.offset;
}
@override
Widget build(BuildContext context) {
return AnimatedContainer(
width: double.infinity,
height: _totalHeight,
padding: EdgeInsets.only(top: kToolbarHeight),
duration: const Duration(milliseconds: 250),
curve: Curves.easeIn,
transform: Matrix4.translation(
Vector3(0, _isShown ? 0 : -_totalHeight, 0),
),
color: Theme.of(context).primaryColor,
child: widget.child,
);
}
@override
void dispose() {
widget.scrollController.removeListener(_scrollListener);
super.dispose();
}
}
推荐阅读
- r - 如何跨两种不同类型的geom ggplot2创建图例
- django - django 测试是否有一个类似于 setUp() 的 breakDown(),它在所有测试完成后运行?
- json - Golang解析成struct
- r - 使用 ggplot2 创建甘特图:scale_x_date 函数能否将日期显示为季度(例如 Q4 2020)?
- php - 如何在php中将文本放在两个单词的中间
- rust - 如何调用作为字段的`dyn Fn`?
- python - Python:readline 和 readlines 之间的性能
- php - PHP strlen() 和 if 语句无法正常工作
- github - 如何在不暴露代码的情况下与 Github 共享 Discord.py 代码,同时仍然让你的机器人在 Heroku 上运行
- python - Valueerror: 无法将输入数组从形状 (2,2) 广播到形状 (2)