flutter 如何实现自定义导航栏

Question

flutter 如何实现自定义导航栏 类似今日头条的头部底部导航

Answer 1

你的意思是不是小图标自定义?如果是的话给你一个方案!

class BottomNavigationWidgetState extends State<BottomNavigationWidget> {
  int _tabIndex = 0;
  var tabImages;
  var appBarTitles = ['发现', '视频', '我的','朋友','账号'];
  /*
   * 存放5个页面，跟fragmentList一样
   */
  var _pageList;
 
  /*
   * 根据选择获得对应的normal或是press的img
   */
  Image getTabIcon(int curIndex) {
    if (curIndex == _tabIndex) {
      return tabImages[curIndex][1];
    }
    return tabImages[curIndex][0];
  }
  /*
   * 获取bottomTab的颜色和文字
   */
  Text getTabTitle(int curIndex) {
    if (curIndex == _tabIndex) {
      return new Text(appBarTitles[curIndex],
          style: new TextStyle(fontSize: 12.0, color: const Color(0xffD43C33)));
    } else {
      return new Text(appBarTitles[curIndex],
          style: new TextStyle(fontSize: 12.0, color: const Color(0xff515151)));
    }
  }
  /*
   * 根据image路径获取图片
   */
  Image getTabImage(path) {
    return new Image.asset(path, width: 20.0, height: 20.0);
  }
 
 
  void initData() {
    /*
     * 初始化选中和未选中的icon
     */
    tabImages = [
      [getTabImage('images/bottom/find.png'), getTabImage('images/bottom/find_selected.png')],
      [getTabImage('images/bottom/video.png'), getTabImage('images/bottom/video_selected.png')],
      [getTabImage('images/bottom/my.png'), getTabImage('images/bottom/my_selected.png')],
      [getTabImage('images/bottom/friend.png'), getTabImage('images/bottom/friend_selected.png')],
      [getTabImage('images/bottom/account.png'), getTabImage('images/bottom/account_selected.png')],
    ];
    /*
     * 5个子界面
     */
    _pageList = [
      new FindPage(),
      new VideoPage(),
      new MyPage(),
      new FriendPage(),
      new AccountPage(),
    ];
  }
 
  @override
  Widget build(BuildContext context) {
    //初始化数据
    initData();
    return Scaffold(
        body: _pageList[_tabIndex],
        bottomNavigationBar: new BottomNavigationBar(
          items: <BottomNavigationBarItem>[
            new BottomNavigationBarItem(
                icon: getTabIcon(0), title: getTabTitle(0)),
            new BottomNavigationBarItem(
                icon: getTabIcon(1), title: getTabTitle(1)),
            new BottomNavigationBarItem(
                icon: getTabIcon(2), title: getTabTitle(2)),
            new BottomNavigationBarItem(
                icon: getTabIcon(3), title: getTabTitle(3)),
             new BottomNavigationBarItem(
                icon: getTabIcon(4), title: getTabTitle(4)),
          ],
          type: BottomNavigationBarType.fixed,
          //默认选中首页
          currentIndex: _tabIndex,
          //点击事件
          onTap: (index) {
            setState(() {
              _tabIndex = index;
            });
          },
        ));
  }

}

原理很简单,icon不是一定是Icon,可以是Container,也可以是images

Answer 2

 int _selectedIndex = 1;
 final _widgetOptions = [
   Text('Index 0: Home'),
   Text('Index 1: Business'),
   Text('Index 2: School'),
 ];

@override
  Widget build(BuildContext context) {   
    return new Scaffold(
        appBar: new AppBar(
          backgroundColor: Colors.grey,
          bottom: new TabBar(
            controller: controller,
            tabs: <Tab>[
              new Tab(icon: new Icon(Icons.arrow_forward)),
              new Tab(icon: new Icon(Icons.arrow_downward)),
              new Tab(icon: new Icon(Icons.arrow_back)),
            ]
          )
        ),        
     body: Center(
       child: _widgetOptions.elementAt(_selectedIndex),
     ),
     bottomNavigationBar: BottomNavigationBar(
       items: <BottomNavigationBarItem>[
         BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
         BottomNavigationBarItem(icon: Icon(Icons.business), title: Text('Business')),
         BottomNavigationBarItem(icon: Icon(Icons.school), title: Text('School')),
       ],
       currentIndex: _selectedIndex,
       fixedColor: Colors.deepPurple,
       onTap: _onItemTapped,
     ),
     );
  }

 void _onItemTapped(int index) {
   setState(() {
     _selectedIndex = index;
   });
 }