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/

你可能感兴趣的文章

Openlayers实战：输入WKT数据，输出GML、Polyline、GeoJSON格式数据