首页 文章

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

提问于
浏览 次
0

嵌套滚动？

我在 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');
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}
dart flutter

1 回答

  • 0

    我认为你想要实现的目标并非不可能，但需要大量的学习和关心 .

    我一直试图使用几个 NotificationListener<ScrollNotification> 来根据卷轴的位置调整反应，但没有得到任何结果 .

    查看Gallery App中的Animation示例 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,
            ),
          ),
        ],
      ),
    );
  }
}
    回复于

相关问题