前言
Flutter是谷歌的移動(dòng)UI框架，可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面戏阅。
IT界著名的尼古拉斯·高爾包曾說：輪子是IT進(jìn)步的階梯贺归！熱門的框架千篇一律燃辖，好用輪子萬里挑一锯玛！Flutter作為這兩年開始崛起的跨平臺(tái)開發(fā)框架，其第三方生態(tài)相比其他成熟框架還略有不足踢涌，但輪子的數(shù)量也已經(jīng)很多了通孽。本系列文章挑選日常app開發(fā)常用的輪子分享出來，給大家提高搬磚效率睁壁，同時(shí)也希望flutter的生態(tài)越來越完善背苦，輪子越來越多。
本系列文章準(zhǔn)備了超過50個(gè)輪子推薦潘明，工作原因行剂，盡量每1-2天出一篇文章。
tip:本系列文章合適已有部分flutter基礎(chǔ)的開發(fā)者钳降，入門請(qǐng)戳：flutter官網(wǎng)
正文
輪子
- 輪子名稱：curved_navigation_bar
- 輪子概述：flutter一個(gè)超酷動(dòng)畫的底部tab欄.
- 輪子作者：rafbednarczuk@gmail.com
- 推薦指數(shù)：★★★★
- 常用指數(shù)：★★★★
-
效果預(yù)覽：
原文效果gif
效果圖
安裝
dependencies:
curved_navigation_bar: ^0.3.1
import 'package:curved_navigation_bar/curved_navigation_bar.dart';
使用
- items：按鈕小部件列表
- index：NavigationBar的索引厚宰，可用于更改當(dāng)前索引或設(shè)置初始索引
- color：NavigationBar的顏色，默認(rèn)值為Colors.white
- buttonBackgroundColor：浮動(dòng)按鈕的背景色
- backgroundColor： NavigationBar動(dòng)畫鏤空時(shí)的背景遂填，默認(rèn)的Colors.blueAccent
- onTap：按鈕點(diǎn)擊事件（index）
- animationCurve：動(dòng)畫曲線铲觉，默認(rèn)的Curves.easeOutCubic
- animationDuration：按鈕更改動(dòng)畫的持續(xù)時(shí)間，默認(rèn)的Duration（毫秒：600）
- height：NavigationBar的高度吓坚，最小值0.0撵幽，最高75.0
默認(rèn)示例：
Scaffold(
bottomNavigationBar: CurvedNavigationBar(
backgroundColor: Colors.blueAccent,
items: <Widget>[
Icon(Icons.add, size: 30),
Icon(Icons.list, size: 30),
Icon(Icons.compare_arrows, size: 30),
],
onTap: (index) {
//Handle button tap
},
),
body: Container(color: Colors.blueAccent),
)
與TabBarView一起聯(lián)動(dòng)使用
class CurvedNavigationBarDemo extends StatefulWidget {
CurvedNavigationBarDemo({Key key}) : super(key: key);
@override
_CurvedNavigationBarDemoState createState() => _CurvedNavigationBarDemoState();
}
class _CurvedNavigationBarDemoState extends State<CurvedNavigationBarDemo> with SingleTickerProviderStateMixin{
TabController tabController;
List colors=[Colors.blue,Colors.pink,Colors.orange];
int currentIndex=0;
@override
void initState() {
// TODO: implement initState
super.initState();
tabController = TabController(vsync: this, length: 3)..addListener((){
setState(() {
currentIndex=tabController.index;
});
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: CurvedNavigationBar(
backgroundColor: colors[currentIndex],
index: currentIndex,
items: <Widget>[
Icon(Icons.home, size: 30),
Icon(Icons.fiber_new, size: 30),
Icon(Icons.person, size: 30),
],
onTap: (index) {
//Handle button tap
setState(() {
currentIndex=index;
});
tabController.animateTo(index,duration: Duration(milliseconds: 300), curve: Curves.ease);
},
),
body: TabBarView(
controller: tabController,
children: <Widget>[
Container(
color: colors[0],
),
Container(
color: colors[1],
),
Container(
color: colors[2],
)
],
)
);
}
}
