flutter實現(xiàn)底部導(dǎo)航欄切換
本文實例為大家分享了flutter實現(xiàn)底部導(dǎo)航欄切換的具體代碼,供大家參考,具體內(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"), ? ? ? ), ? ? ); ? } }
最終效果:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android中通過view方式獲取當前Activity的屏幕截圖實現(xiàn)方法
這篇文章主要介紹了Android中通過view方式獲取當前Activity的屏幕截圖實現(xiàn)方法,本文方法相對簡單,容易理解,需要的朋友可以參考下2014-09-09詳解Android中Service服務(wù)的基礎(chǔ)知識及編寫方法
這篇文章主要介紹了詳解Android中Service服務(wù)的基礎(chǔ)知識及編寫方法,包括Service的啟動流程及生命周期等基本內(nèi)容,需要的朋友可以參考下2016-04-04Android事件分發(fā)機制(下) View的事件處理
這篇文章主要介紹了Android事件分發(fā)機制下篇, View的事件處理的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01Android自定義密碼樣式 黑點轉(zhuǎn)換成特殊字符
這篇文章主要為大家詳細介紹了Android自定義密碼樣式的制作方法,黑點換成¥、%等特殊字符,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07Android開發(fā)必備知識 為什么說Kotlin值得一試
為什么說值得一試,這篇文章主要為大家詳細介紹了Android開發(fā)必備知識,Kotlin的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05使用Kotlin開發(fā)Android應(yīng)用教程
這篇文章主要為大家詳細介紹了使用Kotlin開發(fā)Android應(yīng)用的教程,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05Android 對話框(Dialog)大全示例(建立你自己的對話框)
android開發(fā)中,對話框的使用還是很平凡的,本篇文章介紹了Android 對話框的實例,詳細的介紹了多種對話框的方法,有興趣的可以了解一下。2016-11-11詳解Android Activity中的幾種監(jiān)聽器和實現(xiàn)方式
這篇文章主要介紹了Activity中的幾種監(jiān)聽器和實現(xiàn)方式的相關(guān)資料,幫助大家更好的理解和學(xué)習(xí)使用Android,感興趣的朋友可以了解下2021-04-04