美文网首页
(二)Flutter 实现 Android Collapsing

(二)Flutter 实现 Android Collapsing

作者: Darleane | 来源:发表于2022-06-24 18:08 被阅读0次

上篇文章,我们通过ExtendedNestedScrollView + SliverAppbar 实现了折叠滑动的效果,可以查看,以下链接:
(一)Flutter 实现 Android CollapsingToolbarLayout折叠布局效果
但是,不知道小伙伴有没有发现一个问题,有个两个列表滚动同步的问题,我上网查了一下,ExtendedNestedScrollView 这个组件专门解决了这个问题,还解决了一个明显的问题,就是Pinned头引起的bug解决,咱们可以先上代码

  @override
  Widget build(BuildContext context) {
    final FlexibleSpaceBarSettings? settings =
    context.dependOnInheritedWidgetOfExactType(aspect:FlexibleSpaceBarSettings);

    return Scaffold(
        body: ExtendedNestedScrollView(
      onlyOneScrollInBody: true,
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return [
          // sliverappbar 有三部分, 第一部分 标题,通过title属性配置;
          // 第二部分就是用来折叠部分的轮播图,通过 flexibleSpace 属性
          // 配置的FlexibleSpaceBar中配置;
          //第三部分就是通过 bottom 配置的 TabBar 标签栏,在这里结合 PreferredSize 来使用;
          SliverAppBar(
            //SliverAppbar 的标题 title
            title: buildHeader(),
            //标题居中
            centerTitle: true,
            //true时 SliverAppBar 会固定在页面顶部;false时,SliverAppBar 会随着滑动向上滑动
            pinned: true,

            //当值为true时 SliverAppBar设置的title会随着上滑动隐藏
            //然后配置的bottom会显示在原AppBar的位置
            //当值为false时 SliverAppBar设置的title会不会隐藏
            //然后配置的bottom会显示在原AppBar设置的title下面
            // floating: false,
            //
            // //当snap配置为true时,向下滑动页面,SliverAppBar(以及其中配置的flexibleSpace内容)会立即显示出来,
            // //反之当snap配置为false时,向下滑动时,只有当ListView的数据滑动到顶部时,SliverAppBar才会下拉显示出来。
            // snap: false,
            // automaticallyImplyLeading: true,
            //展开的高度
            expandedHeight: 200,
            elevation: 0,
            //appbr 下的内容区域
            flexibleSpace: FlexibleSpaceBar(
              //背景
              //配置的是一个widget也就是说在这里可以使用任意的
              //Widget组合 在这里直接使用的是一个图片
              background: buildFlexibleSpaceWidget(),
            ),

            // bottom: buildFlexibleTooBarWidget(), //appbar 底部区域
          ),
          SliverPersistentHeader(
            pinned: true,
            delegate: StickyTabBarDelegate(
              child: TabBar(
                labelColor: Colors.black,
                controller: this.tabController,
                tabs: tabs,
              ),
            ),
          ),
        ];
      },
      pinnedHeaderSliverHeightBuilder: () {
        return MediaQuery.of(context).padding.top + kToolbarHeight;
      },
      body: TabBarView(
        controller: this.tabController,
        children: tabViews,
      ),
    ));
  }

1、pinned 问题 导致的bug ,解决方式:
pinnedHeaderSliverHeightBuilder: () {
return MediaQuery.of(context).padding.top + kToolbarHeight;
}

返回状态栏高度 和 SliverAppbar 高度总和。

2、列表滚动同步问题
onlyOneScrollInBody:true

相关文章

网友评论

      本文标题:(二)Flutter 实现 Android Collapsing

      本文链接:https://www.haomeiwen.com/subject/nphbvrtx.html