Flutter 10: 图解底部状态栏小尝试

96
阿策神奇
0.2 2018.08.28 21:08* 字数 796

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

何为 BottomNavigationBar ?

      BottomNavigationBar 为底部导航栏控件,可以包含文字标签和图标等基本信息,通常在三到五个之间;据了解,iOS 的规范底部导航栏最多可设置五个,所以大部分应用均在五个以内;现在很多应用都是以底部导航栏 + 中部主内容 Content 方式来展示。
      官网建议,BottomNavigationBar 底部导航栏通常与 Scaffold 一起使用,其中它作为Scaffold.bottomNavigationBar 参数提供。

如何应用 BottomNavigationBar ?

  1. 与 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('我')),
  ],
),
  1. 只有底部状态栏是不够的,还需要对应的中间展示内容块,可以跟 Android 的思路一样,添加几个 Page() 页作为 Fragment,小菜因为测试内容相对简单,尝试使用了 PageView,即对应 Android 中的 ViewPager,小菜会在今后的测试中详细说明,今天主要是使用基本方法展示主模块内容;如下:
body: new PageView.builder(
  itemBuilder: (BuildContext context, int index) {
    var str =
        (index == 0) ? "这里是【HomePage】->【签到】页面" : "这里是【HomePage】->【我】页面";
    return new Center(
        child: new Container(
      width: 340.0,
      child: new Card(
          color: Colors.blue,
          elevation: 16.0,
          child: new FlatButton(
            child:
                new Text(str, style: new TextStyle(color: Colors.white)),
          )),
    ));
  },
  itemCount: 2,
),
  1. 此时主模块 PageView 可以滑动切换内容,但是对应的底部状态栏不会变化;因为目前没有绑定对应的点击事件等;此时需要添加 PageController 和 状态栏的 onTap 点击事件;如下:
int _currentIndex = 0;
var _pageController = new PageController(initialPage: 0);
void _pageChange(int index) {
    if (_currentIndex != index) {
      _currentIndex = index;
    }
}
// 添加 PageView 的 PageController
body: new PageView.builder(
  onPageChanged: _pageChange,
  controller: _pageController,
  itemBuilder: (BuildContext context, int index) {
    ...
  }
),
// 添加 BottomNavigationBar 的 onTap
bottomNavigationBar: new BottomNavigationBar(
  type: BottomNavigationBarType.fixed,
  items: [
    ...
  ],
  //设置当前的索引
  currentIndex: _currentIndex,
  //tabBottom的点击监听
  onTap: (int index) {
    _pageController.animateToPage(index,
        duration: new Duration(seconds: 2),
        curve: new ElasticOutCurve(0.8));
    _pageChange(index);
    _currentIndex = index;
  },
),
  1. 此时,点击底部状态栏对应的 PageView 会切换内容,但是底部状态栏并没有改变样式,因为目前用的时固定的图标和文字,此时需要处理图标和文字切换时的样式,如下:
var _bottomText = ['签到', '我'];
var _bottomIcons = [
  [
    new Icon(Icons.category, color: Colors.grey),
    new Icon(Icons.category, color: Colors.blue),
  ],
  [
    new Icon(Icons.account_circle, color: Colors.grey),
    new Icon(Icons.account_circle, color: Colors.blue),
  ]
];
Icon changeIconStyle(int curIndex) {
  if (curIndex == _currentIndex) {
    return _bottomIcons[curIndex][1];
  }
  return _bottomIcons[curIndex][0];
}
Text changeTextStyle(int curIndex) {
  if (curIndex == _currentIndex) {
    return new Text(_bottomText[curIndex],
        style: new TextStyle(color: Colors.blue));
  } else {
    return new Text(_bottomText[curIndex],
        style: new TextStyle(color: Colors.grey));
  }
}

bottomNavigationBar: new BottomNavigationBar(
  type: BottomNavigationBarType.fixed,
  items: [
    new BottomNavigationBarItem(
        icon: changeIconStyle(0), title: changeTextStyle(0)),
    new BottomNavigationBarItem(
        icon: changeIconStyle(1), title: changeTextStyle(1)),
  ],
  ...
),
  1. 然而小菜添加了更改状态时的样式,点击底部状态栏时依旧不会变色;小菜查了很久突然发现,小菜的 HomePage() 继承的是 StatelessWidget 无状态样式,此时更换为 StatefulWidget 有状态样式,并实现对应方法;如下:
class HomePage extends StatefulWidget {
  String result;

  HomePage(this.result);

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new HomePageState();
  }
}

class HomePageState extends State<HomePage> {
  int _currentIndex = 0;
  ...
}

      至此,底部状态栏 BottomNavigationBar 配合滑动 PageView 的基本功能已经完成。

实用小贴士

  1. 通过点击 BottomNavigationBar 对 PageView 切换过程中,可以设置动画过程,也可以直接跳转到对应页面,需要设置 animateToPage 或 jumpToPage;如下:
onTap: (int index) {
    // 切换时没有动画效果
//    _pageController.jumpToPage(index);
    // 切换时添加动画效果
    _pageController.animateToPage(index,
        duration: new Duration(seconds: 2),
        curve: new ElasticOutCurve(0.8));
    _pageChange(index);
    _currentIndex = index;
},
  1. BottomNavigationBar 有两种样式分别为 shiftingfixed;直接效果图,shifting 样式时会突出显示选中的 item,其他的 item 文字隐藏;fixed 样式均分,没有突出效果;如下:

type: BottomNavigationBarType.shifting,

shifting

shifting

type: BottomNavigationBarType.fixed,

fixed
fixed

      GitHub Demo


      小菜刚接触 Flutter 时间不长,还有很多不清楚和不理解的地方,如果又不对的地方还希望多多指出。以下是小菜公众号,欢迎闲来吐槽~

公众号

小菜学Flutter