要监听SliverAppBar
是否吸顶,可以使用ScrollController
来监听滚动事件,并使用SliverAppBar
的pinned
属性来检查SliverAppBar
是否吸顶。以下是一个简单的示例:
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final ScrollController _scrollController = ScrollController();
bool _isAppBarPinned = false;
@override
void initState() {
super.initState();
_scrollController.addListener(_onScroll);
}
@override
void dispose() {
_scrollController.dispose();
super.dispose();
}
void _onScroll() {
if (_scrollController.offset >=
(_scrollController.position.maxScrollExtent - kToolbarHeight)) {
setState(() {
_isAppBarPinned = true;
});
} else {
setState(() {
_isAppBarPinned = false;
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
controller: _scrollController,
slivers: <Widget>[
SliverAppBar(
pinned: _isAppBarPinned,
title: Text('My App Title'),
// 其他属性...
),
// 其他slivers...
],
),
);
}
}
在这个示例中,_scrollController
监听了CustomScrollView
的滚动事件,当_scrollController
的偏移量超过了CustomScrollView
的最大滚动范围减去kToolbarHeight
(即SliverAppBar
的高度)时,表示SliverAppBar
已经吸顶,将_isAppBarPinned
设置为true
,否则将其设置为false
。在SliverAppBar
中使用_isAppBarPinned
来设置pinned
属性,以指示是否吸顶。
监听高度可以自己设定,_isAppBarPinned等于false到时候 这是标题颜色为透明即可隐藏