Flutter底部導(dǎo)航欄的實(shí)現(xiàn)方式
本文實(shí)例為大家分享了Flutter底部導(dǎo)航欄的實(shí)現(xiàn)代碼,供大家參考,具體內(nèi)容如下
老規(guī)格,先看圖:
程序主結(jié)構(gòu)如下:
1.在程序主入口文件main.dart添加如下代碼
import 'package:flutter/material.dart'; import 'bottom_navigation.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData.light(), home: BottomNavigationWidget(), ); } }
2.創(chuàng)建4個(gè)界面,home_page.dart、constant_page.dart、find_page.dart、my_page.dart
home_page.dart
import 'package:flutter/material.dart'; class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('HomePage'),), body: Center( child: Text('這是首頁(yè)'), ), ); } }
constant_page.dart
import 'package:flutter/material.dart'; class ConstantPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('ConstantPage'),), body: Center( child: Text('這是聯(lián)系人'), ), ); } }
find_page.dart
import 'package:flutter/material.dart'; class FindPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('FindPage'),), body: Center( child: Text('這是發(fā)現(xiàn)'), ), ); } }
my_page.dart
import 'package:flutter/material.dart'; class MyPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('MyPage'),), body: Center( child: Text('這是我的'), ), ); } }
3.創(chuàng)建動(dòng)態(tài)組件BottomNavigationWidget,新建bottom_navigation.dart
import 'package:flutter/material.dart'; import 'pages/home_page.dart'; import 'pages/constant_page.dart'; import 'pages/find_page.dart'; import 'pages/my_page.dart'; class BottomNavigationWidget extends StatefulWidget { @override _BottomNavigationWidgetState createState() => new _BottomNavigationWidgetState(); } class _BottomNavigationWidgetState extends State<BottomNavigationWidget> { final List<Widget> list = List(); int _currentIndex = 0; @override void initState() { list ..add(HomePage()) ..add(ConstantPage()) ..add(FindPage()) ..add(MyPage()); super.initState(); } @override Widget build(BuildContext context) { return Scaffold( body: list[_currentIndex], bottomNavigationBar: BottomNavigationBar( currentIndex: _currentIndex, onTap: (int index){ setState(() { _currentIndex = index; }); }, type: BottomNavigationBarType.fixed, items: [ BottomNavigationBarItem( icon: Icon(Icons.home,color: Colors.blue,), title: Text('首頁(yè)',style: TextStyle(color: Colors.blue)) ), BottomNavigationBarItem( icon: Icon(Icons.contacts,color: Colors.blue,), title: Text('聯(lián)系',style: TextStyle(color: Colors.blue)) ), BottomNavigationBarItem( icon: Icon(Icons.find_in_page,color: Colors.blue,), title: Text('發(fā)現(xiàn)',style: TextStyle(color: Colors.blue)) ), BottomNavigationBarItem( icon: Icon(Icons.menu,color: Colors.blue,), title: Text('我的',style: TextStyle(color: Colors.blue)) ), ] ), ); } }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(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)航欄
- Flutter實(shí)現(xiàn)底部導(dǎo)航欄創(chuàng)建詳解
- flutter BottomAppBar實(shí)現(xiàn)不規(guī)則底部導(dǎo)航欄
- Flutter實(shí)現(xiàn)底部導(dǎo)航欄
- Flutter實(shí)現(xiàn)底部導(dǎo)航欄效果
- Flutter自定義底部導(dǎo)航欄的方法
相關(guān)文章
基于RxJava框架實(shí)現(xiàn)獲取驗(yàn)證碼的輔助類(lèi)
這篇文章主要為大家詳細(xì)介紹了基于RxJava框架實(shí)現(xiàn)獲取驗(yàn)證碼的輔助類(lèi),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-06-06Android實(shí)現(xiàn)沉浸式狀態(tài)欄功能
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)沉浸式狀態(tài)欄功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10詳解Android中的沉浸式狀態(tài)欄效果實(shí)例
本篇文章主要介紹了Android中的沉浸式狀態(tài)欄效果,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12Android之IphoneTreeView帶組指示器的ExpandableListView效果
在正在顯示的最上面的組的標(biāo)簽位置添加一個(gè)和組視圖完全一樣的視圖,作為組標(biāo)簽。這個(gè)標(biāo)簽的位置要隨著列表的滑動(dòng)不斷變化,以保持總是顯示在最上方,并且該消失的時(shí)候就消失2013-06-06Android筆記之:深入ViewStub的應(yīng)用
本篇文章是對(duì)Android中ViewStub的應(yīng)用進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-05-05Android?PopUpWindow實(shí)現(xiàn)卡片式彈窗
大家好,本篇文章主要講的是Android?PopUpWindow實(shí)現(xiàn)卡片式彈窗,感興趣的同學(xué)趕快來(lái)看一看吧,對(duì)你有幫助的話記得收藏一下2022-01-01Android控制閃光燈的方法(打開(kāi)與關(guān)閉)
這篇文章主要介紹了Android控制閃光燈的方法,可實(shí)現(xiàn)閃光燈打開(kāi)與關(guān)閉的效果,涉及Android操作Camera拍照閃光燈的相關(guān)技巧,需要的朋友可以參考下2016-01-01Android 實(shí)現(xiàn)滑動(dòng)方法總結(jié)
這篇文章主要介紹了Android 實(shí)現(xiàn)滑動(dòng)方法總結(jié)的相關(guān)資料,需要的朋友可以參考下2017-07-07在Android中訪問(wèn)WebService接口的方法
最近公司有個(gè)項(xiàng)目需要從Android平臺(tái)訪問(wèn)WebService接口,實(shí)現(xiàn)向發(fā)布的函數(shù)傳遞對(duì)象。在網(wǎng)上找了一些資料,發(fā)現(xiàn)使用ksoap2可以調(diào)用WebService傳遞對(duì)象。2013-05-05