web-dev-qa-db-fra.com

Flutter Drawer Widget - Modifier le contenu de Scaffold.body

Lors de l’utilisation de Flutter Scaffold.Drawer - est-il possible de faire en sorte que les liens du tiroir modifient le contenu (Scaffold.body) de la page? De la même manière que des liens dans le tiroir de navigation modifient un fragment dans Android.

dartflutter
4
Martin

Vous pouvez simplement changer la state du contenu qui vous intéresse en interagissant avec vos objets Drawer comme ceci:

 enter image description here

Voici le code approprié pour cet exemple:

class TestPage extends StatefulWidget {
  @override
  _TestPageState createState() => new _TestPageState();
}

class _TestPageState extends State<TestPage> {
  String text = "Initial Text";
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        drawer: new Drawer(
          child: new ListView(
            children: <Widget>[
              new Container(child: new DrawerHeader(child: new Container())),
              new Container (
                child: new Column(
                    children: <Widget>[
                      new ListTile(leading: new Icon(Icons.info),
                          onTap:(){
                              setState((){
                                text = "info pressed";
                              });
                          }
                      ),
                      new ListTile(leading: new Icon(Icons.save),
                          onTap:(){
                            setState((){
                              text = "save pressed";
                            });
                          }
                      ),
                      new ListTile(leading: new Icon(Icons.settings),
                          onTap:(){
                            setState((){
                              text = "settings pressed";
                            });
                          }
                      ),

                    ]
                ),
              )
            ],
          ),
        ),
        appBar: new AppBar(title: new Text("Test Page"),),
        body: new Center(child: new Text((text)),
        ));
  }
}
11
aziza

C'est une très bonne solution d'Aziza! Je vous remercie. Ça marche! J'aimerais juste ajouter que cela peut aussi fonctionner pour tout le corps en le remplaçant par un état de widget:

...
class _TestPageState extends State<TestPage> {
  String text = "Initial Text";
  Widget widgetForBody = SomeWidgetFromClass();
  ...
  ...
        children: <Widget>[
          new Container(child: new DrawerHeader(child: new Container())),
          new Container (
            child: new Column(
                children: <Widget>[
                  new ListTile(leading: new Icon(Icons.info),
                      onTap:(){
                          setState((){
                            widgetForBody = AnotherWidgetFromClass();
                          });
                      }
                  ),
                  new ListTile(leading: new Icon(Icons.save),
                      onTap:(){
                        setState((){
                          widgetForBody = YetAnotherWidgetFromClass();
                        });
                      }
                  ),
...
2
brightknight08

Vous pouvez utiliser ceci pour le corps d'échafaudage: 

        body: _getDrawerItemWidget(_selectedDrawerIndex));

puis dans la classe principale ou dans la classe d'état, faites comme ceci: 

class HomePageState extends State<HomePage> {
  int _selectedDrawerIndex = 0;

  _getDrawerItemWidget(int pos) {
    switch (pos) {
      case 0:
        return new MainFragment();
      case 1:
          return new CardMgmt();
}
}
}

CardMgmt et les autres classes de Switch Case ont leur propre méthode de génération qui renverra un widget qui sera placé dans le corps de votre échafaud. En outre, ils peuvent être dans le même fichier Dart ou même un autre fichier.
Mais j'ai un autre problème:
Que faire si, au lieu d’articles de tiroir, nous avons un bouton dans une autre classe comme CardMgmt et nous voulons qu’il renvoie un widget et une page de mise à jour?

0
Mohsen Emami