Flutter重叠滚动效果插件overlap_snapping_sliver的使用

Flutter重叠滚动效果插件overlap_snapping_sliver的使用

本插件用于创建一个包含两个部分的简单小部件：

  1. 静态部分： 静态部分是固定的（固定）部分，不会在滚动时移动，并始终位于顶部。

  2. 可移动部分： 可移动部分是可以移动和滚动的部分，通过滚动会移动，并且可能会放置在静态部分上。

这种类型的滑块可以在不同的场景中使用。

开始使用

此小部件易于使用。只需使用此小部件定义您的staticPart参数为简单的普通小部件（RenderBox），并将slivers参数作为任意滑块的列表（如SliverList或SliverGrid等）。

使用示例

以下示例代码展示了如何创建一个视图，该视图以图像作为静态部分，并显示大量的盒子作为滑块。随着滚动，滑块会在静态部分上移动，并且由于某些盒子（偶数索引的盒子）是透明的，静态部分会透过这些盒子显现出来。

import 'package:flutter/material.dart';
import 'dart:math';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: CustomScrollView(
          slivers: [
            OverlapSliver(
              clipStatic: true,
              slivers: [
                SliverList(
                  delegate: SliverChildBuilderDelegate((ctx, idx) {
                    final height = 250;
                    return Container(
                      height: height.toDouble(),
                      decoration: BoxDecoration(
                        color: idx % 2 == 0
                            ? Colors.transparent
                            : Color.fromRGBO(Random().nextInt(255),
                                Random().nextInt(255), Random().nextInt(255), 1),
                      ),
                      child: Center(child: Text("$idx")),
                    );
                  }),
                )
              ],
              staticPart: Image.network(
                'https://www.w3schools.com/w3css/img_snowtops.jpg',
                height: 300,
                fit: BoxFit.cover,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter重叠滚动效果插件overlap_snapping_sliver的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter重叠滚动效果插件overlap_snapping_sliver的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


overlap_snapping_sliver 是一个用于在 Flutter 中实现重叠滚动效果的插件。它允许你在 CustomScrollView 中创建具有重叠效果的 Sliver 组件，并且支持自动吸附（snapping）行为。以下是使用 overlap_snapping_sliver 插件的详细步骤和示例代码。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 overlap_snapping_sliver 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  overlap_snapping_sliver: ^0.1.0  # 请检查最新版本

然后运行 flutter pub get 来安装依赖。

2. 基本使用

接下来，你可以在 CustomScrollView 中使用 OverlapSnappingSliver 来创建具有重叠效果的 Sliver 组件。以下是一个简单的示例：

import 'package:flutter/material.dart';
import 'package:overlap_snapping_sliver/overlap_snapping_sliver.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            OverlapSnappingSliver(
              overlapHeight: 100.0, // 重叠高度
              snappingHeight: 200.0, // 吸附高度
              child: SliverAppBar(
                expandedHeight: 200.0,
                floating: false,
                pinned: true,
                flexibleSpace: FlexibleSpaceBar(
                  title: Text('Overlapping Sliver'),
                  background: Image.network(
                    'https://picsum.photos/200/300',
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) {
                  return ListTile(
                    title: Text('Item $index'),
                  );
                },
                childCount: 20,
              ),
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部