BottomAppBar是 底部工具栏的意思,这个要比BottomNavigationBarwidget灵活很多,可以放置文字和图标,当然也可以放置容器。常用属性: color: 底部工具栏的颜色。 shape:设置底栏的形状,一般使用这个都是为了和floatingActionButton融合,所以使用的值都是CircularNotchedRectangle(),有缺口的圆形矩形。 child : 里边可以放置大...
这里我们来尝试实现一个不规则的 BottomNavigationBar,首先了解两个系统组件:floatingActionButton和BottomAppBar <!--more--> floatingActionButton floatingActionButton用于创建一个浮动的按钮,有两种样式:一种是圆形的纯图标的;一种是椭圆的带有图标或文案的。 示例如下: 代码语言:txt 复制 void main() => runApp...
BottomNavigationBar(/// 设置当前的导航页面索引currentIndex:_currentIndex,/// 导航栏按钮点击事件onTap:(pageIndex){/// 跳转到对应的导航页面_pageController.jumpToPage(pageIndex);setState((){_currentIndex=pageIndex;});},/// 图标和文本位置不变type:BottomNavigationBarType.fixed,/// 底部导航栏的按钮条...
Flutter为我们提供了一个控件BottomNavigationBar,结合BottomAppBar实现不规则底部导航栏,我们主要用到这两个控件,先看一下这两个控件的介绍: BottomNavigationBar简介 BottomNavigationBar({Key?key,requiredthis.items,//必填项,长度必须至少为两个,每个项目的图标和标签不能为nullthis.onTap,//点击事件this.currentInd...
三、BottomNavigationBar 底部导航栏 通过Scaffold 组件的 bottomNavigationBar 字段 , 可以设置底部导航栏菜单 , 设置一个 BottomNavigationBar 组件 ; BottomNavigationBar 组件中可设置 int currentIndex 当前的索引 , ValueChanged? onTap 点击事件 , BottomNavigationBar 组件需要设置组件的类型 , 在 BottomNavigation...
BottomNavigationBar 组件是底部导航栏 , 用于设置给 Scaffold 组件的 bottomNavigationBar 字段 ; 下面是 BottomNavigationBar 组件的构造函数源码 , 该构造函数的可选参数列表就是可以设置的字段属性 ; classBottomNavigationBarextendsStatefulWidget{ /// Creates a bottom navigation bar which is typically used as ...
7.bottom :导航栏下面显示的widget 8.brightness :状态栏的亮度 9. iconTheme,左侧图表的样式 12. toolbarOpacity: 0.5, //整个导航栏的不透明度 14. titleSpacing: 10, //标题两边的空白区域, appBar代码: appBar: AppBar( title: Container(
1、BottomNavigationBar 底部导航条 2、AppBar 自定义顶部样式 3、TabBar 的样式配置 4、TabController 的使用 一、BottomNavigationBar BottomNavigationBar是底部导航条,可以让我们定义底部 Tab 切换,BottomNavigationBar是Scaffold组件的参数。抛开IOS不说,因为我是做Android开发的,在Android原生中你没有封装有自己的底部...
1、普通效果:我们可以通过Scaffold的bottomNavigationBar属性来设置底部导航,通过Material组件库提供的BottomNavigationBar和BottomNavigationBarItem两种组件来实现Material风格的底部导航栏。 2、如图效果:Material组件库中提供了一个BottomAppBar组件,它可以和FloatingActionButton配合实现这种“打洞”效果。