網(wǎng)站首頁 編程語言 正文
本文實(shí)例為大家分享了flutter實(shí)現(xiàn)底部導(dǎo)航欄的具體代碼,供大家參考,具體內(nèi)容如下
一.flutter底部導(dǎo)航欄常用組件BottomNavigationBar 屬性介紹
BottomNavigationBar({ ? ? Key? key, ? ? required this.items, //必填項(xiàng),設(shè)置各個(gè)按鈕 ? ? this.onTap, //點(diǎn)擊事件 ? ? this.currentIndex = 0, //當(dāng)前選中item下標(biāo) ? ? this.elevation, //控制陰影高度 ? ? this.type, //BottomNavigationBarType,默認(rèn) fixed,設(shè)置為 shifting 時(shí),需要設(shè)置選中樣式,和未選中樣式,提供一個(gè)特殊動(dòng)畫 ? ? Color? fixedColor, //選中 item 填充色 ? ? this.backgroundColor, //整個(gè)BottomNavigationBar 背景色 ? ? this.iconSize = 24.0, //圖標(biāo)大小 ? ? Color? selectedItemColor, //選中title填充色 ? ? this.unselectedItemColor, //未選中title填充色 ? ? this.selectedIconTheme, //選中item圖標(biāo)主題 ? ? this.unselectedIconTheme, //未選中item圖標(biāo)主題 ? ? this.selectedFontSize = 14.0, //選中title字體大小 ? ? this.unselectedFontSize = 12.0, //未選中title字體大小 ? ? this.selectedLabelStyle, //選中title樣式 TextStyle ? ? this.unselectedLabelStyle, //未選中title樣式 TextStyle ? ? this.showSelectedLabels, //是否展示選中title,默認(rèn)為true ? ? this.showUnselectedLabels, //是否展示未選中title,默認(rèn)為true ? ? this.mouseCursor, //鼠標(biāo)懸停 ? ? this.enableFeedback, ? ? this.landscapeLayout, ? })?
二.BottomNavigationBar的具體實(shí)現(xiàn)
1.創(chuàng)建四個(gè)頁面,分別為,首頁,通訊錄,發(fā)現(xiàn)和我的,這里以homepage.dart為例,其他頁面只需要修改對應(yīng)內(nèi)容顯示即可,eg:
import 'package:flutter/material.dart'; ? class HomePage extends StatefulWidget{ ? ? const HomePage({Key? key}) : super(key: key); ? ? @override ? StatecreateState()=>_HomePageState(); ? } ? class _HomePageState extends State { ? ? @override ? Widget build(BuildContext context) { ? ? return const Center( ? ? ? child: Text( ? ? ? ? "主頁", ? ? ? ? style:TextStyle( ? ? ? ? ? color: Colors.black, ? ? ? ? ? fontSize: 20 ? ? ? ? ), ? ? ? ), ? ? ); ? } ? }
2.添加BottomNavigationBar,需要在主頁中實(shí)現(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 ? StatecreateState()=>_MainPageState(); } ? class _MainPageState extends State { ? ? var allPages=[HomePage(),ContactPage(),FindPage(),MyPage()]; ? var currentIndex=0; ? ? ? @override ? Widget build(BuildContext context) { ? ? return Scaffold( ? ? ? appBar: AppBar( ? ? ? ? title: Text( ? ? ? ? ? "導(dǎo)航欄", ? ? ? ? ? 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; ? ? ? ? ? }); ? ? ? ? }, ? ? ? ), ? ? ); ? } }
三.實(shí)際效果展示,eg:
原文鏈接:https://blog.csdn.net/j086924/article/details/122347292
相關(guān)推薦
- 2022-11-21 詳解React獲取DOM和獲取組件實(shí)例的方式_React
- 2022-07-26 ES對比兩個(gè)索引的數(shù)據(jù)差
- 2022-04-09 Nginx 提示10013: An attempt was made to access a soc
- 2023-07-22 測試springboot log4j2異步配置是否生效
- 2022-03-24 基于Docker的可持續(xù)交付問題_docker
- 2022-08-17 C++關(guān)于樹的定義全面梳理_C 語言
- 2022-07-21 CSS復(fù)合型寫法
- 2022-04-03 Android實(shí)現(xiàn)recyclerview城市字母索引列表_Android
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細(xì)win安裝深度學(xué)習(xí)環(huán)境2025年最新版(
- Linux 中運(yùn)行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲(chǔ)小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎(chǔ)操作-- 運(yùn)算符,流程控制 Flo
- 1. Int 和Integer 的區(qū)別,Jav
- spring @retryable不生效的一種
- Spring Security之認(rèn)證信息的處理
- Spring Security之認(rèn)證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權(quán)
- redisson分布式鎖中waittime的設(shè)
- maven:解決release錯(cuò)誤:Artif
- restTemplate使用總結(jié)
- Spring Security之安全異常處理
- MybatisPlus優(yōu)雅實(shí)現(xiàn)加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務(wù)發(fā)現(xiàn)-Nac
- Spring Security之基于HttpR
- Redis 底層數(shù)據(jù)結(jié)構(gòu)-簡單動(dòng)態(tài)字符串(SD
- arthas操作spring被代理目標(biāo)對象命令
- Spring中的單例模式應(yīng)用詳解
- 聊聊消息隊(duì)列,發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠(yuǎn)程分支