目录
前言
前面介绍了app顶部导航栏appbar，今天来介绍下flutter实现app底部导航栏。我们以仿写微信的底部导航栏来举例说明。
要实现类似微信底部的导航栏可以使用tabbar或者bottomnavigationbar来实现。下面分别介绍。
使用tabbar实现
tabbar介绍
在flutter中，tabbar是一个用于创建选项卡式导航的常用组件。它通常与tabbarview一起使用，用于在不同的选项卡之间切换内容。
tabbar的重要属性
下面是tabbar的一些重要属性和功能：
- tabs： tabs属性是一个必需的属性，用于指定选项卡的列表。您可以使用tab小部件创建每个选项卡，并将它们放入tabs列表中。
- controller： controller属性用于指定tabcontroller，它负责管理选项卡和视图之间的联动。您可以通过创建一个tabcontroller实例，并将其作为controller属性的值来实现联动。
- isscrollable： isscrollable属性用于控制选项卡是否可滚动。当选项卡超出屏幕宽度时，如果设置为true，则可以通过水平滚动查看所有选项卡。
- indicatorcolor： indicatorcolor属性用于设置选项卡下方的指示器的颜色。指示器是一个表示当前选中选项卡的横条。
- labelcolor 和 unselectedlabelcolor： labelcolor属性用于设置选中选项卡标签的颜色，而unselectedlabelcolor属性用于设置未选中选项卡标签的颜色。
- labelstyle 和 unselectedlabelstyle： labelstyle属性用于设置选中选项卡标签的文本样式，而unselectedlabelstyle属性用于设置未选中选项卡标签的文本样式。
- ontap： ontap属性是一个回调函数，当用户点击选项卡时会触发该函数。您可以在该回调函数中执行特定的操作，例如更新视图或处理其他逻辑。
说明
一般通过使用tabbar和tabbarview的组合，您可以轻松创建具有选项卡切换功能的界面。tabbar提供了可定制的选项卡导航栏，而tabbarview用于展示与选项卡对应的内容。这使得在flutter应用程序中实现选项卡式导航变得简单而灵活。
tabbarview介绍
tabbarview是一个用于显示与tabbar选项卡相对应的内容的组件。它与tabbar一起使用，以实现选项卡切换时内容的同步更新。
tabbarview的重要属性
下面是tabbarview的一些重要属性和功能：
- children： children属性是一个必需的属性，用于指定与每个选项卡对应的子组件列表。您可以将不同的小部件放入children列表中，以显示不同的内容。
- controller： controller属性用于指定tabcontroller，它负责管理选项卡和视图之间的联动。确保将tabcontroller实例作为tabbarview和tabbar的controller属性值保持一致。
- physics： physics属性用于指定滚动行为。默认情况下，tabbarview的滚动行为与父级scrollable组件一致。您可以根据需要设置不同的滚动行为，如neverscrollablescrollphysics禁用滚动或bouncingscrollphysics添加弹性效果。
- dragstartbehavior： dragstartbehavior属性控制滚动开始行为。默认情况下，它会根据环境决定是跟随垂直方向还是水平方向进行滚动。您可以通过设置为dragstartbehavior.start或dragstartbehavior.down来强制启动垂直滚动。
- physics和dragstartbehavior属性的应用示例：
copy code
tabbarview(
controller: _tabcontroller,
physics: neverscrollablescrollphysics(), // 禁用滚动
dragstartbehavior: dragstartbehavior.down, // 垂直滚动
children: [
// 子组件列表
...
],
)
onpagechanged： onpagechanged属性是一个回调函数，当用户滑动或切换选项卡时，将触发该函数。您可以在此回调函数中执行任何与选项卡切换相关的操作。
tabbar总结
通过将tabbarview与tabbar和tabcontroller结合使用，您可以实现选项卡之间内容的同步切换。当用户切换选项卡时，tabcontroller将相应地更新tabbarview中显示的内容，使用户能够轻松浏览不同的内容。tabbarview为创建选项卡式导航提供了便捷的方式，并且可以根据实际需求进行进一步的定制和样式设置。
tabbar实现底部导航的例子
源码下载
链接:
import 'package:flutter/material.dart';
void main() {
runapp(myapp());
}
class myapp extends statelesswidget {
@override
widget build(buildcontext context) {
return materialapp(
home: mytabpage(),
);
}
}
class mytabpage extends statefulwidget {
@override
_mytabpagestate createstate() => _mytabpagestate();
}
class _mytabpagestate extends state with singletickerproviderstatemixin {
late tabcontroller _tabcontroller;
@override
void initstate() {
super.initstate();
_tabcontroller = tabcontroller(length: 3, vsync: this); // 3是选项卡数量
}
@override
void dispose() {
_tabcontroller.dispose();
super.dispose();
}
@override
widget build(buildcontext context) {
return scaffold(
appbar: appbar(
title: text('微信'),
),
body: tabbarview(
controller: _tabcontroller,
children: [
// 第一个选项卡的内容
container(
child: center(
child: text('聊天'),
),
),
// 第二个选项卡的内容
container(
child: center(
child: text('群组'),
),
),
// 第三个选项卡的内容
container(
child: center(
child: text('个人'),
),
),
],
),
bottomnavigationbar: tabbar(
controller: _tabcontroller,
tabs: [
tab(icon: icon(icons.chat), text: '聊天'),
tab(icon: icon(icons.group), text: '群组'),
tab(icon: icon(icons.person), text: '个人'),
],
indicatorcolor: colors.blue, // 选中状态下的指示器颜色
labelcolor: colors.blue, // 选中状态下的文本颜色
unselectedlabelcolor: colors.grey, // 未选中状态下的文本颜色
),
);
}
}
效果图如下：
备注：
记得用tabcontroller将tabbarview与tabbar结合起来，这样才能实现联动，tabbar选择时tabbarview才会刷新，tabbarview滑动切换时tabbar的焦点才会跟着变。
bottomnavigationbar实现
bottomnavigationbar介绍
bottomnavigationbar是flutter提供的用于底部导航栏的小部件，它可以在应用程序的底部显示一组导航选项。下面是对bottomnavigationbar的详细介绍。
构造函数：
bottomnavigationbar({
key? key,
required list items, // 导航选项列表
int currentindex = 0, // 当前选中的索引
color? backgroundcolor, // 背景颜色
color? unselecteditemcolor, // 未选中项的颜色
color? selecteditemcolor, // 选中项的颜色
double? elevation, // 阴影高度
bottomnavigationbartype type = bottomnavigationbartype.fixed, // 样式类型
valuechanged? ontap, // 点击事件回调
mousecursor? mousecursor, // 鼠标指针
bool enablefeedback = true, // 是否启用触觉反馈
})
属性：
items：一个包含bottomnavigationbaritem对象的列表，表示导航栏的选项。每个bottomnavigationbaritem包含一个图标和一个可选的文本标签。
currentindex：当前选中的选项的索引。
backgroundcolor：导航栏的背景颜色。
unselecteditemcolor：未选中项的颜色。
selecteditemcolor：选中项的颜色。
elevation：导航栏的阴影高度。
type：导航栏的样式类型。可以是bottomnavigationbartype.fixed（固定样式，所有选项占用相等的空间）或bottomnavigationbartype.shifting（移动样式，选中的选项会突出显示）。
ontap：点击导航项时的回调函数，它接受一个int类型的参数，表示选中的选项的索引。
mousecursor：鼠标指针的样式。
enablefeedback：是否启用触觉反馈。
bottomnavigationbar实现底部导航栏的例子
import 'package:flutter/material.dart';
void main() {
runapp(myapp());
}
class myapp extends statelesswidget {
@override
widget build(buildcontext context) {
return materialapp(
home: mytabpage(),
);
}
}
class mytabpage extends statefulwidget {
@override
_mytabpagestate createstate() => _mytabpagestate();
}
class _mytabpagestate extends state with singletickerproviderstatemixin {
int _currentindex = 0;
late tabcontroller _tabcontroller;
@override
void initstate() {
super.initstate();
_tabcontroller = tabcontroller(length: 3, vsync: this); // 3是选项卡数量
_tabcontroller.addlistener(_handletabchange); // 添加监听器
}
@override
void dispose() {
_tabcontroller.removelistener(_handletabchange); // 移除监听器
_tabcontroller.dispose();
super.dispose();
}
void _handletabchange() {
setstate(() {
_currentindex = _tabcontroller.index; // 更新焦点索引
});
}
@override
widget build(buildcontext context) {
return scaffold(
appbar: appbar(
title: text('微信'),
),
body: tabbarview(
controller: _tabcontroller,
children: [
// 第一个选项卡的内容
container(
child: center(
child: text('聊天'),
),
),
// 第二个选项卡的内容
container(
child: center(
child: text('群组'),
),
),
// 第三个选项卡的内容
container(
child: center(
child: text('个人'),
),
),
],
),
bottomnavigationbar: bottomnavigationbar(
currentindex: _currentindex,
ontap: (int index) {
setstate(() {
_currentindex = index;
_tabcontroller.animateto(index); // 切换tabbarview
});
},
items: [
bottomnavigationbaritem(
icon: icon(icons.chat),
label: '聊天',
),
bottomnavigationbaritem(
icon: icon(icons.group),
label: '群组',
),
bottomnavigationbaritem(
icon: icon(icons.person),
label: '个人',
),
],
),
);
}
}
效果如下：
我们使用了bottomnavigationbar小部件代替了tabbar。bottomnavigationbar可以放在屏幕底部，并且具有内置的标签和图标。我们将currentindex绑定到当前选中的标签的索引，以便在用户更改标签时更新底部导航栏。我们还使用ontap回调，以便在用户点击标签时切换tabbarview中的标签页。
请注意，在此示例中，我们仍然使用了tabbarview来显示选项卡内容。我们通过将tabcontroller传递给tabbarview来将其与bottomnavigationbar同步。这样，当用户更改底部导航栏的标签时，tabbarview也会切换到相应的标签页。我们添加了一个_handletabchange方法来处理选项卡的变化。在initstate方法中，我们将此方法添加为tabcontroller的监听器。当tabcontroller的索引发生变化时，_handletabchange方法会被调用，然后我们更新底部导航栏的焦点索引_currentindex，从而实现底部导航栏焦点随着tabbarview的滑动而更新。
在_handletabchange方法中，我们使用了setstate来触发重新构建界面，以便更新底部导航栏焦点。
这些都是必要的，不然tabbarview和bottomnavigationbar不会联动。
总结
bottomnavigationbar和tabbar实现底部导航栏哪个更好？
bottomnavigationbar和tabbar都可以用作底部导航栏，选择使用哪个取决于您的具体需求和设计偏好。以下是它们的一些特点和使用场景：
bottomnavigationbar
bottomnavigationbar是专门为底部导航栏设计的小部件，提供了内置的标签和图标，并支持固定数量的选项。
它通常用于在应用的底部提供导航功能，例如常见的底部标签栏。
bottomnavigationbar在设计上更符合平台的底部导航栏样式，可以提供更统一的用户体验。
它适合用于具有固定数量的导航选项，例如底部标签页的数量已知且固定。
tabbar
tabbar是一个通用的选项卡导航小部件，可以放置在顶部或底部，并且可以包含可滚动或固定数量的选项。
它可以用于创建自定义的导航样式，并支持更灵活的选项卡布局和交互。
tabbar适合用于具有可变数量的导航选项，例如多个选项卡页的数量可以根据用户权限或动态数据而变化。
根据实际情况选择
在实际应用中，选择使用哪个小部件更方便、更好或更常用是因人而异的。如果您的应用需要固定数量的底部导航选项，并且您希望使用内置的样式和动画，那么bottomnavigationbar可能更适合。如果您需要更多的自定义选项，例如可滚动的选项卡或与其他自定义导航组件的集成，那么tabbar可能更适合。
最佳选择取决于您的项目需求、设计风格和用户体验目标。建议根据具体情况评估这两个小部件，并选择最适合您项目的底部导航栏实现。
