嵌套Scaffold导致ScrollController行为异常的解决方案咨询

方案1：重构导航结构，避免嵌套Scaffold #

这是官方推荐的最优解，适配BottomNavigationBar场景：

• 外层仅保留一个根Scaffold，包含BottomNavigationBar，body使用Navigator组件，每个Tab对应独立的导航栈。
• 子页面不再嵌套Scaffold，直接将AppBar作为页面body的一部分（比如用Column包裹AppBar和内容区域）。

示例代码：

class RootPage extends StatefulWidget {
  @override
  _RootPageState createState() => _RootPageState();
}

class _RootPageState extends State<RootPage> {
  int _currentIndex = 0;
  final List<GlobalKey<NavigatorState>> _navigatorKeys = [
    GlobalKey<NavigatorState>(),
    GlobalKey<NavigatorState>(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          if (index != _currentIndex) {
            setState(() => _currentIndex = index);
          } else {
            // 点击当前Tab时回到顶部
            _navigatorKeys[index].currentState?.popUntil((route) => route.isFirst);
          }
        },
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.language), label: 'Alphabets'),
          BottomNavigationBarItem(icon: Icon(Icons.numbers), label: 'Numbers'),
        ],
      ),
      body: Stack(
        children: [
          Offstage(
            offstage: _currentIndex != 0,
            child: Navigator(
              key: _navigatorKeys[0],
              onGenerateRoute: (settings) => MaterialPageRoute(
                builder: (context) => AlphabetScreen(),
              ),
            ),
          ),
          Offstage(
            offstage: _currentIndex != 1,
            child: Navigator(
              key: _navigatorKeys[1],
              onGenerateRoute: (settings) => MaterialPageRoute(
                builder: (context) => NumbersScreen(),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

// 子页面示例
class AlphabetScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        AppBar(
          title: const Text('Alphabets'),
          actions: [IconButton(icon: const Icon(Icons.search), onPressed: () {})],
        ),
        Expanded(
          child: ListView.builder(
            itemCount: 100,
            itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
          ),
        ),
      ],
    );
  }
}

这种结构下，每个Tab的页面都属于根Scaffold的body，无嵌套Scaffold，使用scroll_to_top包时只会触发当前活跃Tab的页面响应回到顶部事件。

方案2：拦截ScrollsToTop通知，阻止冒泡到父级 #

若无法重构导航结构，可通过拦截通知避免父页面响应：
在嵌套的子页面Scaffold外层添加NotificationListener<ScrollsToTopNotification>，处理完当前页面的回到顶部逻辑后，返回true阻止通知向上传递。

示例代码：

class NumbersScreen extends StatelessWidget {
  final ScrollController _scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return NotificationListener<ScrollsToTopNotification>(
      onNotification: (notification) {
        _scrollController.animateTo(
          0,
          duration: const Duration(milliseconds: 300),
          curve: Curves.easeInOut
        );
        return true; // 阻止通知继续向上传递
      },
      child: Scaffold(
        appBar: AppBar(title: const Text('Numbers')),
        body: ListView.builder(
          controller: _scrollController,
          itemCount: 100,
          itemBuilder: (context, index) => ListTile(title: Text('Number $index')),
        ),
      ),
    );
  }
}

注意：如果使用scroll_to_top包，需确保子页面的ScrollsToTop组件在NotificationListener内部，这样拦截后父级的ScrollsToTop不会收到通知。

方案3：基于页面可见性控制响应逻辑 #

通过监听页面的可见状态，仅当页面处于活跃可见状态时，才执行回到顶部操作：

• 使用WidgetsBindingObserver监听页面生命周期，或用VisibilityDetector包判断页面是否可见。
• 在onScrollsToTop方法中先判断页面是否可见，再执行滚动逻辑。

示例代码：

class AlphabetScreen extends StatefulWidget {
  @override
  _AlphabetScreenState createState() => _AlphabetScreenState();
}

class _AlphabetScreenState extends State<AlphabetScreen> with WidgetsBindingObserver {
  bool _isVisible = true;
  final ScrollController _scrollController = ScrollController();

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    _scrollController.dispose();
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    setState(() {
      _isVisible = state == AppLifecycleState.resumed;
    });
  }

  void _onScrollsToTop() {
    if (_isVisible) {
      _scrollController.animateTo(
        0,
        duration: const Duration(milliseconds: 300),
        curve: Curves.easeInOut
      );
      print('AlphabetScreen onScrollsToTop method called');
    }
  }

  @override
  Widget build(BuildContext context) {
    return ScrollsToTop(
      onScrollsToTop: _onScrollsToTop,
      child: Scaffold(
        appBar: AppBar(title: const Text('Alphabets')),
        body: ListView.builder(
          controller: _scrollController,
          itemCount: 100,
          itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
        ),
      ),
    );
  }
}

这种方式可确保只有当前可见的页面才会响应状态栏点击事件，避免后台页面被意外滚动到顶部。

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