颤动滚动直到父级结束，然后子级开始滚动

Question

当父级到达滚动末尾时，如何使子级 listView 滚动 使用我的代码我可以实现这一点，但是当您按住时可以停止中间滚动，并禁用父级并启动子级滚动，但将其保留一半

Column(
          children: [
            Expanded(
              child: NotificationListener<OverscrollNotification>(
                onNotification: (OverscrollNotification value) {
                  print(value.metrics);
                  if (value.depth == 0) {
                    if (value.overscroll < 0 &&
                        listViewController.offset + value.overscroll <= 0) {
                      if (listViewController.offset != 0) {
                        listViewController.jumpTo(0);
                      }
                      if (listViewScrollPhsics ==
                          const ClampingScrollPhysics()) {
                        setState(() {
                          listViewScrollPhsics =
                              const NeverScrollableScrollPhysics();
                        });
                      }
                      print('1');
                      return true;
                    }
                    if (listViewController.offset + value.overscroll >=
                        listViewController.position.maxScrollExtent) {
                      if (listViewController.offset !=
                          listViewController.position.maxScrollExtent) {
                        listViewController.jumpTo(
                            listViewController.position.maxScrollExtent);
                      }
                      print('2');
                      return true;
                    }
                    listViewController
                        .jumpTo(listViewController.offset + value.overscroll);
                    if (listViewScrollPhsics !=
                        const ClampingScrollPhysics()) {
                      setState(() {
                        listViewScrollPhsics = const ClampingScrollPhysics();
                      });
                    }

                    print('3');
                    return true;
                  }
                  //listview controller
                  else {
                    if (value.overscroll < 0 &&
                        SingleController.offset + value.overscroll <= 0) {
                      if (SingleController.offset != 0) {
                        SingleController.jumpTo(0);
                      }
                      if (listViewScrollPhsics ==
                          const ClampingScrollPhysics()) {
                        setState(() {
                          listViewScrollPhsics =
                              const NeverScrollableScrollPhysics();
                        });
                      }
                      print('4');
                      return true;
                    }
                    if (SingleController.offset + value.overscroll >=
                        SingleController.position.maxScrollExtent) {
                      if (SingleController.offset !=
                          SingleController.position.maxScrollExtent) {
                        SingleController.jumpTo(
                            SingleController.position.maxScrollExtent);
                      }
                      print('5');
                      return true;
                    }
                    SingleController.jumpTo(
                        SingleController.offset + value.overscroll);
                    if (listViewScrollPhsics !=
                        const ClampingScrollPhysics()) {
                      setState(() {
                        listViewScrollPhsics = const ClampingScrollPhysics();
                      });
                    }
                    print('6');
                    return true;
                  }
                },
                child: SingleChildScrollView(
                  physics: SinglePhysics,
                  controller: SingleController,
                  child: Column(
                    children: [
                      Container(
                        decoration: const BoxDecoration(color: Colors.amber),
                        width: currentWidth,
                        height: 200,
                      ),
                      Container(
                        height: currentHeight - 50 - 80,
                        width: currentWidth,
                        decoration: const BoxDecoration(color: Colors.red),
                        child: Column(
                          children: [
                            Container(
                              width: currentWidth,
                              height: 50,
                              decoration:
                                  const BoxDecoration(color: Colors.purple),
                            ),
                            Expanded(
                              child: ListView.builder(
                                  physics: listViewScrollPhsics,
                                  controller: listViewController,
                                  shrinkWrap: true,
                                  itemCount: 20,
                                  itemBuilder: (BuildContext context, index) {
                                    return Container(
                                      margin: const EdgeInsets.only(top: 10),
                                      width: currentWidth,
                                      height: 70,
                                      decoration: const BoxDecoration(
                                          color: Colors.green),
                                    );
                                  }),
                            ),
                          ],
                        ),
                      )
                    ],
                  ),
                ),
              ),
            ),
            Footer(currentWidth: currentWidth),
          ],
        ),

我希望父滚动在超出页面时停止并启动子滚动

Answer 1

您可以使用 Slivers 来实现此目的，请查看此文档。

示例：

  body: CustomScrollView(
    slivers: [
      const SliverAppBar(
        expandedHeight: 200,
        flexibleSpace: FlexibleSpaceBar(title: Text('Your Content')),
        centerTitle: true,
        backgroundColor: Colors.blue,
      ),
      SliverList.builder(
        itemCount: 50,
        itemBuilder: (context, index) => Container(
          height: 55,
          color: Colors.purple,
          margin: const EdgeInsets.all(15),
        ),
      ),
    ],
  )