求助：Flutter子组件滚动到首尾时联动父组件滚动的实现方案

需实现：当Flutter中的子滚动组件滚动到顶部或底部时，触发父滚动组件滚动，同时保持滚动速度、滚动动量、滚动物理效果及良好用户体验。

效果演示（无BouncingScrollPhysics）：

试过NotificationListener方案，但该方法无法维持滚动速度、动量等特性，用户体验较差；参考过相关方案但无法正确实现或满足运行条件。这类功能在网页中十分常见，目前Flutter暂无完美解决方案，相关问题数量众多，完整方案将极具价值。

优质相关问答 #

• Flutter : ListView : Scroll parent ListView when child ListView reach bottom - ClampingScrollPhysics not working in sized container
• Is there any way to scroll parent listview when the child listview reached end in flutter?
• Flutter: Continue scrolling in top Listview when reaching bottom of nested Listview

其他类似问答 #

• How to automatically start scrolling a parent scrollable widget when the child scrollable reaches the top in flutter
• Flutter Nested list scroll parent when reach to end/start of inner list

测试代码 #

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final ScrollController _textAController = ScrollController();
  final ScrollController _textBController = ScrollController();
  final ScrollController _pageController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView(
        controller: _pageController,
        children: [
          Container(
            height: 200,
            color: Colors.green,
          ),
          Container(
            height: 200,
            color: Colors.red,
          ),
          Padding(
            padding: const EdgeInsets.only(bottom: 8.0),
            child: ConstrainedBox(
              constraints: const BoxConstraints(maxHeight: 200),
              child: SingleChildScrollView(
                padding: const EdgeInsets.only(right: 15),
                controller: _textAController,
                physics: const ClampingScrollPhysics(),
                child: Column(
                  children: [
                    const Text(
                      'Scrollable Child 1',
                      softWrap: true,
                      textAlign: TextAlign.center,
                    ),
                    Container(
                      color: Colors.amber,
                      height: 600,
                    )
                  ],
                ),
              ),
            ),
          ),
          Container(
            height: 10,
            color: Colors.purple,
          ),
          Padding(
            padding: const EdgeInsets.only(top: 8.0),
            child: ConstrainedBox(
              constraints: const BoxConstraints(maxHeight: 200),
              child: SingleChildScrollView(
                controller: _textBController,
                physics: const ClampingScrollPhysics(),
                padding: const EdgeInsets.only(right: 15),
                child: Column(
                  children: [
                    const Text(
                      'Scrollable Child 2',
                      softWrap: true,
                      textAlign: TextAlign.center,
                    ),
                    ListView.separated(
                      physics: const NeverScrollableScrollPhysics(),
                      separatorBuilder: (BuildContext context, index) {
                        return Container(
                          height: 12,
                          width: 50,
                          color: Colors.grey,
                        );
                      },
                      shrinkWrap: true,
                      padding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
                      itemCount: 5,
                      itemBuilder: (BuildContext context, int index) {
                        return Container(
                          height: 60,
                          color: Colors.black,
                        );
                      },
                    ),
                  ],
                ),
              ),
            ),
          ),
          Container(
            height: 100,
            color: Colors.blue,
          ),
        ],
      ),
    );
  }
}

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