站点图标 Linux-技术共享

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

Linux网站管理员

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

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")
],
);
}
}
 

 

 

 

退出移动版