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<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到时候 这是标题颜色为透明即可隐藏

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值