flutter实现底部导航栏切换

本文实例为大家分享了flutter实现底部导航栏切换的具体代码，供大家参考，具体内容如下思路：MaterialApp是提供了bottomnavigationbar的，可以使用，这个已经提供了的widg...

本文实例为大家分享了flutter实现底部导航栏切换的具体代码，供大家参考，具体内容如下

思路：MaterialApp是提供了bottomnavigationbar的，可以使用，这个已经提供了的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],
   bottomNavijsgationBar: new BottomNavigationBar(
    items: [
     new BottomNavigationBarItem(
      icon: new Icon(Icons.home),
      label:"Home"
     ),
     new Bhttp://www.cppcns.comottomNavigationBarItem(
       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"),
   ),
  );
 }

}

最终效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。