一個超酷效果導航欄

“

IT 界著名的尼古拉斯·大龍曾說：現(xiàn)在做 Android 開發(fā)，已經是大好時機，網上有很多成熟的框架，我們應充分利用好這些，所謂前人種樹后人好乘涼，很多時候壓根不需要了解太多原理，只需站在巨人的丁丁上即可。

”

導航欄是項目開發(fā)中最常見的控件之一，今天分享的導航欄定讓你眼見一亮。

下載

pubspec.yaml 添加：

dependencies:
??curved_navigation_bar:?^0.3.4?#latest?version

使用

1、官方代碼示例

Scaffold(
??bottomNavigationBar:?CurvedNavigationBar(
????backgroundColor:?Colors.blueAccent,
????items:?[
??????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),
)

• items：按鈕小部件列表

• index：NavigationBar 的索引，可用于更改當前索引或設置初始索引

• color：NavigationBar 的顏色，默認值為 Colors.white

• buttonBackgroundColor：浮動按鈕的背景色

• backgroundColor：NavigationBar 動畫鏤空時的背景，默認的 Colors.blueAccent

• onTap：按鈕點擊事件（index）

• animationCurve：動畫曲線，默認的 Curves.easeOutCubic

• animationDuration：按鈕更改動畫的持續(xù)時間，默認的 Duration（毫秒：600）

• height：NavigationBar 的高度，最小值 0.0，最高 75.0

2、與 TabBarView 聯(lián)動

import?'package:curved_navigation_bar/curved_navigation_bar.dart';
import?'package:flutter/material.dart';

class?CurvedNavigationBarPage?extends?StatefulWidget?{
??@override
??CurvedNavigationBarState?createState()?=>?new?CurvedNavigationBarState();
}

class?CurvedNavigationBarState?extends?State<CurvedNavigationBarPage>
????with?SingleTickerProviderStateMixin?{
??TabController?_tabController;
??List?colors?=?[Colors.blueAccent,?Colors.pinkAccent,?Colors.orangeAccent];

??int?currentIndex?=?0;
??@override
??void?dispose()?{
????_tabController.dispose();
????super.dispose();
??}

??void?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],
????????items:?[
??????????Icon(Icons.add,?size:?30),
??????????Icon(Icons.list,?size:?30),
??????????Icon(Icons.compare_arrows,?size:?30),
????????],
????????onTap:?(index)?{
??????????//Handle?button?tap
??????????print("index=="?+?index.toString());
??????????setState(()?{
????????????currentIndex?=?index;
??????????});
??????????_tabController.animateTo(index,
??????????????duration:?Duration(milliseconds:?300),?curve:?Curves.ease);
????????},
??????),
??????body:?TabBarView(
????????controller:?_tabController,
????????children:?[
??????????Container(
????????????color:?colors[0],
??????????),
??????????Container(
????????????color:?colors[1],
??????????),
??????????Container(
????????????color:?colors[2],
??????????)
????????],
??????),
????);
??}
}

GitHub 地址

https://github.com/rafalbednarczuk/curved_navigation_bar