flutter实现底部导航，底部导航实现方法

大家最近都在讨论新鲜技术-flutter，小编也在学习中，遇到大家都遇到的问题，底部导航。下面给大家贴出底部导航的编写。

1、在lib文件加下，新建文件夹和页面文件

2、 navigator/tab_navigator.dart下示例代码：

/*
 * @Author: your name
 * @Date: 2020-06-13 21:00:21
 * @LastEditTime: 2020-06-13 22:59:25
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \flutter_word\flutter_app\lib\navigator\tab_navigator.dart
 */
import 'package:flutter/material.dart';
import 'package:flutter_app/pages/home_page.dart';
import 'package:flutter_app/pages/movie_page.dart';
import 'package:flutter_app/pages/my_page.dart';
import 'package:flutter_app/pages/search_page.dart';
import 'package:flutter_app/pages/tv_page.dart';
import 'package:flutter_app/pages/variety_page.dart';
class TabNavigator extends StatefulWidget{
  @override
  _TabNavigatorState createState()=>_TabNavigatorState();
}
class _TabNavigatorState extends State<TabNavigator>{
  final _defaultColor = Colors.grey;
  final _activeColor = Colors.blue;
  int _currentIndex = 0;
  final PageController _controller=PageController(
    initialPage: 0,
  );
  @override
  Widget build(BuildContext context){
      return Scaffold(
        body:PageView(
          controller: _controller,
          children: <Widget>[
            HomePage(),
            TvPage(),
            MoviePage(),
            VarietyPage(),
            SearchPage(),
            MyPage(),
          ],
        ),
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: _currentIndex,
          onTap: (index){
            _controller.jumpToPage(index);
            setState(() {
              _currentIndex = index;
            });
          },
          type: BottomNavigationBarType.fixed,
          items:[
            BottomNavigationBarItem(icon: Icon(
              Icons.home,
              color: _defaultColor, ),
              activeIcon: Icon(
                Icons.home, color:_activeColor),
                title: Text('首页',
                style: TextStyle(
                  color: _currentIndex !=0 ? _defaultColor : _activeColor)
                  )
 
            ),
            BottomNavigationBarItem(icon: Icon(
              Icons.missed_video_call,
              color: _defaultColor, ),
              activeIcon: Icon(
                Icons.missed_video_call, color:_activeColor),
                title: Text('剧集',
                style: TextStyle(
                  color: _currentIndex !=1 ? _defaultColor : _activeColor)
                  )
 
            ),
            BottomNavigationBarItem(icon: Icon(
              Icons.movie,
              color: _defaultColor, ),
              activeIcon: Icon(
                Icons.movie, color:_activeColor),
                title: Text('电影',
                style: TextStyle(
                  color: _currentIndex !=2 ? _defaultColor : _activeColor)
                  )
 
            ),
            BottomNavigationBarItem(icon: Icon(
              Icons.whatshot,
              color: _defaultColor, ),
              activeIcon: Icon(
                Icons.whatshot, color:_activeColor),
                title: Text('综艺',
                style: TextStyle(
                  color: _currentIndex !=3 ? _defaultColor : _activeColor)
                  )
 
            ),
             BottomNavigationBarItem(icon: Icon(
              Icons.perm_identity,
              color: _defaultColor, ),
              activeIcon: Icon(
                Icons.perm_identity, color:_activeColor),
                title: Text('我的',
                style: TextStyle(
                  color: _currentIndex !=4 ? _defaultColor : _activeColor)
                  )
 
            )
          ]),
      );
  }
}

3、 main.dart引入代码：

/*
 * @Author: your name
 * @Date: 2020-06-08 22:09:39
 * @LastEditTime: 2020-06-13 23:10:24
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \flutter_word\flutter_app\lib\main.dart
 */
import 'package:flutter/material.dart';
import 'package:flutter_app/navigator/tab_navigator.dart';
 
void main()=>runApp(MyApp());
 
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title:'Flutter Demo',
      theme: ThemeData(
        primarySwatch:Colors.blue
      ),
      home: TabNavigator(),
     
    );
  }
 
}

4、效果如下：

感谢大家的阅读，你的阅读是我前进的动力。