SliverAppBar在未吸顶的效果下如何隐藏FlexibleSpaceBar标题

要监听SliverAppBar是否吸顶,可以使用ScrollController来监听滚动事件,并使用SliverAppBarpinned属性来检查SliverAppBar是否吸顶。以下是一个简单的示例:

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  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: [
          SliverAppBar(
            pinned: _isAppBarPinned,
            title: Text('My App Title'),
            // 其他属性...
          ),
          // 其他slivers...
        ],
      ),
    );
  }
}

在这个示例中,_scrollController监听了CustomScrollView的滚动事件,当_scrollController的偏移量超过了CustomScrollView的最大滚动范围减去kToolbarHeight(即SliverAppBar的高度)时,表示SliverAppBar已经吸顶,将_isAppBarPinned设置为true,否则将其设置为false。在SliverAppBar中使用_isAppBarPinned来设置pinned属性,以指示是否吸顶。 

监听高度可以自己设定,_isAppBarPinned等于false到时候 这是标题颜色为透明即可隐藏

你可能感兴趣的:(开发语言,flutter)