如 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 上。
任何进一步进行的建议或替代出路