传递ScrollController后CustomScrollView行为异常，如何兼顾自动滚动与原有行为？

Hey, I've run into this exact issue before! The problem here is that NestedScrollView relies on sharing a scroll controller with its child scrolling widgets to sync the SliverAppBar's collapse behavior and overall scroll mechanics. When you assign a separate ScrollController to your CustomScrollView, you break that critical connection—so the NestedScrollView can't track the inner scroll state anymore, which is why your SliverAppBar won't collapse and the outer scroll stops working.

Here are two reliable solutions to fix this while keeping the auto-scroll functionality:

Solution 1: Use a GlobalKey to access the CustomScrollView's scroll position #

Instead of adding a separate controller, use a GlobalKey to reference the CustomScrollView's internal scroll state directly. This lets you trigger the scroll-to-bottom action without breaking the NestedScrollView's sync.

Modify your code like this:

class _MyHomePageState extends State<MyHomePage> {
  // Create a GlobalKey to reference the CustomScrollView
  final GlobalKey<CustomScrollViewState> _customScrollKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Access the scroll position via the GlobalKey
          final scrollPosition = _customScrollKey.currentState?.position;
          if (scrollPosition != null) {
            scrollPosition.animateTo(
              scrollPosition.maxScrollExtent,
              curve: Curves.easeOut,
              duration: const Duration(seconds: 1),
            );
          }
        },
      ),
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              expandedHeight: 230.0,
              pinned: true,
              flexibleSpace: FlexibleSpaceBar(
                title: Text('SliverAppBar Expand'),
              ),
            )
          ];
        },
        body: CustomScrollView(
          // Assign the GlobalKey to the CustomScrollView
          key: _customScrollKey,
          slivers: [
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) {
                  return Container(
                    height: 80,
                    color: Colors.primaries[index % Colors.primaries.length],
                    alignment: Alignment.center,
                    child: Text(
                      'Item : $index',
                    ),
                  );
                },
                childCount: 20,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Solution 2: Use NestedScrollController (controller-focused approach) #

If you prefer working with controllers, use NestedScrollController—it's specifically designed for NestedScrollView to manage both the header (outer) and body (inner) scroll states. You can use its innerController to control the CustomScrollView while preserving the SliverAppBar sync.

Here's how to implement this:

class _MyHomePageState extends State<MyHomePage> {
  final NestedScrollController _nestedScrollController = NestedScrollController();

  @override
  void dispose() {
    _nestedScrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Use the innerController to access the CustomScrollView's scroll state
          final innerController = _nestedScrollController.innerController;
          if (innerController != null) {
            innerController.animateTo(
              innerController.position.maxScrollExtent,
              curve: Curves.easeOut,
              duration: const Duration(seconds: 1),
            );
          }
        },
      ),
      body: NestedScrollView(
        // Assign the NestedScrollController to the parent
        controller: _nestedScrollController,
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              expandedHeight: 230.0,
              pinned: true,
              flexibleSpace: FlexibleSpaceBar(
                title: Text('SliverAppBar Expand'),
              ),
            )
          ];
        },
        body: CustomScrollView(
          // Do NOT add a separate controller here
          slivers: [
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) {
                  return Container(
                    height: 80,
                    color: Colors.primaries[index % Colors.primaries.length],
                    alignment: Alignment.center,
                    child: Text(
                      'Item : $index',
                    ),
                  );
                },
                childCount: 20,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Why these work #

• GlobalKey approach: You're accessing the CustomScrollView's built-in scroll position directly, so you don't interfere with the NestedScrollView's internal sync logic.
• NestedScrollController approach: This controller is purpose-built for dual-scroll contexts. The innerController links directly to your CustomScrollView, while the outerController manages the SliverAppBar—keeping both behaviors fully functional.

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