项目中,遇到一个需求,需要自定义tabbar的高度,但是自带的tabbar组件都不支持修改高度.

所幸flutter的万物皆组件的概念,所以我们自己写一个tabbar即可.
需求:需要一个可以自行控制高度的tabbar.

大致效果如下: result_custom_tabbar

其中,自定义Tabbar组件如下

bottom_bar.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
/*
* 自定义tabbar
* */
import 'package:flutter/material.dart';

class BottomBarItem {
BottomBarItem({this.imageIcon, this.imageSelectedIcon, this.text});

Image imageIcon;
Image imageSelectedIcon;
String text;
}

class BottomBar extends StatefulWidget {
BottomBar({
this.items,
this.centerItemText,
this.height: 60.0,
this.iconSize: 24.0,
this.backgroundColor,
this.color,
this.selectedColor,
this.notchedShape,
this.onTabSelected,
}) {
assert(this.items.length == 2 || this.items.length == 4);
}

final List<BottomBarItem> items;
final String centerItemText;
final double height;
final double iconSize;
final Color backgroundColor;
final Color color;
final Color selectedColor;
final NotchedShape notchedShape;
final ValueChanged<int> onTabSelected;

@override
State<StatefulWidget> createState() => BottomBarState();
}

class BottomBarState extends State<BottomBar> {
int _selectedIndex = 0;

_updateIndex(int index) {
widget.onTabSelected(index);
setState(() {
_selectedIndex = index;
});
}

@override
Widget build(BuildContext context) {
List<Widget> items = List.generate(widget.items.length, (int index) {
return _buildTabItem(
item: widget.items[index],
index: index,
onPressed: _updateIndex,
);
});
items.insert(items.length >> 1, _buildMiddleTabItem());

return BottomAppBar(
shape: widget.notchedShape,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: items,
),
color: widget.backgroundColor,
);
}

Widget _buildMiddleTabItem() {
return Expanded(
child: SizedBox(
height: widget.height,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
SizedBox(height: widget.iconSize),
Text(
widget.centerItemText ?? '',
style: TextStyle(color: widget.color),
),
],
),
),
);
}

Widget _buildTabItem({
BottomBarItem item,
int index,
ValueChanged<int> onPressed,
}) {
Image icon =
_selectedIndex == index ? item.imageSelectedIcon : item.imageIcon;

Color resultColor =
_selectedIndex == index ? widget.selectedColor : widget.color;

return Expanded(
child: SizedBox(
height: widget.height,
child: Material(
type: MaterialType.transparency,
child: InkWell(
onTap: () => onPressed(index),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
icon,
Text(
item.text,
style: TextStyle(color: resultColor),
)
],
),
),
),
),
);
}
}

以上就是自定义的tabbar组件.其中字段解释如下:
. items tabs数组,BottomBarItem类型
. centerItemText 中间Tab按钮文字
. height tab的高度
. backgroundColor 整体背景色
. color icon默认色
. selectedColor 选中icon色
. notchedShape icon的大小
. onTabSelected 选中tab事件,做的主要就是切换当前page
. notchedShape 设置notchedShape,和系统的NotchedShape一致

其他需要的属性,可以自行添加.

创建好自定义tabbar之后,使用即可.

main.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
import 'package:flutter/material.dart';

import './bottom_bar.dart';

import './pages/one.dart';
import './pages/two.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: STTabBar(),
);
}
}

class STTabBar extends StatefulWidget {
@override
_STTabBarState createState() => _STTabBarState();
}

class _STTabBarState extends State<STTabBar> {
int _tabIndex = 0;
double _tab_H = 70.0; // tag 高度

@override
Widget build(BuildContext context) {
return Scaffold(
body: IndexedStack(
index: _tabIndex,
children: <Widget>[
One(
// 滑块
changeTabOne: (e) {
setState(() {
_tab_H = e;
});
},
// 高度为0
changeTabTwo: () {
setState(() {
_tab_H = 0;
});
},
// 高度为70
changeTabThree: () {
setState(() {
_tab_H = 70;
});
},
),
Two(),
],
),
bottomNavigationBar: BottomBar(
height: _tab_H,
color: Color(0xFF999999),
selectedColor: Color.fromRGBO(255, 175, 76, 1),
// backgroundColor: Colors.red,
items: [
BottomBarItem(
imageIcon: Image.asset(
'assets/one.png',
width: 40,
height: 40,
),
imageSelectedIcon: Image.asset(
'assets/one_select.png',
width: 40,
height: 40,
),
text: '首页',
),
BottomBarItem(
imageIcon: Image.asset(
'assets/two.png',
width: 40,
height: 40,
),
imageSelectedIcon: Image.asset(
'assets/two_select.png',
width: 40,
height: 40,
),
text: '我的',
)
],
onTabSelected: (index) {
setState(() {
_tabIndex = index;
});
},
),
);
}
}

上面的BottomBar()这个就是之前自定义的tabbar,配置好参数即可.

完整源码

另:以上功能也可以采用PreferredSize 制作,如 PreferredSize 示例

ps:新年前最后一天,自己一个人在出租屋里写着博客,外面下着雨,路上没什么人,好好的年被着该该死的肺炎给搅和了,也不知道自己能不能度过这个灾难…..