美文网首页
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