Fultter NestedScrollView实现吸顶效果以及遇到问题解析

 更新时间:2023年09月07日 10:47:17   作者:光法V3  
这篇文章主要为大家介绍了Fultter NestedScrollView实现吸顶效果以及遇到问题解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

1、如何利用NestedScrollView 进行吸顶效果?

在Flutter中,你可以使用NestedScrollView和SliverAppBar来实现吸顶效果。以下是我们常常在搜索里面搜索到的类型模版,来使用NestedScrollView以到达实现吸顶效果的步骤:

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: NestedScrollView(
      // 配置可折叠的头布局
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        // 在这里创建你的SliverAppBar
        return [
          SliverAppBar(
            // 设置吸顶效果的属性
            // 设置为true以启用吸顶效果
            pinned: true,
            // 其他属性设置
          ),
        ];
      },
      //页面的主体内容
      body: SingleChildScrollView(
        ...
      ),
    ),
  );
}

2、我们采用这样的方式去写的时候会发生什么问题?

以及如何一步步去解决问题

在我们使用会出现body被header遮挡的问题。 导致滑动到顶部我们的body 在有一部分展示不全。如下图:

发生以上的原因是因为NestedScrollView滑动的时候他无法预支header的高度问题,所以我们使用“SliverOverlapAbsorber+ SliverOverlapInjector”来解决问题,这两个小部件是在处理header和body之间的重叠问题时被使用到。

Widget build(BuildContext context) {
  return Scaffold(
    body: NestedScrollView(
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return [
          SliverOverlapAbsorber(
            handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
            sliver: SliverAppBar(
              pinned: true,
              // 其他属性设置
            ),
          ),
        ];
      },
      body: Builder(
        builder: (BuildContext context) {
          return CustomScrollView(
            slivers: [
              SliverOverlapInjector(
                handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
              ),
              ...
            ],
          );
        },
      ),
    ),
  );
}

3、注意事项

使用这个我们会发现如何只有一个header的时候,一般问题就会被解决。但是我们有多个header怎么办呢?在测试的过程中发现虽然返回的是一个数组,但是数组里面我们只能使用一个 ”SliverOverlapAbsorber“ 去监听,如果写入多个SliverOverlapAbsorber会造成严重的卡顿,最终大概率会发生死机的情况,如何去解决这个问题,我们可以使用一下俩种方式:

3.1 使用 sliver_tools

sliver_tools

这个插件,允许将多个sliver分组在一起以便它们可以作为单个小部件返回。

@override
  Widget build(BuildContext context) {
    return MultiSliver(
      pushPinnedChildren: false, // defaults to false
      children: <Widget>[
        SliverPersistentHeader(...),
        SliverList(...),
      ],
    );
  }

3.2 使用SliverMainAxisGroup

此小部件实现了在单个 ScrollView 中逐个放置条的功能,所有sliver都在组本身的边界内绘制(即 SliverPercientHeaders 不会在所有sliver提供的滚动范围之外绘制)

具体的文档说明大家可以点击查看 https://docs.google.com/document/d/1e2bdLSYV_Dq2h8aHpF8mda67a...

使用以上俩种方式我们能很好的解决NestedScrollView 滚动吸顶。但是第二次方式对于flutter 的版本要求比较高哟。

以上就是Fultter NestedScrollView实现吸顶效果以及遇到问题解析的详细内容,更多关于Fultter NestedScrollView吸顶效果的资料请关注脚本之家其它相关文章!

相关文章

  • Android UI控件Switch的使用方法

    Android UI控件Switch的使用方法

    这篇文章主要为大家详细介绍了Android UI控件Switch的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • android自定义View滑动删除效果

    android自定义View滑动删除效果

    这篇文章主要为大家详细介绍了android自定义控件View滑动删除效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • android长截屏原理及实现代码

    android长截屏原理及实现代码

    本篇文章主要介绍了android长截屏原理及实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • Android开发实现SubMenu选项菜单和子菜单示例

    Android开发实现SubMenu选项菜单和子菜单示例

    这篇文章主要介绍了Android开发实现SubMenu选项菜单和子菜单,结合实例形式分析了Android开发中SubMenu选项菜单和子菜单的功能、配置、布局等相关操作技巧,需要的朋友可以参考下
    2019-03-03
  • 通过源码角度看看AccessibilityService

    通过源码角度看看AccessibilityService

    这篇文章主要给大家介绍了关于通过源码角度看看AccessibilityService的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-06-06
  • Android开发基础简化Toast调用方法详解

    Android开发基础简化Toast调用方法详解

    这篇文章主要为大家介绍了Android开发基础简化Toast调用方法的相关资料,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • Android编程输入事件流程详解

    Android编程输入事件流程详解

    这篇文章主要介绍了Android编程输入事件流程,较为详细的分析了Android输入事件原理、相关概念与具体操作流程,需要的朋友可以参考下
    2016-10-10
  • Android使用Messenger实现service与activity交互

    Android使用Messenger实现service与activity交互

    这篇文章主要介绍了android使用Messenger实现service与activity交互的相关资料,需要的朋友可以参考下
    2016-06-06
  • Android反编译看看手Q口令红包的实现原理

    Android反编译看看手Q口令红包的实现原理

    这篇文章主要介绍了Android反编译看看手Q口令红包的实现原理,需要的朋友可以参考下
    2016-02-02
  • Android查看电池电量的方法(基于BroadcastReceiver)

    Android查看电池电量的方法(基于BroadcastReceiver)

    这篇文章主要介绍了Android查看电池电量的方法,结合实例分析了Android使用BroadcastReceiver实现针对电池电量的查询技巧,需要的朋友可以参考下
    2016-01-01

最新评论