flutter實現(xiàn)底部導航欄切換

更新時間：2022年07月28日 14:03:10 作者：派大星?

這篇文章主要為大家詳細介紹了flutter實現(xiàn)底部導航欄切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了flutter實現(xiàn)底部導航欄切換的具體代碼，供大家參考，具體內(nèi)容如下

思路：MaterialApp是提供了bottomnavigationbar的，可以使用，這個已經(jīng)提供了的widget，再利用每次點擊tab的時候使用set state方法來更新屏幕，切換中間的body的widget；
main文件：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app1/MyBottomNavigationBar.dart';

void main(){
? runApp(new MyApp());
}
class MyApp extends StatelessWidget{
? @override
? Widget build(BuildContext context) {
? ? // TODO: implement build
? ? // throw UnimplementedError();
? ? return new MaterialApp(
? ? ? title:" MyNavigationBar",
? ? ? home: new MyBottomNavigationBar(),
? ? );
? }

}

MyBottomNavigationBar()：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app1/pages/AddScreen.dart';
import 'package:flutter_app1/pages/HomeScreen.dart';
import 'package:flutter_app1/pages/PersonScreen.dart';

class MyBottomNavigationBar extends StatefulWidget{
? @override
? MyNavigationBarState createState() {
? ? // TODO: implement createState
? ? // throw UnimplementedError();
? ? return new MyNavigationBarState();
? }

}
class MyNavigationBarState extends State<MyBottomNavigationBar>{
?List<Widget> pagesList=[];
?int cunrrentIndex=0;

?@override
? void initState() {
? ?pagesList=pagesList..add(new HomeScreen())
? ? ? ?..add(new AddScreen())
? ? ? ?..add(new PersonScreen());
? }

? @override
? Widget build(BuildContext context) {
? ? // TODO: implement build
? ? // throw UnimplementedError();
? ? return new Scaffold(
? ? ? appBar: new AppBar(
? ? ? ? title: new Text("MyNavigationBar"),
? ? ? ),
? ? ? body: pagesList[cunrrentIndex],
? ? ? bottomNavigationBar: new BottomNavigationBar(
? ? ? ? items: [
? ? ? ? ? new BottomNavigationBarItem(
? ? ? ? ? ? icon: new Icon(Icons.home),
? ? ? ? ? ? label:"Home"
? ? ? ? ? ),
? ? ? ? ? new BottomNavigationBarItem(
? ? ? ? ? ? ? icon: new Icon(Icons.add),
? ? ? ? ? ? ? label:"Add"
? ? ? ? ? ),
? ? ? ? ? new BottomNavigationBarItem(
? ? ? ? ? ? ? icon: new Icon(Icons.person),
? ? ? ? ? ? ? label:"Person"
? ? ? ? ? )
? ? ? ? ],
? ? ? ? onTap:(index){
? ? ? ? ? setState(() {
? ? ? ? ? ? cunrrentIndex=index;
? ? ? ? ? });
? ? ? ? },
? ? ? ? currentIndex: cunrrentIndex,
? ? ? )
? ? );
? }

}

addScreen：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class AddScreen extends StatelessWidget{
? @override
? Widget build(BuildContext context) {
? ? // TODO: implement build
? ? // throw UnimplementedError();
? ? return new Scaffold(
? ? ? appBar: new AppBar(
? ? ? ? title: new Text("AddPage"),
? ? ? ),
? ? ? body: new Center(
? ? ? ? child: new Text("Add"),
? ? ? ),
? ? );
? }

}

HomeScreen

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget{
? @override
? Widget build(BuildContext context) {
? ? // TODO: implement build
? ? // throw UnimplementedError();
? ? return new Scaffold(
? ? ? appBar: new AppBar(
? ? ? ? title: new Text("HomePage"),
? ? ? ),
? ? ? body: new Center(
? ? ? ? child:Image.asset("images/cat.png"),
? ? ? ),
? ? );
? }

}

PersonScreen ：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class PersonScreen extends StatelessWidget{
? @override
? Widget build(BuildContext context) {
? ? // TODO: implement build
? ? // throw UnimplementedError();
? ? return new Scaffold(
? ? ? appBar: new AppBar(
? ? ? ? title: new Text("PersonPage"),
? ? ? ),
? ? ? body: new Center(
? ? ? ? child: new Text("Person"),
? ? ? ),
? ? );
? }

}

最終效果：