美文网首页
Flutter 入门到放弃(三)教你如何使用底部导航

Flutter 入门到放弃(三)教你如何使用底部导航

作者: 曾经也是个少年 | 来源:发表于2019-11-25 17:37 被阅读0次
    import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    import 'package:jifeng/view/about_page.dart';
    import 'package:jifeng/view/back_page.dart';
    import 'package:jifeng/view/index_page.dart';
    import 'package:jifeng/view/work_page.dart';
    import 'package:flutter/widgets.dart';
    class IndexPage extends StatefulWidget {
      @override
      _IndexPageState createState() => _IndexPageState();
    }
    class _IndexPageState extends State<IndexPage>{
      int _currentIndex = 1;
      final List<Widget> _children = [HomePage(), WorkPage(), BackPage(), AboutPage()];
    
      final List<BottomNavigationBarItem> _list = <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.home,color: Color(0XFFF36926),),
          title: Text('Index',style: TextStyle(color: Color(0XFFF36926)),),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.work,color: Color(0XFFF36926),),
          title: Text('Work',style: TextStyle(color: Color(0XFFF36926)),),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.backup,color: Color(0XFFF36926),),
          title: Text('Back',style: TextStyle(color: Color(0XFFF36926)),),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.person,color: Color(0XFFF36926),),
          title: Text('About',style: TextStyle(color: Color(0XFFF36926)),),
        ),
      ];
      void onTabTapped(int index){
        setState((){
          _currentIndex = index;
        });
      }
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return Scaffold(
          appBar: AppBar(
            title: Text('splash'),
            centerTitle: true,
          ),
          bottomNavigationBar: BottomNavigationBar(
            type: BottomNavigationBarType.shifting,
            onTap: onTabTapped,
            currentIndex: _currentIndex,
            items: _list,
          ),
          body: _children[_currentIndex],
        );
      }
    
    }
    
    image.png

    相关文章

      网友评论

          本文标题:Flutter 入门到放弃(三)教你如何使用底部导航

          本文链接:https://www.haomeiwen.com/subject/owpjwctx.html