logo标签列表

Flutter：Tabbar vs BottomNavigationBar

dartflutter
7

我正在尝试找到一种带有滑动功能的底部导航的最佳方式。我找到了两个有前途的小部件：Tabbar（带有TabBarView）和BottomNavigationBar。Tabbar易于使用，并且具有控制器属性，可轻松在选项卡之间滑动。但是没有设置背景颜色的方法（或者我错了？）。BottomNavigationBar允许在appBar之外进行自定义，但不与控制器一起工作。那么我该如何使用BottomNavigationBar？我应该手动显示和隐藏页面/小部件吗？

1个回答
8

要设置TabBar的背景颜色，可以将其包裹在所需颜色的Material中。但一般情况下不会将其放置在屏幕底部。

如果您想让视图可以通过滑动来切换，可以使用BottomNavigationBar的onTap触发PageView的页面更改。

很酷，我还不知道关于颜色的事情！为什么通常不使用底部的TabBar？它看起来是实现底部选项卡导航的简单方法！ - Bram Vanbilsen
2
它似乎没有出现在材料设计规范中，可能是因为选项卡选择指示器放在选项卡栏底部不太合理。但如果你喜欢它的外观，那就用吧！ :) - Collin Jackson
1
@CollinJackson，感谢你为我们在Flutter方面提供的众多建议！遵循你的建议，我可以将TabBar放置在底部并对其进行自定义样式设置，另外，我可以使用BottomNavigationBar onTab来触发页面更改。但是，我仍然无法使正确的BottomNavigationBarItem在划动页面到新标签时高亮显示。我在BottomNavigationBar中有currentIndex：_tabController.index，但仍然无法更改选项卡高亮显示。我需要在这方面进行某种状态设置吗？谢谢。 - Larry King
成功将TabController与BottomNavigationBar连接起来，使用TabController的addListener并带回调函数。我认为这是正确的做法。干杯！ - Larry King
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接