返回

何须束缚？Flutter 20 个实例带你玩转 CustomScrollView

前端

一、老套路，先看样式

左图是我业务中的样式，右图是下方源码展示样式（复制可直接运行，无额外组件引入）

二、讲解

1.涉及组件

首先，没有一个单一组件来实现这个效果

实现这个效果涉及以下组件：

  • CustomScrollView：主要负责滚动行为和效果
  • SliverAppBar：实现顶部可折叠的应用栏
  • SliverList：实现列表视图
  • SliverGrid：实现网格视图
  • SliverToBoxAdapter：将一个子组件转换为一个 Sliver
  • SliverSafeArea：确保内容不会被状态栏和导航栏覆盖
  • Divider：分隔线
  • FloatingActionButton：浮动按钮

2.首先

  • 首先，我们使用 CustomScrollView 作为根组件。

  • 然后，我们使用 SliverAppBar 组件来创建一个可折叠的应用栏。

  • 接下来的 SliverList 组件来创建一个列表视图。

  • 接着我们使用 SliverToBoxAdapter 将一个 Text 组件转换为一个 Sliver。

  • 然后我们使用 SliverSafeArea 来确保内容不会被状态栏和导航栏覆盖。

  • 最后，我们使用 Divider 组件来添加一条分隔线。

  • 最后我们添加一个 FloatingActionButton 组件作为浮动按钮。

三、效果

运行此代码，您将看到一个具有以下特性的滚动视图：

  • 可以折叠的应用栏
  • 列表视图
  • 网格视图
  • 文本视图
  • 分隔线
  • 浮动按钮

四、总结

通过这个实例，我们学习了如何使用 CustomScrollView 来创建具有不同滚动行为和效果的复杂滚动视图。希望对您有所帮助！

五、扩展阅读