管理 SingleChildScrollView 内 SingleChildScrollView 的滚动 - 颤动？

Question

我有一个父 SCS 视图(SingleChildScrollView) 和一个子 SCS 视图。在子 SCS 视图内有一个数据表，数据表从屏幕底部四分之一左右开始。

现在，当用户滚动到子 SCS 视图内的数据表顶部时，我想滚动父 SCS 视图。

这在网络中自然有效，但在 iOS 或 anroid 中不起作用。我尝试对父级和子级 SCS 视图使用相同的 Scrollcontroller 并使用 ScrollPhysics。但似乎没有任何作用。你能帮我解决一下吗？

这是代码：

    import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Report'),
        ),
      ),
    ),
  );
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final ScrollController scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          Text('Some Data', style: TextStyle(fontSize: 30)),
          Text('Some Data', style: TextStyle(fontSize: 30)),
          Text('Some Data', style: TextStyle(fontSize: 30)),
          Text('Some Data', style: TextStyle(fontSize: 30)),
          Text('Some Data', style: TextStyle(fontSize: 30)),
          Text('Some Data', style: TextStyle(fontSize: 30)),
          ConstrainedBox(
            constraints: BoxConstraints(
              maxHeight: 400,
            ),
            child: Scrollbar(
              controller: scrollController,
              child: SingleChildScrollView(
                controller: scrollController,
                child: SingleChildScrollView(
                  scrollDirection: Axis.horizontal,
                  child: DataTable(
                    columns: [
                      DataColumn(label: Text('Sl. No.')),
                      DataColumn(label: Text('Resource Name')),
                      DataColumn(label: Text('Score at 1')),
                      DataColumn(label: Text('Score at 2')),
                      DataColumn(label: Text('Final Score')),
                    ],
                    rows: [
                      DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),
                      DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),
                      DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),
                      DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),
                      DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),
                      DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),
                      DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),
                      DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),
                      DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),
                      DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),
                      DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),
                      DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),
                      DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),
                      DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),
                      DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),
                    ],
                  ),
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}

谢谢。

Answer 1

可以使用NotificationListener监听OverscrollNotification检测嵌套列表的上边界命中，并通过控制滚动到外层Scrollview。

我将您的问题简化为以下示例代码：

class MyNestedListView extends StatefulWidget {
  const MyNestedListView({Key? key}) : super(key: key);

  @override
  _MyNestedListViewState createState() => _MyNestedListViewState();
}

class _MyNestedListViewState extends State<MyNestedListView> {
  final _controller = ScrollController();

  @override
  Widget build(BuildContext context) {
    return ListView(
      controller: _controller,
      children: [
        Placeholder(fallbackHeight: 400),
        Placeholder(fallbackHeight: 400),
        Placeholder(fallbackHeight: 400),
        Container(
          padding: EdgeInsets.symmetric(horizontal: 20),
          height: 400,
          child: NotificationListener(
            onNotification: (notification) {
              // disable overscroll indicator
              // if (notification is OverscrollIndicatorNotification) {
              //   if (notification.leading) {
              //     notification.disallowGlow();
              //   }
              // }
              if (notification is OverscrollNotification) {
                final dy = notification.overscroll;
                if (dy < 0) {
                  _controller.position.jumpTo(_controller.offset + dy);
                }
              }
              return true;
            },
            child: ListView(
              children: [
                Placeholder(fallbackHeight: 200),
                Placeholder(fallbackHeight: 200),
                Placeholder(fallbackHeight: 200),
                Placeholder(fallbackHeight: 200),
              ],
            ),
          ),
        )
      ],
    );
  }

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