设置extendBodyBehindAppBar后ScrollController无法绑定？

我需要在页面中实现AppBar动画，在extendBodyBehindAppBar设为true的Scaffold中使用ListView和AnimatedBuilder，让内容显示在AppBar后方。但在Web和Android平台都持续出现ScrollController未绑定到组件的错误，请问是实现有误还是Flutter Bug？该如何修复？

相关组件代码：

class _TestScreenState extends State<TestScreen> {
  final controller = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(56),
        child: AnimatedBuilder(
          animation: controller,
          builder: (_, __) => AppBar(
            title: Text(controller.offset.toString()),
          ),
        ),
      ),
      body: ListView.builder(
        controller: controller,
        itemBuilder: (context, index) => SizedBox(
          height: 32,
          child: Text(index.toString()),
        ),
      ),
    );
  }
}

错误堆栈跟踪：

════════ Exception caught by widgets library ═══════════════════════════════════
The following assertion was thrown building AnimatedBuilder(animation: ScrollController#2b8e3(no clients), dirty, state: _AnimatedState#548ce):
ScrollController not attached to any scroll views.
'package:flutter/src/widgets/scroll_controller.dart':
package:flutter/…/widgets/scroll_controller.dart:1
Failed assertion: line 107 pos 12: '_positions.isNotEmpty'

Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause.
In either case, please report this assertion by filing a bug on GitHub:
  https://github.com/flutter/flutter/issues/new?template=2_bug.md

The relevant error-causing widget was
AnimatedBuilder
package:playground/main.dart:30
When the exception was thrown, this was the stack
#2      ScrollController.position
package:flutter/…/widgets/scroll_controller.dart:107
#3      ScrollController.offset
package:flutter/…/widgets/scroll_controller.dart:115
#4      _TestScreenState.build.<anonymous closure>
package:playground/main.dart:33

原因分析 #

这不是Flutter Bug，是实现逻辑的问题。组件树构建顺序导致AnimatedBuilder会先于ListView完成初始化，此时ScrollController还未绑定到ListView的滚动视图上，直接访问controller.offset就会触发断言错误。

修复方案 #

方案1：检查ScrollController是否已绑定 #

在访问controller.offset前，先判断控制器是否有绑定的滚动位置，避免空访问：

class _TestScreenState extends State<TestScreen> {
  final controller = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: PreferredSize(
        preferredSize: const Size.fromHeight(56),
        child: AnimatedBuilder(
          animation: controller,
          builder: (_, __) => AppBar(
            // 先判断控制器是否有绑定的滚动位置
            title: Text(controller.hasClients ? controller.offset.toString() : "0.0"),
          ),
        ),
      ),
      body: ListView.builder(
        controller: controller,
        itemBuilder: (context, index) => SizedBox(
          height: 32,
          child: Text(index.toString()),
        ),
      ),
    );
  }
}

方案2：使用ScrollController监听替代AnimatedBuilder（可选） #

如果需要更精细的控制，可以通过监听控制器的滚动事件来更新AppBar状态，避免依赖AnimatedBuilder的动画触发时机：

class _TestScreenState extends State<TestScreen> {
  final controller = ScrollController();
  double _scrollOffset = 0.0;

  @override
  void initState() {
    super.initState();
    // 添加滚动监听
    controller.addListener(() {
      setState(() {
        _scrollOffset = controller.offset;
      });
    });
  }

  @override
  void dispose() {
    controller.removeListener(() {});
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: PreferredSize(
        preferredSize: const Size.fromHeight(56),
        child: AppBar(
          title: Text(_scrollOffset.toString()),
        ),
      ),
      body: ListView.builder(
        controller: controller,
        itemBuilder: (context, index) => SizedBox(
          height: 32,
          child: Text(index.toString()),
        ),
      ),
    );
  }
}

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