当子列表视图在颤动中结束时，有没有办法滚动父列表视图？

Question

假设我有一个可滚动页面，在该页面内我有另一个可滚动列表视图（垂直），所以我希望当子列表视图到达末尾时，可滚动页面开始移动到它的末尾。此外，当子列表视图到达顶部时，可滚动页面开始移动到它的顶部。怎么做到的？

这是我的代码

 Widget FreshProductsShow(double pageHeight, double pageWidth) {
    return Container(
      height: pageHeight / 1.3,
      width: pageWidth,
      child: ListView.builder(
        itemCount: 10,
        itemBuilder: (context, index) {
          return Card(
            child: Container(
              width: pageWidth,
              // height: pageHeight / 7,
              decoration: BoxDecoration(
                  color: Colors.white, borderRadius: BorderRadius.circular(10)),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                textDirection: TextDirection.rtl,
                children: [
                  Image.asset(
                    "images/peper.png",
                    width: pageWidth / 4,
                    height: pageHeight / 8,
                  ),
                  Padding(
                    padding: EdgeInsets.only(left: pageWidth / 6.3),
                    child: Column(
                      children: [
                        Padding(
                          padding: EdgeInsets.only(
                              left: pageWidth / 10, top: pageHeight / 45),
                          child: AutoSizeText(
                            "peper",
                            style: TextStyle(
                                fontSize: pageHeight / 48,
                                fontWeight: FontWeight.bold,
                                color: Color(0xff54595F)),
                          ),
                        ),

                      ],
                    ),
                  )
                ],
              ),
              alignment: Alignment.centerRight,
            ),
            elevation: 5,
          );
        },
        scrollDirection: Axis.vertical,
      ),
    );
  }

Answer 1

要找到滚动位置，您必须使用 Scroll Notification Listener NotificationListener，并使用 ScrollController 我们可以控制每个 Scrollable Widget 的滚动位置。

这是您的函数转换为 StatefulWidget 的函数，如果我理解正确的话，实现的逻辑是：

class FreshProductsShow extends StatefulWidget {
  const FreshProductsShow(
      {Key? key, required this.pageHeight, required this.pageWidth})
      : super(key: key);
  final double? pageHeight;
  final double? pageWidth;
  @override
  _FreshProductsShowState createState() => _FreshProductsShowState();
}

class _FreshProductsShowState extends State<FreshProductsShow> {
  ScrollController _childScrollController = ScrollController();
  ScrollController _parentScrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      controller: _parentScrollController,
      child: Column(
        children: [
          Container(
            color: Colors.red,
            height: 300,
          ),
          Container(
            height: widget.pageHeight! / 1.3,
            width: widget.pageWidth,
            child: NotificationListener(
              onNotification: (ScrollNotification notification) {
                if (notification is ScrollUpdateNotification) {
                  if (notification.metrics.pixels ==
                      notification.metrics.maxScrollExtent) {
                    debugPrint('Reached the bottom');
                    _parentScrollController.animateTo(
                        _parentScrollController.position.maxScrollExtent,
                        duration: Duration(seconds: 1),
                        curve: Curves.easeIn);
                  } else if (notification.metrics.pixels ==
                      notification.metrics.minScrollExtent) {
                    debugPrint('Reached the top');
                    _parentScrollController.animateTo(
                        _parentScrollController.position.minScrollExtent,
                        duration: Duration(seconds: 1),
                        curve: Curves.easeIn);
                  }
                }
                return true;
              },
              child: ListView.builder(
                controller: _childScrollController,
                itemCount: 10,
                itemBuilder: (context, index) {
                  return Card(
                    child: Container(
                      width: widget.pageWidth,
                      // height: pageHeight / 7,
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(10)),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        textDirection: TextDirection.rtl,
                        children: [
                          Image.asset(
                            "images/peper.png",
                            width: widget.pageWidth! / 4,
                            height: widget.pageHeight! / 8,
                          ),
                          Padding(
                            padding:
                                EdgeInsets.only(left: widget.pageWidth! / 6.3),
                            child: Column(
                              children: [
                                Padding(
                                  padding: EdgeInsets.only(
                                      left: widget.pageWidth! / 10,
                                      top: widget.pageHeight! / 45),
                                  child: Text(
                                    "peper",
                                    style: TextStyle(
                                        fontSize: widget.pageHeight! / 48,
                                        fontWeight: FontWeight.bold,
                                        color: Color(0xff54595F)),
                                  ),
                                ),
                              ],
                            ),
                          )
                        ],
                      ),
                      alignment: Alignment.centerRight,
                    ),
                    elevation: 5,
                  );
                },
                scrollDirection: Axis.vertical,
              ),
            ),
          ),
          Container(
            color: Colors.red,
            height: 300,
          ),
        ],
      ),
    );
  }
}

当子列表视图在颤动中结束时，有没有办法滚动父列表视图？

Is there any way to scroll parent listview when the child listview reached end in flutter?

android

listview

scroll

dart

flutter