flutter實現(xiàn)底部導航欄
本文實例為大家分享了flutter實現(xiàn)底部導航欄的具體代碼,供大家參考,具體內容如下
一.flutter底部導航欄常用組件BottomNavigationBar 屬性介紹
BottomNavigationBar({ ? ? Key? key, ? ? required this.items, //必填項,設置各個按鈕 ? ? this.onTap, //點擊事件 ? ? this.currentIndex = 0, //當前選中item下標 ? ? this.elevation, //控制陰影高度 ? ? this.type, //BottomNavigationBarType,默認 fixed,設置為 shifting 時,需要設置選中樣式,和未選中樣式,提供一個特殊動畫 ? ? Color? fixedColor, //選中 item 填充色 ? ? this.backgroundColor, //整個BottomNavigationBar 背景色 ? ? this.iconSize = 24.0, //圖標大小 ? ? Color? selectedItemColor, //選中title填充色 ? ? this.unselectedItemColor, //未選中title填充色 ? ? this.selectedIconTheme, //選中item圖標主題 ? ? this.unselectedIconTheme, //未選中item圖標主題 ? ? this.selectedFontSize = 14.0, //選中title字體大小 ? ? this.unselectedFontSize = 12.0, //未選中title字體大小 ? ? this.selectedLabelStyle, //選中title樣式 TextStyle ? ? this.unselectedLabelStyle, //未選中title樣式 TextStyle ? ? this.showSelectedLabels, //是否展示選中title,默認為true ? ? this.showUnselectedLabels, //是否展示未選中title,默認為true ? ? this.mouseCursor, //鼠標懸停 ? ? this.enableFeedback, ? ? this.landscapeLayout, ? })?
二.BottomNavigationBar的具體實現(xiàn)
1.創(chuàng)建四個頁面,分別為,首頁,通訊錄,發(fā)現(xiàn)和我的,這里以homepage.dart為例,其他頁面只需要修改對應內容顯示即可,eg:
import 'package:flutter/material.dart'; ? class HomePage extends StatefulWidget{ ? ? const HomePage({Key? key}) : super(key: key); ? ? @override ? State<StatefulWidget> createState()=>_HomePageState(); ? } ? class _HomePageState extends State<HomePage>{ ? ? @override ? Widget build(BuildContext context) { ? ? return const Center( ? ? ? child: Text( ? ? ? ? "主頁", ? ? ? ? style:TextStyle( ? ? ? ? ? color: Colors.black, ? ? ? ? ? fontSize: 20 ? ? ? ? ), ? ? ? ), ? ? ); ? } ? }
2.添加BottomNavigationBar,需要在主頁中實現(xiàn)BottomNavigationBar,eg:
import 'package:flutter/material.dart'; import 'findpage.dart'; import 'mypage.dart'; import 'contactpage.dart'; import 'homepage.dart'; ? class MainPage extends StatefulWidget{ ? const MainPage({Key? key}) : super(key: key); ? ? @override ? State<StatefulWidget> createState()=>_MainPageState(); } ? class _MainPageState extends State<MainPage>{ ? ? var allPages=[HomePage(),ContactPage(),FindPage(),MyPage()]; ? var currentIndex=0; ? ? ? @override ? Widget build(BuildContext context) { ? ? return Scaffold( ? ? ? appBar: AppBar( ? ? ? ? title: Text( ? ? ? ? ? "導航欄", ? ? ? ? ? style: TextStyle( ? ? ? ? ? ? color: Colors.black, ? ? ? ? ? ? fontSize: 30, ? ? ? ? ? ), ? ? ? ? ? textAlign: TextAlign.center, ? ? ? ? ), ? ? ? ), ? ? ? body: allPages[currentIndex], ? ? ? backgroundColor: Colors.green, ? ? ? bottomNavigationBar: BottomNavigationBar( ? ? ? ? currentIndex: currentIndex, ? ? ? ? type: BottomNavigationBarType.fixed, ? ? ? ? unselectedItemColor: Colors.grey, ? ? ? ? selectedItemColor: Colors.blue, ? ? ? ? /*unselectedLabelStyle:TextStyle( ? ? ? ? ? color: Colors.black ? ? ? ? ),*/ ? ? ? ? items: [ ? ? ? ? ? BottomNavigationBarItem( ? ? ? ? ? ? ? icon: Icon(Icons.home), ? ? ? ? ? ? ? label: "首頁", ? ? ? ? ? ? ? //backgroundColor:Colors.blue ? ? ? ? ? ), ? ? ? ? ? ? BottomNavigationBarItem( ? ? ? ? ? ? ? icon: Icon(Icons.person), ? ? ? ? ? ? ? label: "通訊錄", ? ? ? ? ? ? ? //backgroundColor:Colors.blue ? ? ? ? ? ), ? ? ? ? ? ? BottomNavigationBarItem( ? ? ? ? ? ? ? icon: Icon(Icons.find_in_page), ? ? ? ? ? ? ? label: "發(fā)現(xiàn)", ? ? ? ? ? ? ? //backgroundColor:Colors.blue ? ? ? ? ? ), ? ? ? ? ? ? BottomNavigationBarItem( ? ? ? ? ? ? ? icon: Icon(Icons.flip_outlined), ? ? ? ? ? ? ? label: "我的", ? ? ? ? ? ? ? //backgroundColor:Colors.blue ? ? ? ? ? ), ? ? ? ? ], ? ? ? ? ? onTap: (index){ ? ? ? ? ? setState(() { ? ? ? ? ? ? print("the index is :$index"); ? ? ? ? ? ? currentIndex=index; ? ? ? ? ? }); ? ? ? ? }, ? ? ? ), ? ? ); ? } }
三.實際效果展示,eg:
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Android中l(wèi)istview嵌套scrollveiw沖突的解決方法
這篇文章主要為大家詳細介紹了Android中l(wèi)istview嵌套scrollveiw沖突的解決方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01Android 游戲開發(fā)之Canvas畫布的介紹及方法
Android 游戲開發(fā)之Canvas畫布的介紹及方法,需要的朋友可以參考一下2013-06-06Android實現(xiàn)語音數(shù)據(jù)實時采集、播放
這篇文章主要介紹了android實現(xiàn)語音數(shù)據(jù)實時采集、播放的相關資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12Flutter有狀態(tài)組件StatefulWidget生命周期詳解
這篇文章主要為大家介紹了Flutter有狀態(tài)組件StatefulWidget生命周期詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-01-01利用Android 防止系統(tǒng)字體變化、顯示大小變化影響
這篇文章主要介紹了利用Android 防止系統(tǒng)字體變化、顯示大小變化影響方法的相關資料,需要的朋友可以參考下面文章的具體內容,希望對你有所幫助2021-10-10android截圖事件監(jiān)聽的原理與實現(xiàn)
本篇文章主要介紹了android截圖事件監(jiān)聽的原理與實現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-07-07