位置不同#xff1a;BottomNavigationBar通常位于屏幕底部#xff0c;用于主要导航#xff1b;而TabBar通常位于屏幕顶部或底部#xff0c;用于切换不同的视图或页面。

样式不…区别

BottomNavigationBarr和TabBar都是用于创建导航栏的组件但它们有一些区别。

位置不同BottomNavigationBar通常位于屏幕底部用于主要导航而TabBar通常位于屏幕顶部或底部用于切换不同的视图或页面。

样式不同BottomNavigationBar是一个水平的导航栏通常包含固定数量的图标和标签。

它提供了固定的样式并且可以自动处理选中和未选中状态的切换。

TabBar可以水平或垂直显示通常用于展示多个选项卡。

它提供了更多的自定义选项比如可以设置自定义的标签样式、背景色等。

功能不同BottomNavigationBar通常用于在不同的主页面之间进行导航每个图标对应一个页面。

它的功能相对简单适用于主要导航。

TabBar用于切换不同的视图或页面并且可以与TabBarView一起使用来展示与每个选项卡对应的内容。

它在应用程序中的使用场景更加广泛适用于切换和展示多个相关页面或功能。

总之BottomNavigationBar适用于简单的主导航TabBar适用于更复杂的页面切换和内容展示。

示例来源于qq阅读

BottomNavigationBar是Flutter中用于创建底部导航栏的组件。

它通常与TabBarView一起使用用于在不同的选项卡之间切换内容。

BottomNavigationBar有一个items属性其中可以定义导航栏的每个选项卡。

每个选项卡都可以包含一个图标和一个文本标签。

class

key);overrideSwitcherContainerState

createState()

Text(name),),bottomNavigationBar:

const

[BottomNavigationBarItem(label:

首页,

Icon(Icons.home)),BottomNavigationBarItem(label:

书籍,

Icon(Icons.book)),BottomNavigationBarItem(label:

icon:

Icon(Icons.perm_identity)),],currentIndex:

_currentIndex,//

}如果没有特殊需求的话使用系统提供的就可以。

如果想要点不太一样的可以看一下下面这两个库

curved_navigation_bargoogle_nav_bar

一个易于实现曲面导航条

https://pub-web.flutter-io.cn/packages/curved_navigation_bar

flutter

MediaQuery.of(context).size.width,height:

MediaQuery.of(context).size.height,child:

Colors.white,width:

MediaQuery.of(context).size.width,height:

MediaQuery.of(context).size.height

150,child:

Text(name),)],),bottomNavigationBar:

const

[Icon(Icons.home),Icon(Icons.book),Icon(Icons.perm_identity)],height:

60,backgroundColor:

一个美丽而生动的底部导航。

导航栏使用您当前的主题但您可以自由自定义

官方地址

https://pub-web.flutter-io.cn/packages/bottom_navy_bar

flutter

Text(name),),bottomNavigationBar:

BottomNavyBar(//

Text(首页)),BottomNavyBarItem(textAlign:

const

Text(书架)),BottomNavyBarItem(textAlign:

const

Icon(Icons.perm_identity),title:

const

在Flutter中TabBar是一个常用的小部件用于创建一个具有选项卡的导航栏。

它通常与TabBarView一起使用以实现在不同选项卡之间切换内容的功能。

TabBar由TabBar和TabBarView两个关键组件组成。

TabBarTabBar小部件定义了选项卡的外观和交互方式。

它可以包含多个选项卡每个选项卡都由一个Tab对象表示。

可以通过设置controller属性来指定与TabBarView关联的TabController以便在选项卡之间进行切换。

TabBarViewTabBarView小部件是一个可滚动的容器用于显示与当前选中选项卡相关联的内容。

每个选项卡对应一个子小部件并且可以通过设置controller属性来与TabBar关联。

class

key);overrideSwitcherContainerState

createState()

{super.initState();tabController

vsync:

释放tabController.dispose();}overrideWidget

build(BuildContext

使用TabBar作为AppBar的bottom属性controller:

tabController,

在Flutter中TabBar和TabBarView之间的切换通常需要使用动画效果。

为了实现这种动画效果需要使用TickerProvider它提供了一个Ticker对象用于生成动画的时间。

而SingleTickerProviderStateMixin是一个实现了TickerProvider的混合类。

return

设置选中选项卡的文本颜色unselectedLabelColor:

Colors.grey,

Text(Settings),)],),),],);这里推荐一下tab_indicator_styler这个库是用来修改指示器样式的

官方地址

https://pub-web.flutter-io.cn/packages/tab_indicator_styler

flutter

package:tab_indicator_styler/tab_indicator_styler.dart;Scaffold(appBar:

10,bottom:

使用TabBar作为AppBar的bottom属性controller:

tabController,

3)),],),);注意MaterialIndicator风格的指示器的宽度必须使用indicatorSize:

TabBarIndicatorSize.tab也就是默认值否则会报错

indicator:

圆点距离文字的间距正数在下面负数在上面distanceFromCenter:

20,),indicator:

RectangularIndicator(bottomLeftRadius:

30,topLeftRadius: