如何在Flutter中實現花式底部導覽列？

2024-01-10 分类：软件下载作者：Linux网站管理员阅读（160）

Fancy Bottom NavigationBar是一個MaterialApp 小部件，它顯示一個底部花式導航欄，其中項目在2 到4 之間。Bottom NavigationBar 是水平形式的圖標或文本列表，稱為選項卡，每個選項卡都包含自己的頁面。

逐步實施
步驟1：在Android Studio中建立一個新項目
要在 Android Studio 上設定 Flutter 開發，請參閱Android Studio Flutter 開發設置，然後在 Android Studio 中建立新項目，請參閱在 Flutter 中建立簡單應用程式。

步驟 2：匯入pubspec.yaml 檔案中的套件。
現在我們需要將套件匯入到 pubspec.yaml 檔案中，您可以在根資料夾的最後找到該檔案。

從命令列：
flutter pub 新增 fancy_bottom_navigation
這會將類似的內容添加到您的 pubspec.yaml 檔案中：

Dart

fnb1

dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.2
fancy_bottom_navigation: ^0.3.3dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.2
fancy_bottom_navigation: ^0.3.3
別忘了領取包裹。
注意：當您新增依賴項時，插件的版本可能會變更。
第三步：將插件導入main.dart檔案中
import 'package:fancy_bottom_navigation/fancy_bottom_navigation.dart';
花式底部NavigationBar的一些要點：
選項卡資料：
取得顯示圖示的 iconData
標題要顯示的文字
onClick 操作點選時執行某些任務。
初始選擇：
啟動時的活動頁面索引
圓圈顏色：
設定圓形圖示的背景。
非活動圖示顏色：
設定非選定圓圈通配圖示的背景。
欄背景顏色：
設定主欄的背景顏色
句法：
建立要顯示的PageIndex Var：

Creating PageIndex To Be Shown Var:

int currentPage = 0;

Creating StateKey Var:

GlobalKey bottom NavigationKey = GlobalKey();

Creating a Fancy BottomNavigationBar:

Dart

Scaffold(

bottomNavigationBar:FancyBottomNavigation(

initialSelection:0, key: bottomNavigationKey, circleColor:Colors.teal,

inactiveIconColor:Colors.white, barBackgroundColor:Colors.lightBlueAccent,

tabs: [

TabData(

iconData: Icons.add,

title: 'Add',

onclick: 00

), //You Can Add More

]

onTabChangedListener:(indexPage) {

setState() ({

currentPage = indexPage;

});

)

Code:Dart

import 'package:flutter/material.dart';

import 'package:fancy_bottom_navigation/fancy_bottom_navigation.dart';

void main() => runApp(MaterialApp(home: FancyBottomNavBarRun() ,));

class FancyBottomNavBarRun extends StatefulWidget {

const FancyBottomNavBarRun({Key? key}) : super(key: key);

@override

_FancyBottomNavBarState createState() => _FancyBottomNavBarState();

}

class _FancyBottomNavBarState extends State<FancyBottomNavBarRun> {

int currentPage = 0;

// CurrentPage that hold the current tab value

GlobalKey bottomNavigationKey = GlobalKey();

@override

Widget build(BuildContext context) {

return MaterialApp(

// MaterialApp with debugShowCheckedModeBanner false,

debugShowCheckedModeBanner:false,

home:Scaffold(

appBar: AppBar(

title: const Text("Fancy Bottom Navigation"),

body:Container(

width:MediaQuery.of(context).size.width,

height:MediaQuery.of(context).size.height,

child: // Showing the body according to the currentPage index.

(currentPage ==0 )?

AddPage():

(currentPage ==1 )?

ListPage():

ComparePage(),

// NavigationBar which have three tab, each tab have icons and color

bottomNavigationBar: FancyBottomNavigation(

initialSelection:0,

key: bottomNavigationKey,

circleColor:Colors.teal,

inactiveIconColor:Colors.white,

barBackgroundColor:Colors.lightBlueAccent,

tabs: [

TabData(

iconData: Icons.add,

title: "Add",

onclick: () {}

TabData(

iconData: Icons.list,

title: "List",

onclick: () {}

TabData(

iconData: Icons.compare_arrows,

title: "Compare",

onclick: () {}

// When tab changes we also called the setState method to change the currentpage

onTabChangedListener: (indexPage) {

setState(() {

currentPage = indexPage;

});

);

}

// Classes for showing in the body of the app according to the current page index.

class AddPage extends StatelessWidget{

@override

Widget build(BuildContext context) {

return Column(

mainAxisAlignment:MainAxisAlignment.center,

crossAxisAlignment:CrossAxisAlignment.center,

children: [

const Icon(Icons.add, size: 30),

const Text("Add Page")

);

}

class ListPage extends StatelessWidget{

@override

Widget build(BuildContext context) {

return Column(

mainAxisAlignment:MainAxisAlignment.center,

crossAxisAlignment:CrossAxisAlignment.center,

children: [

const Icon(Icons.list, size: 30),

const Text("List Page")

);

}

class ComparePage extends StatelessWidget{

@override

Widget build(BuildContext context) {

return Column(

mainAxisAlignment:MainAxisAlignment.center,

crossAxisAlignment:CrossAxisAlignment.center,

children: [

const Icon(Icons.compare_arrows, size: 30),

const Text("Compare Page")

);