Flutter自定義底部導(dǎo)航欄的方法
本文實(shí)例為大家分享了Flutter自定義底部導(dǎo)航欄的具體代碼,供大家參考,具體內(nèi)容如下
文件結(jié)構(gòu):
main.dart
import 'package:flutter/material.dart'; import 'pages/tabs.dart'; ? void main() => runApp(new MyApp()); ? class MyApp extends StatelessWidget { ? @override ? Widget build(BuildContext context) { ? ? return MaterialApp( ? ? ? home: Tabs(), ? ? ); ? } }
tabs.dart
import 'package:flutter/material.dart'; import 'tabs/home.dart'; import 'tabs/category.dart'; import 'tabs/user.dart'; class Tabs extends StatefulWidget { ? Tabs({Key key}) : super(key: key); ? @override ? _TabsState createState() => _TabsState(); } ? class _TabsState extends State<Tabs> { ? int _currentIndex = 0; ? ? List _pageList=[ ? ? HomePage(), ? ? CategoryPage(), ? ? UserPage(), ? ]; ? ? ? @override ? Widget build(BuildContext context) { ? ? return Scaffold( ? ? ? appBar: AppBar( ? ? ? ? title: Text('自定義底部導(dǎo)航'), ? ? ? ), ? ? ? body: this._pageList[this._currentIndex], ? ? ? bottomNavigationBar: BottomNavigationBar( ? ? ? ? currentIndex: this._currentIndex, ? ? ? ? onTap: (int index) { ? ? ? ? ? setState(() { ? ? ? ? ? ? this._currentIndex = index; ? ? ? ? ? }); ? ? ? ? }, ? ? ? ? items: [ ? ? ? ? ? BottomNavigationBarItem( ? ? ? ? ? ? icon: Icon(Icons.home), ? ? ? ? ? ? title: Text('首頁'), ? ? ? ? ? ), ? ? ? ? ? BottomNavigationBarItem( ? ? ? ? ? ? icon: Icon(Icons.category), ? ? ? ? ? ? title: Text('分類'), ? ? ? ? ? ), ? ? ? ? ? BottomNavigationBarItem( ? ? ? ? ? ? icon: Icon(Icons.supervised_user_circle), ? ? ? ? ? ? title: Text('會(huì)員'), ? ? ? ? ? ), ? ? ? ? ], ? ? ? ), ? ? ); ? } }
home.dart
import 'package:flutter/material.dart'; ? class HomePage extends StatefulWidget { ? HomePage({Key key}) : super(key: key); ? ? @override ? _HomePageState createState() => _HomePageState(); } ? class _HomePageState extends State<HomePage> { ? @override ? Widget build(BuildContext context) { ? ? return Text('首頁'); ? } }
category.dart
import 'package:flutter/material.dart'; ? class CategoryPage extends StatefulWidget { ? CategoryPage({Key key}) : super(key: key); ? ? @override ? _CategoryPageState createState() => _CategoryPageState(); } ? class _CategoryPageState extends State<CategoryPage> { ? @override ? Widget build(BuildContext context) { ? ? return Text('分類'); ? } }
user.dart
import 'package:flutter/material.dart'; ? class UserPage extends StatefulWidget { ? UserPage({Key key}) : super(key: key); ? ? @override ? _UserPageState createState() => _UserPageState(); } ? class _UserPageState extends State<UserPage> { ? @override ? Widget build(BuildContext context) { ? ? return Text('會(huì)員'); ? } }
效果展示:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android自定義ViewGroup嵌套與交互實(shí)現(xiàn)幕布全屏滾動(dòng)
這篇文章主要為大家介紹了Android自定義ViewGroup嵌套與交互實(shí)現(xiàn)幕布全屏滾動(dòng)效果示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01詳解Android應(yīng)用中DialogFragment的基本用法
Android App中建議使用DialogFragment作為對話框的容器,DialogFragment類提供了創(chuàng)建對話框并管理其外觀需要的所有控件,本文主要內(nèi)容便為詳解Android應(yīng)用中DialogFragment的基本用法,而不再需要調(diào)用Dialog的方法需要的朋友可以參考下2016-05-05Android this與Activity.this的區(qū)別
這篇文章主要介紹了 Android this與Activity.this的區(qū)別的相關(guān)資料,需要的朋友可以參考下2016-09-09ContentProvider客戶端處理provider邏輯分析
這篇文章主要為大家介紹了ContentProvider客戶端處理provider邏輯分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10Android自定義View 實(shí)現(xiàn)鬧鐘喚起播放鬧鐘鈴聲功能
這篇文章主要介紹了Android自定義View 實(shí)現(xiàn)鬧鐘喚起播放鬧鐘鈴聲的效果,本文通過實(shí)例代碼給大家詳解,需要的朋友可以參考下2016-12-12android studio 3.0 service項(xiàng)目背景音樂實(shí)現(xiàn)
這篇文章主要介紹了android studio 3.0中service項(xiàng)目實(shí)現(xiàn)插入背景音樂的方法。2017-11-11Android基于ViewPager實(shí)現(xiàn)類似微信頁面切換效果
這篇文章主要介紹了Android基于ViewPager實(shí)現(xiàn)類似微信頁面切換效果,通過Fragment適配器實(shí)現(xiàn)頁面切換效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-05-05Android實(shí)現(xiàn)快遞單號查詢快遞狀態(tài)信息
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)快遞單號查詢快遞狀態(tài)信息,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-05-05