So erstellen Sie die untere Navigationsleiste in Flutter

Blog

So erstellen Sie die untere Navigationsleiste in Flutter

So erstellen Sie die untere Navigationsleiste in Flutter

Um eine untere Navigationsleiste in Flutter hinzuzufügen, müssen Sie das Widget „Gerüst“ auf dem Bildschirm haben. Daher werden wir ein Scaffold-Widget als übergeordnetes Element unseres Bildschirms hinzufügen.



Gerüst

@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), ....

Jetzt verwenden wir die Eigenschaft ‚bottomNavigationBar‘ von Scaffold.

Wir fügen die „BottomNavigationBar“ hinzu, die eine Liste von „BottomNavigationBarItem“ benötigt.
Ich füge der Einfachheit halber 3 Registerkarten hinzu.



Registerkarten hinzufügen

bottomNavigationBar: BottomNavigationBar( items: [ BottomNavigationBarItem( icon: Icon(Icons.home), title: Text('Home'), ), BottomNavigationBarItem( icon: Icon(Icons.mail), title: Text('Messages'), ), BottomNavigationBarItem( icon: Icon(Icons.person), title: Text('Profile'), ) ], ),

Wir schreiben die onTap-Funktion für die UntenNavigationsleiste und setze den aktuellenIndex;

bottomNavigationBar: BottomNavigationBar( onTap: onTapped, currentIndex: currentTabIndex, .....

Registerkarten erstellen

Lassen Sie uns eine neue Datei erstellen und sie tab_screen.dart’ nennen. Der Einfachheit halber wird der neue Bildschirm „StatelessWidget“ erweitern und die Benutzeroberfläche hat einen Container und die Farbe des Containers wird vom Hauptbildschirm übernommen, wenn die Registerkarten zur unteren Navigationsleiste hinzugefügt werden.



Der TabScreen sieht so aus.

import 'package:flutter/material.dart'; class TabScreen extends StatelessWidget { final Color color; TabScreen(this.color); @override Widget build(BuildContext context) { return Container( color: color, ); } }

Erstellen Sie die Liste der Registerkarten und legen Sie den CurrentIndex fest

class _TabsDemoScreenState extends State { int currentTabIndex = 0; List tabs = [ TabScreen(Colors.green), TabScreen(Colors.orange), TabScreen(Colors.blue) ]; onTapped(int index) { setState(() { currentTabIndex = index; }); } ....

Legen Sie die Registerkarten fest

@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: tabs[currentTabIndex], ......

Das vollständige Beispiel

import 'package:flutter/material.dart'; import 'tab_screen.dart'; class TabsDemoScreen extends StatefulWidget { TabsDemoScreen() : super(); final String title = 'Flutter Bottom Tab demo'; @override _TabsDemoScreenState createState() => _TabsDemoScreenState(); } class _TabsDemoScreenState extends State { int currentTabIndex = 0; List tabs = [ TabScreen(Colors.green), TabScreen(Colors.orange), TabScreen(Colors.blue) ]; onTapped(int index) { setState(() { currentTabIndex = index; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: tabs[currentTabIndex], bottomNavigationBar: BottomNavigationBar( onTap: onTapped, currentIndex: currentTabIndex, items: [ BottomNavigationBarItem( icon: Icon(Icons.home), title: Text('Home'), ), BottomNavigationBarItem( icon: Icon(Icons.mail), title: Text('Messages'), ), BottomNavigationBarItem( icon: Icon(Icons.person), title: Text('Profile'), ) ], ), ); } }

Und das ist es. Bitte hinterlassen Sie unten Ihre wertvollen Kommentare.

Video-Tutorial ansehen

Danke fürs Lesen !

#flattern