PageView : Désactiver le défilement par défaut et le remplacer par l'événement Tap.

Question

Si j'ai un PageView Comment puis-je désactiver le comportement de défilement par défaut (balayage) et faire en sorte que l'élément suivant défile à l'écran en appuyant sur un bouton à la place ?

Answer 1

Pour désactiver le balayage, vous pouvez régler :

PageView(physics:new NeverScrollableScrollPhysics())

Answer 2

J'ai donc essayé de résoudre ce problème de la manière suivante, et si quelqu'un a une meilleure solution, merci de la partager avec nous.

Faire en sorte qu'un bouton permette de passer à l'élément suivant de la liste PageView :

Ajouter un PageController à votre PageView et les méthodes animateTo o jumpTo pour aller à l'élément souhaité lorsque l'utilisateur appuie sur un bouton. J'ai fait en sorte que toute la largeur de la vue actuelle soit le décalage afin que la transition vers l'élément suivant se fasse correctement.

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

Désactiver le comportement de glissement par défaut :

Tout ce que j'ai fait, c'est d'emballer mon PageView à l'intérieur de IgnorePointer pour ignorer toute interaction avec l'utilisateur, je n'aime vraiment pas cette solution, elle peut fonctionner correctement dans cet exemple, mais dans d'autres situations, je pourrais vouloir que l'utilisateur interagisse avec un seul widget dans la page affichée.

Voici mon exemple de 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);
          }),
          new Container(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")),
        ],
      ),),
    );
  }
}

Toute suggestion ou modification de cette solution est la bienvenue.