自定義形狀TabBar
實現
成員變量
List<Widget> pages = List<Widget>();用來存放tabs分別對應的頁面。
tabbar作為內容的容器 CustomerNotification用來容器內部Widget來通知tabbar做出改變。
NotificationListener的’ child‘是頁面顯示內容，NotificationListener用來監聽CustomerNotification。
看設計，TabBar是懸浮的設計，不能用官方庫提供的TabBar。TabBar和后面的內容是堆疊的，所以用Stack widget。
Stack： 取代線性布局，Stack允許子 widget 堆疊， 你可以使用 Positioned 來定位他們相對于Stack的上下左右四條邊的位置。Stacks是基于Web開發中的絕對定位（absolute positioning )布局模型設計的。
Positioned，用Positioned絕對定位懸浮的TabBar。 bottom: 15, left: 20, right: 20（top這里不需要設置）分別設計和容器的邊距。
Positioned的child就是你自己需要定制的tabbar形狀。
全部代碼如下：
/*
* File: /Users/ottpay/Git/fyh_transfer/lib/Account/accountHomePage.dart
* Created Date: 2019-09-27 4:13:15
* Author: 木穆 pengxuan.li@ott.ca
* Copyright (c) 2019 OTT Pay HK
*/
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:fyh_transfer/Send/sendHomePage.dart';
import 'package:fyh_transfer/Order/orderHomePage.dart';
import 'package:fyh_transfer/Account/accountHomePage.dart';
class FYHTabbar extends StatefulWidget {
@override
FYHTabbarState createState() => FYHTabbarState();
}
class CustomerNotification extends Notification {
CustomerNotification(this.enable);
final bool enable;
}
class FYHTabbarState extends State<FYHTabbar>
{
List<Widget> pages = List<Widget>();
bool sendeEnable = false;
SendHomePage _sendHomePage = SendHomePage();
int _activeIndex = 1; //激活項
double _height = 48.0; //導航欄高度
double _floatRadius = 30; //懸浮圖標半徑
List _navs = [
Icons.search,
Icons.ondemand_video,
Icons.music_video,
]; //導航項
@override
void initState() {
super.initState();
pages..add(OrderHomePage())..add(_sendHomePage)..add(AccountHomePage());
}
@override
Widget build(BuildContext context) {
double width = MediaQuery.of(context).size.width - 40;
_floatRadius = _activeIndex == 1 ? 40 : 30;
return NotificationListener<CustomerNotification>(
onNotification: (notification) {
setState(() {
sendeEnable = notification.enable;
});
},
child: Container(
child: Stack(children: [
pages[_activeIndex],//tabbar要存放的頁面
Positioned(//用Positioned絕對定位懸浮的TabBar
bottom: 15,
left: 20,
right: 20,
child: Container(
padding: EdgeInsets.fromLTRB(0, 10, 0, 0),
width: width,
height: 58,
child: Stack(
overflow: Overflow.visible,
children: <Widget>[
//所有圖標
DecoratedBox(
decoration: BoxDecoration(
color: Color(0xFFf2f4f5), // 底色
shape: BoxShape.rectangle, // 默認值也是矩形
borderRadius:
new BorderRadius.circular(_height / 2), // 圓角度
boxShadow: [
BoxShadow(
color: Color(0xffc1c1c1),
offset: Offset(2.0, 2.0),
blurRadius: 50.0,
spreadRadius: 2.0)
],
),
child: SizedBox(
height: _height,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: _navs
.asMap()
.map((i, v) => MapEntry(
i,
GestureDetector(
child: Container(
color: Color(0xFFf2f4f5),
margin: EdgeInsets.all(0),
child: Icon(v,
color: _activeIndex == i
? Colors.pink
: Colors.grey),
width: width / 3 - 30,
height: _height - 10,
),
onTap: () {
_switchNav(i);
},
)))
.values
.toList(),
),
),
),
//浮動圖標
Positioned(
bottom: 4,
left: (width) / 2 - _floatRadius,
child: DecoratedBox(
decoration:
ShapeDecoration(shape: CircleBorder(), shadows: [
BoxShadow(
blurRadius: 2,
offset: Offset(0, 2),
spreadRadius: 0,
color: _activeIndex == 1
? Colors.pink
: Colors.grey),
]),
child: GestureDetector(
child: CircleAvatar(
radius: _floatRadius, //浮動圖標和圓弧之間設置8pixel間隙
backgroundColor: Color(0xfff2f4f5),
child: Icon(_navs[1],
color: sendeEnable && _activeIndex == 1
? Colors.pink
: Colors.black38)),
onTap: () {
_clickMiddleBtn();
},
),
),
),
],
),
),
)
]),
));
;
}
//中間按鈕
_clickMiddleBtn() {
if (_activeIndex == 1) {
if (sendeEnable) {
print('send');
}
} else {
_switchNav(1);
}
}
//切換導航
_switchNav(int newIndex) {
print(newIndex);
double oldPosition = _activeIndex.toDouble();
double newPosition = newIndex.toDouble();
if (oldPosition != newPosition) {
setState(() {
_activeIndex = newIndex;
});
}
}
@override
void dispose() {
super.dispose();
}
}
