本文共 7056 字,大约阅读时间需要 23 分钟。
通常与Scaffold.bottomNavigationBar一起使用的容器,并且在顶部可以有一个凹口,以便为重叠的FloatingActionButton腾出空间。
通常与脚手架和FloatingActionButton一起使用。
color →颜色 底部应用栏的背景色。 […]
elevation 将此底部应用栏相对于其父级放置的z坐标。 […] notchMargin:FloatingActionButton和BottomAppBar的缺口之间的边距。 shape → NotchedShape 为浮动操作按钮设置的槽口。 […],这个槽口就是放置FloatingActionButton的,实现类有两个AutomaticNotchedShape和CircularNotchedRectangleMaterialApp( home: Scaffold( appBar: AppBar( title:Text("组件"), ), body:SizedBox(), floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, floatingActionButton: FloatingActionButton( backgroundColor:Colors.blue, child: Icon(Icons.add), onPressed: (){}, ), bottomNavigationBar:BottomAppBar( //跟FloatingActionButton的margin值 notchMargin: 4.0, color: Colors.deepPurpleAccent, elevation: 2.0, shape: CircularNotchedRectangle(), child: Row( mainAxisAlignment:MainAxisAlignment.spaceAround, mainAxisSize: MainAxisSize.max, children:[ IconButton(icon:Icon(Icons.directions)), IconButton(icon:Icon(Icons.directions_railway)) ], crossAxisAlignment: CrossAxisAlignment.center, ), ), ) );
效果图:
底部导航栏,通常与Scaffold结合使用,在此将其作为Scaffold.bottomNavigationBar参数提供
底部导航栏的类型会自动更改其子项目的显示方式。如果未指定,则当项目少于四个时,它将自动设置为BottomNavigationBarType.fixed,否则设置为BottomNavigationBarType.shifting1、BottomNavigationBarType.fixed:
少于四个项目时的默认值。 如果selectedItemColor为非null,则将使用selectedItemColor呈现所选项目,否则将使用主题的ThemeData.primaryColor。 如果backgroundColor为null,则导航栏的背景色默认为Material背景色ThemeData.canvasColor(本质上是不透明的白色) 2、BottomNavigationBarType.shifting: 当有四个或更多项目时的默认值。 如果selectedItemColor为null,则所有项目均以白色呈现。导航栏的背景颜色与所选项目的BottomNavigationBarItem.backgroundColor相同。 在这种情况下,假设每个项目的背景颜色都不同,那么背景颜色与白色的对比度很好1.backgroundColor→BottomNavigationBar本身的颜色
2.currentIndex→被选中的BottomNavigationBarItem的项目索引 3.elevation →此BottomNavigationBar的z坐标 4.fixedColor →The value of selectedItemColor. 5.iconSize→所有BottomNavigationBarItem图标的大小 6.items → List 底部导航栏中的 子项目列表 7.onTap→ValueChanged 点击其中一项时调用 8.selectedIconTheme → IconThemeData, 当前选定的BottomNavigationBarItem.icon中图标的大小,不透明度和颜色. 同理unselectedIconTheme 9.selectedItemColor→ 选定的BottomNavigationBarItem.icon和BottomNavigationBarItem.label的颜色。 同理unselectedItemColor 10.selectedLabelStyle→TextStyle 选中BottomNavigationBarItem标签的TextStyle 同理unselectedLabelStyle 11.showSelectedLabels→布尔 是否显示未选择的BottomNavigationBarItems的标签 12.showUnselectedLabels→布尔 是否显示所选BottomNavigationBarItem的标签 13.type → BottomNavigationBarType 定义BottomNavigationBar的布局和行为 14.unselectedFontSize → double 未选择BottomNavigationBarItem标签的字体大小MaterialApp( home: Scaffold( appBar: AppBar( title:Text("组件"), ), body:SizedBox(), floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat, floatingActionButton: FloatingActionButton( backgroundColor:Colors.blue, child: Icon(Icons.add), onPressed: (){}, ), bottomNavigationBar:BottomNavigationBar( backgroundColor: Colors.blueGrey, currentIndex: 1, selectedItemColor: Colors.red, selectedLabelStyle: TextStyle(color:Colors.amber), unselectedItemColor: Colors.blue, showUnselectedLabels: true, type: BottomNavigationBarType.shifting, items:[ BottomNavigationBarItem(icon: Icon(Icons.directions_subway),title: Text("TAB1",)), BottomNavigationBarItem(icon: Icon(Icons.directions_subway),title: Text("TAB2",)), BottomNavigationBarItem(icon: Icon(Icons.directions_subway),title: Text("TAB3",)), BottomNavigationBarItem(icon: Icon(Icons.directions_subway),title: Text("TAB3",)), BottomNavigationBarItem(icon: Icon(Icons.directions_subway),title: Text("TAB3",)), //BottomNavigationBarItem(icon: IconButton(icon:Icon(Icons.directions_subway)),title: Text("TAB4",style: TextStyle(color: Colors.blue))), //BottomNavigationBarItem(icon: IconButton(icon:Icon(Icons.directions_subway)),title: Text("TAB5",style: TextStyle(color: Colors.blue))), ], ), ) );
效果图:
BottomNavigationBarItem(icon: IconButton(icon:Icon(Icons.directions_subway)),title: Text(“TAB4”,style: TextStyle(color: Colors.blue))),BottomNavigationBarItem的icon不能是IconButton,否则selectedItemColor,unselectedItemColor这些属性会失效,因为他们主要是作用于Icon组件的,而不是包装ICon的IconButton
属性:
activeIcon→小部件 选择此底部导航项目时显示的备用图标。可以设置一个跟icon属性不一样的图标,当被选中的时候就会显示activeIcon的图标 backgroundColor→ 材质BottomNavigationBar的背景放射状动画的颜色。只有给被选中的项目设置之后才会有效,并且是全部项目都是同样的背景,覆盖了BottomNavigationBar的backgroundColor属性与CustomScrollView集成的material design应用程序栏。
与AppBar类似,包含工具栏和其他可能的小部件,如Tabbar和FlexibleSpaceBar。应用程序栏通常公开一个或多个带有iconButton的常见actions ,对于不太常见的操作,iconButton可以选择后跟一个popupMenuButton。 SliverAppBar通常用作customscrollview的第一个子项,它允许应用程序条与滚动视图集成,以便它可以根据滚动偏移量而改变高度,或浮动在滚动视图中其他内容的上方。有关屏幕顶部的固定高度应用程序栏,请参见AppBar,用于scaffold.appbar属性。 appbar在底部(如果有的话)上方显示toolbar widgets, leading, title, and actions,。如果指定了一个flexibleSpace 部件,那么它就位于工具栏和底部小部件的后面。只有当floating也是true时,才能将属性snap 设置为true
1、actions → List
在标题小部件之后显示的小部件。[…] 2. actionsIconTheme → IconThemeData 用于拖尾应用程序栏图标的颜色、不透明度和大小。仅当尾随图标的主题与前导图标的主题不同时,才应使用此选项。[…] 3、automaticallyImplyLeading →布尔 控制如果为空,是否应尝试暗示前导小部件。[…] 4、backgroundColor → Color 用于应用程序栏材质的颜色。通常这应该与亮度、IContheme、文本主题一起设置。[…] 5、bottom → PreferredSizeWidget 这个小部件出现在appbar的底部。[…] 6、brightness → Brightness 应用程序条材质的亮度。通常,这与背景颜色、IContheme、文本主题一起设置。[…]/ 7、centerTitle → bool 标题是否应居中。[…] 8、elevation → double 当此应用程序栏位于其他内容之上时,放置它的Z坐标。这将控制应用程序栏下方阴影的大小。[…] 9、expandedHeight → double 应用程序栏完全展开时的大小。[…] 10。flexibleSpace → Widget 此小部件堆叠在工具栏和选项卡栏后面。它的高度将与应用程序栏的总高度相同。[…] 11.floating → bool= 当用户向应用程序栏滚动时,应用程序栏是否应该变为可见。[…] 12、forceElevated → bool 是否显示适合于立面的阴影,即使内容未在AppBar下滚动。[…] 13、forceElevated → bool= 用于应用程序栏图标的颜色、不透明度和大小。通常这与背景色、亮度、文本主题一起设置。[…] 14.leading → Widget 在标题前显示的小部件。[…] 15、pinned → bool 应用程序栏是否应在滚动视图开始时保持可见。[…] 16.primary → bool 此应用程序栏是否显示在屏幕顶部。[…] 17 shape → ShapeBorder 材料的形状和阴影。[…] 18、snap → bool 如果snap和floating为true,则浮动应用程序栏将“捕捉”到视图中。[…] 19、textTheme → TextTheme 应用程序栏中用于文本的排版样式。通常这与亮度背景色、IContheme一起设置。[…] 20.title → Widget appbar中显示的主小部件。[…] 21 titleSpacing 标题内容在水平轴上的间距。即使没有前导内容或动作,也会应用此间距。如果希望title占用所有可用空间,请将此值设置为0.0。[…]material design AppBar的可扩展和折叠组件。
最常用于SliverAppBar.flexibleSpace,随着应用程序滚动而伸缩,以便AppBar从应用程序顶部到达应用程序滚动内容的顶部。
调整AppBar大小的窗口小部件必须将其包装在FlexibleSpaceBar.createSettings返回的窗口小部件中,才能将尺寸信息向下传递到FlexibleSpaceBar。
background →小部件
展开时显示在标题后面。 […] centerTitle→布尔 标题是否应该居中。 […] collapseMode → CollapseMode 滚动时合拢效果。 […] title:展开时,柔性空格键的主要内容。 […] titlePadding→EdgeInsetsGeometry 定义标题从窗口小部件的左下角或其中心插入的距离。 […]SnackBar的按钮,
disabledTextColor
按钮禁用标签颜色。此颜色在解除snackbarAction后显示。SnackBar消失的时候显示 label 按钮标签。 onpressed→voidCallback 按下按钮时要调用的回调。不能为空。[…] textColor 按钮标签颜色。如果未提供,则默认为AccentColor。转载地址:http://xffgi.baihongyu.com/