PageView：禁用默认滚动并用 Tap 事件替换它

Question

如果我有

PageView

，如何禁用默认滚动行为（滑动）并使其通过点击按钮来滚动下一个项目？

Answer 1

要禁用滑动，您可以设置：

PageView(physics: const NeverScrollableScrollPhysics())

Answer 2

所以我尝试如下解决，如果有人有更好的解决方案，请与我们分享。

让按钮转到

PageView

中的下一个项目：

将

PageController

添加到您的

PageView

中，并使用

animateTo

或

jumpTo

方法在用户按下按钮时转到所需的项目。我已将当前视图的整个宽度设置为偏移量，以便成功过渡到下一个项目。

onPressed: () {
        c.animateTo(MediaQuery
            .of(context)
            .size
            .width, duration: new Duration(seconds: 1),
            curve: Curves.easeIn);
      }

 

禁用默认的滑动行为：

我所做的就是将我的

PageView

包裹在

IgnorePointer

中以忽略任何用户交互，我真的不喜欢这个解决方案，它在这个例子中可能工作得很好，但是，在其他情况下我可能希望用户与当前显示页面中的单个小部件交互。

这是我的示例代码：

class FirstPage extends StatefulWidget {
  @override
  _FirstPageState createState() => new _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
  ScrollController c;

  @override
  void initState() {
    super.initState();
    c = new PageController();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      floatingActionButton: new Row(
        mainAxisAlignment: MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.end,

        children: <Widget>[
          new FloatingActionButton(
              child: new Icon(Icons.navigate_before), onPressed: () {
            //c.animateTo(MediaQuery.of(context).size.width, duration: new Duration(seconds: 1), curve: Curves.easeIn);
            c.jumpTo(0.0);
          }),
          SizedBox(width: 15.0,),
          new FloatingActionButton(
              child: new Icon(Icons.navigate_next), onPressed: () {
            c.animateTo(MediaQuery
                .of(context)
                .size
                .width, duration: new Duration(seconds: 1),
                curve: Curves.easeIn);
          }),
        ],),
      appBar: new AppBar(title: new Text("First Page")),
      body: new IgnorePointer(child: new PageView(
        controller: c,
        children: <Widget>[
          new Column (
              children: <Widget>[new Container (child: new Text("First Item"))
              ]),
          new Container (child: new Text("Second Item")),
        ],
      ),),
    );
  }
}

欢迎对此解决方案提出任何建议或修改。

Answer 3

停止滚动的最佳方法是更改页面视图的物理参数

如果 PageView 处于开始或结束使用状态，则停止滚动超过边缘

physics: ClampingScrollPhysics()

要完全停止滚动，请使用

physics: NeverScrollableScrollPhysics()

Answer 4

要禁用手势滑动，请将以下属性添加到您的 PageView：

PageView(physics:new NeverScrollableScrollPhysics())

要导航到 PageView 中的下一页/小部件，请将以下代码添加到按钮的 onPressed 属性中：

_pageController.nextPage(
     duration: Duration(milliseconds: 1000),
     curve: Curves.easeIn
);

Answer 5

附加说明可能对某些人有帮助。

如果其中一个页面中有一个已停止对手势做出反应的动态 GoogleMap，则使用 PageView(physicals:new NeverScrollableScrollPhysics()) 非常有用。看来 PageView 优先并覆盖地图。

添加 NeverScrollablePhysics() 允许地图再次对手势做出反应。

谢谢