web-dev-qa-db-fra.com

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

Si j'ai un PageView, comment puis-je désactiver le comportement de défilement par défaut (glisser) et faire en sorte que l'élément suivant soit défilé dans la vue en appuyant sur un bouton à la place?

dartflutter
18
aziza

Pour désactiver le balayage, vous pouvez définir:

PageView(physics:new NeverScrollableScrollPhysics())
54
Christopher Thompson

J'ai donc essayé de comprendre cela comme suit, et si quelqu'un a une meilleure solution, veuillez la partager avec nous.

Faire passer un bouton à l'élément suivant dans le PageView:

Ajoutez un PageController à votre PageView et les méthodes animateTo ou jumpTo pour accéder à 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 déroule correctement.

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

Désactivez le comportement de balayage par défaut:

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

Voici mon exemple de code:

enter image description here

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

Toutes suggestions ou modifications sur cette solution sont les bienvenues.

3
aziza