Question

嵌套滚动？

我想在PageView中有三个垂直页面，可以在它们之间进行切换。这些页面由可滚动的ListView组成。

当页面处于焦点位置时，显示的列表应该可以垂直滚动，但是当列表滚动到任一端时，我都希望pageView滚动继承滚动行为并处理将页面翻转到下一页（例如网页）带有可滚动元素）。

下面带有滚动列表的示例。如果禁用列表滚动，则页面翻转有效。我怎样才能同时工作？

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: VerticalPageView(),
    );
  }
}

class VerticalPageView extends StatelessWidget {
  VerticalPageView({Key key}) : super(key: key);

  final PageController pageController = PageController();
  final ScrollController scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: PageView(
          controller: pageController,
          pageSnapping: true,
          scrollDirection: Axis.vertical,
          children: <Widget>[
            Container(
              color: Colors.pinkAccent,
              child: ListView.builder(
                controller: scrollController,
                itemCount: 100,
                physics: ClampingScrollPhysics(),
                itemBuilder: (context, index) {
                  return Text('page 0 item $index');
                },
              ),
            ),
            Container(
              color: Colors.lightBlue,
              child: ListView.builder(
                controller: scrollController,
                itemCount: 100,
                physics: ClampingScrollPhysics(),
                itemBuilder: (context, index) {
                  return Text('page 1 item $index');
                },
              ),
            ),
            Container(
              color: Colors.lightGreen,
              child: ListView.builder(
                controller: scrollController,
                itemCount: 100,
                physics: ClampingScrollPhysics(),
                itemBuilder: (context, index) {
                  return Text('page 2 item $index');
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

我认为您要实现的目标并非不可能，但需要大量的学习和护理。

我一直在尝试使用多个NotificationListener<ScrollNotification>来调整响应，具体取决于滚动条的位置，但没有到达任何地方。

在Gallery App中查看“动画”示例home.dart文件。在这方面充满了见识。

这种方法的问题基本上就是您所说的。当您以编程方式禁用到达列表末尾的滚动以启用页面滚动时，则可以切换到另一页面，但无法再向其他方向滚动列表。

因此，您可以滚动列表或滚动页面，但不能同时滚动页面。

也许您可以在所有内容上方添加GestureDetector()并检查每次拖动更新，以下情况是什么，以便相应地配置不同的滚动条。

无论如何，如果对您有帮助，我在这里让您使用CustomScrollView和SliverList的替代解决方案。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: VerticalPageView(),
    );
  }
}

class VerticalPageView extends StatelessWidget {
  final ScrollController _scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        controller: _scrollController,
        slivers: <Widget>[
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Container(
                  color: Colors.pinkAccent,
                  child: Text('page 0 item $index'),
                );
              },
              childCount: 100,
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Container(
                  color: Colors.lightBlue,
                  child: Text('page 1 item $index'),
                );
              },
              childCount: 100,
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Container(
                  color: Colors.lightGreen,
                  child: Text('page 2 item $index'),
                );
              },
              childCount: 100,
            ),
          ),
        ],
      ),
    );
  }
}

当子ListView达到滚动限制时使PageView页面滚动-嵌套滚动吗？

1 个答案: