欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

flutter實(shí)現(xiàn)底部導(dǎo)航欄

 更新時(shí)間:2022年03月23日 10:26:07   作者:偉雪無痕  
這篇文章主要為大家詳細(xì)介紹了flutter實(shí)現(xiàn)底部導(dǎo)航欄,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文實(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為例,其他頁面只需要修改對(duì)應(yīng)內(nèi)容顯示即可,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,需要在主頁中實(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
? 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(
? ? ? ? ? "導(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:

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論