如何解决将控制器添加到嵌套在 NestedScrollView 中的 ListView 时,Floating SliverAppBar 无法正确响应
如 gif 所示,Sliver 并不总是正确地从 BB 和 CC 选项卡消失/出现。
条子的代码是:
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: DefaultTabController(
length: 3,child: nestedScrollView(
floatHeaderSlivers: true,body: TabBarView(children: [
AA(),BB(),CC(),]),headerSliverBuilder:
(BuildContext context,bool innerBoxIsScrolled) {
return [
SliverAppBar(
floating: true,pinned: false,//snap: true,leading: IconButton(
icon: Icon(Icons.settings),onpressed: () {},),title: Text('SLIVER HEADER'),elevation: 0.0,SliverAppBar(
toolbarHeight: 0.0,primary: false,pinned: true,bottom: TabBar(
tabs: [
Tab(
text: 'AA',Tab(
text: 'BB',Tab(
text: 'CC',],)
];
},);
}
}
BB和CC的代码是
class BB extends StatefulWidget {
@override
_BBState createState() => _BBState();
}
class _BBState extends State<BB> with AutomaticKeepAliveClientMixin<BB> {
final HideNavbar hiding = HideNavbar();
@override
Widget build(BuildContext context) {
super.build(context);
return Stack(
alignment: Alignment.bottomright,children: [
ListView.builder(
controller: hiding.controller,itemBuilder: (context,index) => Padding(
padding: const EdgeInsets.all(8.0),child: Card(
child: Padding(
padding: const EdgeInsets.all(8.0),child: Text('$index'),)),ValueListenableBuilder(
valueListenable: hiding.visible,builder: (BuildContext context,value,Widget child) => Padding(
padding: const EdgeInsets.only(bottom: 60.0),child: Material(
elevation: 2.0,borderRadius: BorderRadius.circular(30),color: Colors.blue,child: InkWell(
splashColor: Colors.white.withOpacity(0.4),customBorder: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),onTap: () {},child: AnimatedContainer(
duration: Duration(milliseconds: 300),height: 50,width: value ? 50 : 120,decoration:
Boxdecoration(borderRadius: BorderRadius.circular(30)),child: value
? Center(child: Icon(Icons.add,color: Colors.white))
: Center(
child: Text(
'Create BBBB',overflow: TextOverflow.fade,maxLines: 1,style:
TextStyle(color: Colors.white,fontSize: 16.0),))),);
}
@override
// Todo: implement wantKeepAlive
bool get wantKeepAlive => true;
}
隐藏浮动操作按钮的代码是:
class HideNavbar {
final ScrollController controller = ScrollController();
final ValueNotifier<bool> visible = ValueNotifier<bool>(true);
HideNavbar() {
visible.value = false;
controller.addListener(
() {
if (controller.position.userScrollDirection ==
ScrollDirection.reverse) {
if (controller.offset > 100) {
if (!visible.value) {
visible.value = true;
}
}
}
if (controller.position.userScrollDirection ==
ScrollDirection.forward) {
if (controller.offset < 500) {
if (visible.value) {
visible.value = false;
}
}
}
},);
}
void dispose() {
controller.dispose();
visible.dispose();
}
}
根据我可以确定,当不使用 HideNavBar 类并消除滚动时对 FAB 的影响时,一切正常。
如果我将 hidden.controller 用于 nestedScrollView 而不是 BB 和 CC 类,则 Sliver 可以正常工作。 但问题是——如果我只滚动 BB 列表,那么发生在 BB 的 FAB 上的效果会发生在 CC 的 FAB 上。
任何进一步进行的建议或替代的出路
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。