PageView: 禁用默认滚动，并将其替换为 Tap 事件

So I have tried to figure this out as follows, and if anyone has a better solution, please share it with us.

Make a button go to the next item in the PageView:

Add a PageController to your PageView, and the methods animateTo or jumpTo to go to the desired item when user presses a button. I have made it such that the entire width of the current view is the offset so the transition to the next item happens successfully.

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


 

Disable the default swiping behavior:

All I did was to wrap up my PageView inside IgnorePointer to ignore any user interaction, I really do not like this solution, it may be working fine in this example, however, in other situations I might want the user to interact with a single widget within the current displayed page.

This is my sample code:

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")),
],
),),
);
}
}

Any suggestions or modifications on this solution are welcomed.

To disable swiping you can set:

PageView(physics: NeverScrollableScrollPhysics())

An additional note that may help some people.

Using PageView(physics:new NeverScrollableScrollPhysics()) is very useful if you have a Dyanmic GoogleMap in one of the pages that that has stopped reacting to gestures. It seems the PageView takes priority and overrides the map.

Adding NeverScrollablePhysics() allows the map to react to gestures again.

thanks

The best way to stop scrolling is by changing the physics parameter of the page view

To stop scrolling past edges if the PageView is at the start or end use

physics: ClampingScrollPhysics()

To stop scrolling altogether use

physics: NeverScrollableScrollPhysics()

To disable swiping by Gestures, add following property to your PageView:

PageView(physics:new NeverScrollableScrollPhysics())

To navigate to next page/widget in PageView, add following code to your button's onPressed attribute:

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