原生Android10底部白条,Flutter 10: 图解底部状态栏小尝试

小菜今天来整理一下在学习测试 Flutter 时需用到的底部导航栏 BottomNavigationBar，使用方式很简单，小菜感觉效果比原生的 Android 要好一些。

何为 BottomNavigationBar ?

BottomNavigationBar 为底部导航栏控件，可以包含文字标签和图标等基本信息，通常在三到五个之间；据了解，iOS 的规范底部导航栏最多可设置五个，所以大部分应用均在五个以内；现在很多应用都是以底部导航栏 + 中部主内容 Content 方式来展示。

官网建议，BottomNavigationBar 底部导航栏通常与 Scaffold 一起使用，其中它作为Scaffold.bottomNavigationBar 参数提供。

如何应用 BottomNavigationBar ?

与 body 同级的位置添加 BottomNavigationBar，BottomNavigationBarItem 中可以添加文字标签或图标 (Icons/Image) 等，若图片不存在时会显示空白；这样就可以添加底部状态栏内容，文字和图标的样式也可以随意调整；如下：

bottomNavigationBar: new BottomNavigationBar(

type: BottomNavigationBarType.fixed,

items: [

BottomNavigationBarItem(

icon: new Icon(Icons.category), title: new Text('签到')),

BottomNavigationBarItem(

icon: new Icon(Icons.account_circle), title: new Text('我')),

],

),

只有底部状态栏是不够的，还需要对应的中间展示内容块，可以跟 Android 的思路一样，添加几个 Page() 页作为 Fragment，小菜因为测试内容相对简单，尝试使用了 PageView，即对应 Android 中的 ViewPager，小菜会在今后的测试中详细说明，今天主要是使用基本方法展示主模块内容；如下：

<