demo地址
系統(tǒng)icon
BottomNavigationBar是底部導航條，可以讓我們定義底部Tab切換抖部，bottomNavigationBar 豪椿。是Scaffold組件的參數(shù)簿训。
如下所示： 自定義一個 Tabbar的組件 然后創(chuàng)建幾個 頁面組件
效果圖如下：
效果圖.jpg
Tabs代碼如下：
// 第一步：引入相關文件
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'tabs/HomePage.dart';
import 'tabs/CategoryPage.dart';
import 'tabs/SettingPage.dart';
// 第二步：創(chuàng)建一個有狀態(tài)的Tabs 組件
class Tabs extends StatefulWidget {
Tabs({Key? key}) : super(key: key);
@override
_TabsState createState() => _TabsState();
}
class _TabsState extends State<Tabs> {
//記錄當前tabbar點擊的下標
int _currentIndex=0;
//存放tabbar
List _pageList =[
HomePage(),
CategoryPage(),
SettingPage()
];
@override
Widget build(BuildContext context) {
return Container(
child: Scaffold(
//設置導航條
appBar: AppBar(
title: Text('這是一個flutter'),
backgroundColor: Colors.red,
),
// 設置需要顯示的內(nèi)容。
body: this._pageList[this._currentIndex],
//創(chuàng)建tabbar
bottomNavigationBar: BottomNavigationBar(
currentIndex: this._currentIndex,
//tabbar的點擊事件
onTap: (int index) {
setState(() {
this._currentIndex = index;
});
},
//設置圖標尺寸
iconSize: 30,
//設置選中圖標的顏色
fixedColor: Colors.red,
//設置item
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), label: "首頁"),
BottomNavigationBarItem(icon: Icon(Icons.category), label: "分類"),
BottomNavigationBarItem(icon: Icon(Icons.settings), label: "設置"),
],
),
),
);
}
}
注意：BottomNavigationBarItem 中的icon 是一個組件 這個組件可以使用系統(tǒng)的 icons 也可以使用自定義的 Image
如下所示：
//_imageurl:是動態(tài)傳入的圖片路徑 因為tabbar有選中和非選中的狀態(tài) 所以需要動態(tài)傳入
BottomNavigationBarItem(icon:Image.asset(_imageurl,width: 30,height: 30,fit: BoxFit.cover,) , label: "首頁"),
main.dart代碼如下：
import 'package:flutter/material.dart';
import 'pages/Tabs.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(home: Tabs());
}
}
