Flutter滚动物理效果插件snap_scroll_physics的使用

当构建可滚动视图时，有时你希望滚动停止在特定的偏移量处，或者避免在某些区域内停止。此包允许你在任何 Flutter 滚动视图中实现这种行为。

这种行为可以在任何使用 UIKit/SwiftUI 导航栏的 iOS 应用中看到，也可以在一些流行的定制头部应用中看到，比如 Twitter、Chrome、Gmail、Google Photos、Apple Music、Facebook 等！

physics: SnapScrollPhysics(
    snaps: [
        Snap(200, distance: 50), // 如果预期滚动停止在 150-250 之间，则滚动将停在 200
        Snap(200, leadingDistance: 50), // 如果预期滚动停止在 150-200 之间，则滚动将停在 200
        Snap(200, trailingDistance: 50), // 如果预期滚动停止在 150-200 之间，则滚动将停在 200
        Snap.avoidZone(0, 200), // 如果预期滚动停止在 0-200 之间，滚动将在 0-99 之间停在 0，在 100-200 之间停在 200
        Snap.avoidZone(0, 200, delimiter: 50), // 如果预期滚动停止在 0-200 之间，滚动将在 0-49 之间停在 0，在 50-200 之间停在 200
    ]
),

physics: SnapScrollPhysics.cupertinoAppBar, // 默认值适用于 Cupertino 应用程序栏

重要！遗憾的是，滚动物理属性不是实时更新的，因此如果你更改了这些值，它们不会自动更新。请参阅Issue 80051。

这可以通过以下方式临时解决，但在生产环境中如果没有运行时需要更改的情况，这是不建议的：

List<Snap> getSnaps() {
    return [
       Snap(200), // 热重载有效
    ];
}

[@override](/user/override)
Widget build(BuildContext context) {
    return CustomScrollView(
      physics: SnapScrollPhysics.builder(getSnaps),
      slivers: [
       // ....
      ],
    );
}

示例代码

以下是完整的示例代码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:snap_scroll_physics/snap_scroll_physics.dart';
import 'examples/material.dart';
import 'examples/cupertino.dart';
import 'examples/music.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int index = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    bool showBottomBar = true;
    return Scaffold(
      body: [
        () => MaterialExamplePage(),
        () => CupertinoExamplePage(),
        () => MusicExamplePage(),
      ][index](),
      bottomNavigationBar: showBottomBar ? BottomNavigationBar(
        currentIndex: index,
        onTap: (index) => setState(() => this.index = index),
        items: [
          BottomNavigationBarItem(
            label: 'Material',
            icon: Icon(Icons.adb),
          ),
          BottomNavigationBarItem(
            label: 'Cupertino',
            icon: Icon(Icons.tab),
          ),
          BottomNavigationBarItem(
            label: 'Music',
            icon: Icon(Icons.music_note),
          )
        ],
      ) : null,
    );
  }
}