Flutter底部弹出视图滚动物理效果插件bottom_sheet_scroll_physics的使用

Flutter底部弹出视图滚动物理效果插件bottom_sheet_scroll_physics的使用

BottomSheetScrollPhysics 描述

BottomSheetScrollPhysics 是一个自定义的滚动物理效果，适用于带有嵌套滚动视图的模态底部弹出视图。它在滚动顶部表现为 ClampingScrollPhysics，而在滚动底部表现为默认的 ScrollPhysics。这意味着在 iOS 上，顶部会像 ClampingScrollPhysics 行为，底部则像 BouncingScrollPhysics 行为；在 Android 上，顶部和底部都会像 ClampingScrollPhysics 行为。

示例 Demo

下面是一个完整的示例代码，展示了如何在 Flutter 底部弹出视图中使用 BottomSheetScrollPhysics。

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

void main() {
  runApp(const ExampleApp());
}

class ExampleApp extends StatelessWidget {
  const ExampleApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Example App',
      theme: ThemeData(primarySwatch: Colors.indigo),
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Example'),
      ),
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 116),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              ElevatedButton(
                onPressed: () {
                  showMaterialModalBottomSheet(
                    context: context,
                    builder: (context) {
                      return const BottomSheetWithCustomPhysics();
                    },
                  );
                },
                child: const Text('Bottom Sheet w/ BottomSheetScrollPhysics'),
              ),
              TextButton(
                onPressed: () {
                  showMaterialModalBottomSheet(
                    context: context,
                    builder: (context) {
                      return const DefaultBottomSheet();
                    },
                  );
                },
                child: const Text('Default Bottom Sheet'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class BottomSheetWithCustomPhysics extends StatelessWidget {
  const BottomSheetWithCustomPhysics({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    final deviceHeight = MediaQuery.of(context).size.height;
    final statusBarHeight = MediaQuery.of(context).viewPadding.top;

    return ConstrainedBox(
      constraints: BoxConstraints(maxHeight: deviceHeight - statusBarHeight),
      child: SafeArea(
        top: false,
        child: ListView.builder(
          physics: const BottomSheetScrollPhysics(),
          padding: EdgeInsets.zero,
          itemCount: 25,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text('Inner Item at $index'),
            );
          },
        ),
      ),
    );
  }
}

class DefaultBottomSheet extends StatelessWidget {
  const DefaultBottomSheet({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    final deviceHeight = MediaQuery.of(context).size.height;
    final statusBarHeight = MediaQuery.of(context).viewPadding.top;

    return ConstrainedBox(
      constraints: BoxConstraints(maxHeight: deviceHeight - statusBarHeight),
      child: SafeArea(
        top: false,
        child: ListView.builder(
          padding: EdgeInsets.zero,
          itemCount: 25,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text('Inner Item at $index'),
            );
          },
        ),
      ),
    );
  }
}

使用说明

在可滚动的 widget 中使用 BottomSheetScrollPhysics 作为物理效果。

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