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

2020-06-15   阅读:266   分类:后端    标签: Flutter

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

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

image.png

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、效果如下:

GIF.gif

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

如果本文对你有用就点击下方广告赞助下呗!

【腾讯云】11.11 云上盛惠,云产品限时抢购,1核2G云服务器首年88元

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/adetail/342.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
头像

简忆博客
仕而优则学,学而优则仕。

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×