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

