本文共 2458 字，大约阅读时间需要 8 分钟。

Flutter 滑动组件家族：CustomScrollView 和 SliverAppBar

在 Flutter 开发中，CustomScrollView 和 SliverAppBar 是两个非常重要的组件，常用于构建高效滑动页面。以下将详细介绍这两个组件的功能、使用方法以及实际效果。

1. CustomScrollView

CustomScrollView 是一个高度可定制的滑动组件，支持多种滑动物理引擎和滑动方向。它是构建可滚动内容的核心组件，常用于页面的上下滑动。

主要参数解析

• physics（滑动引擎）

  • BouncingScrollPhysics：拉到最底部时有回弹效果。
  • ClampingScrollPhysics：内容不会回弹（默认）.
  • NeverScrollableScrollPhysics：完全禁止滑动。

• primary（是否尝试滚动）

  • true：当内容不足时，尝试滚动.
  • false：不允许滚动.

• cacheExtent（预加载条目）

  • 用于预加载内容，提升性能.

• scrollDirection（滚动方向）

  • Axis.vertical：垂直滚动（默认）.
  • Axis.horizontal：水平滚动.

• shrinkWrap（反向滑动 AppBar）

  • true：反向滑动时隐藏 AppBar.

• slivers（子 Widget）

  • 用于嵌套其他滑动组件如 SliverAppBar、SliverList 等.

滑动物理引擎示例

• BouncingScrollPhysics：页面底部有回弹效果。
• NeverScrollableScrollPhysics：完全禁止滑动。
• ClampingScrollPhysics：内容不会回弹。

2. SliverAppBar

SliverAppBar 是一个用于构建状态栏的组件，支持滑动背景和动态标题布局。

主要参数解析

• title（标题）

  • 使用 Text 组件显示标题.

• leading（左侧按钮）

  • 通常使用 CloseButton 显示返回按钮.

• expandedHeight（滑动高度）

  • 控制 AppBar 的滑动范围.

• floating（是否悬浮）

  • true：在滑动时显示 AppBar.

• pinned（是否固定）

  • true：AppBar 固定在顶部.

• snap（是否跟随手指）

  • true：AppBar 跟随手指滑动.

• flexibleSpace（滑动背景）

  • 使用 FlexibleSpaceBar 显示背景图像或其他内容.

• backgroundColor（背景颜色）

  • 控制 AppBar 的背景颜色.

• brightness（状态栏主题色）

  • Brightness.light：灰色主题（默认）.
  • Brightness.dark：白色主题.

• centerTitle（标题居中）

  • true：标题居中显示.

• actions（右侧操作）

  • 通常用于放置右侧按钮或操作.

FlexibleSpaceBar 参数

• background（背景 Widget）

  • 显示背景图像或其他内容.

• title（标题 Widget）

  • 显示标题.

• centerTitle（标题居中）

  • true：标题居中显示.

• collapseMode（折叠模式）

  • CollapseMode.parallax：背景以视差效果滚动.
  • CollapseMode.none：没有折叠效果.
  • CollapseMode.pin：背景固定到位.

• titlePadding（标题内边距）

  • 调整标题内边距.

3. 综合示例

以下是 CustomScrollView 和 SliverAppBar 的整合示例代码：

CustomScrollView(  physics: BouncingScrollPhysics(),  shrinkWrap: false,  primary: true,  cacheExtent: 0,  scrollDirection: Axis.vertical,  slivers: [    SliverAppBar(      title: Text('Flutter'),      leading: CloseButton(),      expandedHeight: 230,      floating: true,      pinned: true,      snap: true,      flexibleSpace: FlexibleSpaceBar(        background: Image.asset('assets/images/flutter.jpg', fit: BoxFit.fill),        title: Text('Android'),        centerTitle: true,        collapseMode: CollapseMode.pin,      ),      backgroundColor: Colors.blue,      brightness: Brightness.dark,      primary: true,      centerTitle: false,      actions: initAppBarRightIcon(),    ),  ],)

4. 注意事项

• CustomScrollView 中不能直接使用 ListView 或 GridView，因为这会导致可滑动组件嵌套，引发冲突.
• SliverAppBar 的 floating 参数必须为 true，否则无法使用 snap 参数.

5. 效果图展示

以下是一些效果图的描述（去除了具体链接）：

• CustomScrollView：支持三种滑动物理引擎，分别展示回弹、禁止滑动和无回弹效果.
• SliverAppBar：展示了标题居中、左侧关闭按钮、滑动背景以及不同折叠模式的效果.

如果还有疑问，请随时留言！

转载地址：http://sxlb.baihongyu.com/