Wie man eine rechte navbar im Flattern einführt?

Question

Das Flatterngerüst zeigt eine rechte Navigationsleiste, aber ich nehme an, dass es kein Rechtsnavigations-Widget gibt. Wie implementiere ich eine rechte Navbar mit Scaffold im Flattern?

Flutter Scaffold Image

Answer 1

Die Scaffold hat jetzt eine endDrawer Eigenschaft, die von rechts nach links wischt.

Hoffen, das könnte jemand helfen.

Answer 2

Wenn Sie eine richtige Bar/Menü oder Drawer in Ihrer App zeigen versuchen, ob es sich um eine permanente Ansicht oder eine vorübergehende. Ich konnte dies erreichen, indem ich ein eigenes benutzerdefiniertes Widget aus Allign, Container und Column Widgets, und mithilfe von setState zum Anzeigen oder Ausblenden der Menüleiste basierend auf Benutzerinteraktion, finden Sie in diesem einfachen Beispiel.

Mein Menü Details Widget sieht wie folgt aus:

class RightNavigationBar extends StatefulWidget { 
    @override 
    _RightNavigationBarState createState() => new _RightNavigationBarState(); 
} 

class _RightNavigationBarState extends State<RightNavigationBar> { 
    @override 
    Widget build(BuildContext context) { 
    return new Align(
     alignment: FractionalOffset.centerRight, 
     child: new Container(
     child: new Column(
      children: <Widget>[ 
      new Icon(Icons.navigate_next), 
      new Icon(Icons.close), 
      new Text ("More items..") 
      ], 
     ), 
     color: Colors.blueGrey, 
     height: 700.0, 
     width: 200.0, 
    ), 
    ); 
    } 
} 

Dann, wenn der Benutzer die Menü icon, ein Objekt meiner benutzerdefinierten RightNavigationBar Widget innerhalb setState erstellt:

class MyApp extends StatefulWidget { 
    @override 
    _MyAppState createState() => new _MyAppState(); 
} 

class _MyAppState extends State<MyApp> { 
    var _myRightBar = null; 

    @override 
    Widget build(BuildContext context) { 
    return new Scaffold(
     appBar: new AppBar(
      actions: [new IconButton(
       icon: new Icon (Icons.menu), onPressed: _showRightBar) 
      ], 
      title: new Text("Right Navigation Bar Example"), 
     ), 
     body: _myRightBar 

    ); 
    } 

    _showRightBar() { 
    setState(() { 
     _myRightBar == null 
      ? _myRightBar = new RightNavigationBar() 
      : _myRightBar = null; 
    }); 
    } 
}