Flutter 创建底部Tabbar与子控制器,去除底部点击动画效果

1. 底部Tabbar的创建

底部tabbar的创建和实现使用的是BottomNavigationBar（）函数来创建的，传入一个Items数组，里面存放的是BottomNavigationBarItem元素,类似于iOS，

• BottomNavigationBar常见属性：
  • type：tabbar样式，默认为白色不显示；
  • fixedColor:tabbar选中颜色；
  • currentIndex:当前选中的Item的index
  • selectedFontSize：选中的title的size （默认14.0）
  • unselectedFontSize：未选中的title的size （默认12.0）
  • backgroundColor：背景色
  • iconSize：icon图片的size （默认是24.0）

type: BottomNavigationBarType.fixed,
fixedColor: Colors.greenAccent,
currentIndex: _cuttentIndex,

• BottomNavigationBarItem常见的属性：
  • icon： 底部TabbarItem图片
  • title：底部TabbarItem标题
  • backgroundColor:背景色
    代码实现：

2 子控制器的创建

子控制器的实现原理是在Scaffold的body中,传入对应_currenIndex的控制器实例就；
rootpage中的代码如下：

class _RootPageState extends State<RootPage> {
  int _cuttentIndex = 0;
  List pages = [WeChatPage(),FriendsPage(),FindPage(),MinePage()];
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          fixedColor: Colors.greenAccent,
          currentIndex: _cuttentIndex,
          selectedFontSize: 12.0,
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(icon: Icon(Icons.chat), title: Text('微信')),
            BottomNavigationBarItem(
                icon: Icon(Icons.bookmark), title: Text('通讯录')),
            BottomNavigationBarItem(
                icon: Icon(Icons.history), title: Text('发现')),
            BottomNavigationBarItem(
                icon: Icon(Icons.person_outline), title: Text('我的')),
          ],
          onTap: (int index) {
            _cuttentIndex = index;
            print('index = $index');
            setState(() {}); //刷新状态
          },
        ),
        body: pages[_cuttentIndex],//传入数据源数组中对应index的控制器即可
      ),
    );
  }
}

子控制器需要返回一个有状态的Scaffold，创建不同的Appbar即可，代码如下：

import 'package:flutter/material.dart';

class WeChatPage extends StatefulWidget {
  @override
  _WeChatPageState createState() => _WeChatPageState();
}

class _WeChatPageState extends State<WeChatPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('微信'),
        ),
        body: Center(
          child: Text('Wechat'),
        ));
  }
}

运行效果

3 去除底部Item点击默认的波纹效果

在点击底部的Item时，会出现一个选中的波纹动画效果，这实际上是MaterialApp的一个属性设置，我们可以将这个属性的色值改成透明色即可，代码如下：

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'WeChat',
      theme: ThemeData(
          primaryColor: Colors.greenAccent,
          highlightColor: Color.fromRGBO(0, 0, 0, 0),
          splashColor: Color.fromRGBO(0, 0, 0, 0)),
      home: RootPage(),
    );
  }
}