Flutter iOS端状态栏点击滚动至顶部实现方案（含自定义ScrollController）

Great question! The default PrimaryScrollController works fine for basic setups, but it definitely hits limits when you're using custom scroll controllers or dealing with multiple scrollable widgets. Let's break down how to implement the status bar tap-to-top behavior in these scenarios.

1. Single Custom ScrollController #

If you're using a custom ScrollController instead of relying on the auto-provided primary one, you can intercept the ScrollToTopNotification that iOS sends when the status bar is tapped. This lets you trigger your custom controller's scroll action directly.

Here's a working example:

class CustomScrollScreen extends StatelessWidget {
  final _customController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return NotificationListener<ScrollToTopNotification>(
      onNotification: (notification) {
        // Trigger scroll to top on our custom controller
        _customController.animateTo(
          0,
          duration: const Duration(milliseconds: 300),
          curve: Curves.easeInOut,
        );
        return true; // Stop the notification from propagating further
      },
      child: Scaffold(
        body: ListView(
          controller: _customController,
          children: List.generate(60, (index) => Padding(
            padding: const EdgeInsets.all(16.0),
            child: Text('Custom List Item $index'),
          )),
        ),
      ),
    );
  }
}

2. Multiple ScrollControllers #

When you have multiple scrollable widgets (like two separate ListViews with their own controllers), you first need to track which one is currently active (i.e., the one the user was scrolling most recently). Then, when the status bar is tapped, you trigger that active controller's scroll-to-top action.

Step-by-Step Implementation: #

1. Track the active controller with a state variable
2. Use UserScrollNotification to update the active controller when a user starts scrolling a widget
3. Intercept ScrollToTopNotification to trigger the active controller's scroll

Example code:

class MultipleScrollScreen extends StatefulWidget {
  @override
  _MultipleScrollScreenState createState() => _MultipleScrollScreenState();
}

class _MultipleScrollScreenState extends State<MultipleScrollScreen> {
  final _controller1 = ScrollController();
  final _controller2 = ScrollController();
  ScrollController? _activeController;

  @override
  void initState() {
    super.initState();
    // Set initial active controller
    _activeController = _controller1;
  }

  @override
  void dispose() {
    _controller1.dispose();
    _controller2.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return NotificationListener<ScrollToTopNotification>(
      onNotification: (notification) {
        _activeController?.animateTo(
          0,
          duration: const Duration(milliseconds: 300),
          curve: Curves.easeInOut,
        );
        return true;
      },
      child: Scaffold(
        body: Column(
          children: [
            Expanded(
              child: NotificationListener<UserScrollNotification>(
                onNotification: (notification) {
                  // Update active controller when user starts scrolling this list
                  if (notification.direction != ScrollDirection.idle) {
                    setState(() => _activeController = _controller1);
                  }
                  return false; // Let the notification continue propagating
                },
                child: ListView(
                  controller: _controller1,
                  children: List.generate(50, (index) => Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: Text('List 1 Item $index'),
                  )),
                ),
              ),
            ),
            Expanded(
              child: NotificationListener<UserScrollNotification>(
                onNotification: (notification) {
                  if (notification.direction != ScrollDirection.idle) {
                    setState(() => _activeController = _controller2);
                  }
                  return false;
                },
                child: ListView(
                  controller: _controller2,
                  children: List.generate(50, (index) => Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: Text('List 2 Item $index'),
                  )),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Bonus: Global App-Wide Solution #

If you want to avoid repeating this logic across every screen, you can create a custom InheritedWidget to manage the active scroll controller globally. Then, add a single ScrollToTopNotification listener at the root of your app.

Here's a quick outline:

class ActiveScrollController extends InheritedWidget {
  final ScrollController? controller;
  final VoidCallback onScrollToTop;

  const ActiveScrollController({
    Key? key,
    required this.controller,
    required this.onScrollToTop,
    required Widget child,
  }) : super(key: key, child: child);

  static ActiveScrollController? of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<ActiveScrollController>();
  }

  @override
  bool updateShouldNotify(ActiveScrollController oldWidget) {
    return controller != oldWidget.controller;
  }
}

Then wrap your app with it:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return NotificationListener<ScrollToTopNotification>(
      onNotification: (notification) {
        ActiveScrollController.of(context)?.onScrollToTop();
        return true;
      },
      child: MaterialApp(
        home: ActiveScrollController(
          controller: ScrollController(),
          onScrollToTop: () {
            ActiveScrollController.of(context)?.controller?.animateTo(
              0,
              duration: const Duration(milliseconds: 300),
              curve: Curves.ease,
            );
          },
          child: // Your initial screen
        ),
      ),
    );
  }
}

Now any screen can update the ActiveScrollController with its custom controller, and the status bar tap will work automatically.

内容的提问来源于stack exchange，提问作者Miguel Ruivo