Flutter--BottomNavigationBar组件

BottomNavigationBar

属性	释义
items	Lisst底部导航按钮集合
iconSize	icon
currentIndex	默认选中的tab
onTap	选中变化函数
fixedColor	选中的颜色
type	BottomNavigationBarType.fixed, BottomNavigationBarType.shifting

eg: 创建tab

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home: Tabs()
    );
  }
}

class Tabs extends StatefulWidget {
  Tabs({Key key}) : super(key: key);


  _TabsState createState() => _TabsState();
}

class _TabsState extends State {
  int current_index = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title : Text("TabBarDemo"),
      ),
      body: Text("TabBar"),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: current_index,
        type: BottomNavigationBarType.fixed,
        onTap: (int index) {
          setState(() {
            current_index = index;
          });
        },
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text("首页")
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.category),
              title: Text("体系")
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text("设置")
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.supervised_user_circle),
            title: Text("我的")
          ),
        ],
      ),
    );
  }
}

BottomNavigationBar跳转页面示例

• 首先在lib下创建pages目录，并创建tab对应的页面

eg：首页

import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Text("首页");
  }
}

• 将Tabs抽取出来并将页面引入

import 'package:flutter/material.dart';
import 'package:flutter_app/pages/home.dart';
import 'package:flutter_app/pages/mine.dart';
import 'package:flutter_app/pages/setting.dart';
import 'package:flutter_app/pages/system.dart';


class Tabs extends StatefulWidget {
  Tabs({Key key}) : super(key: key);
  _TabsState createState() => _TabsState();
}

class _TabsState extends State {
  int _currentIndex=0;
  List _pageList=[
    HomePage(),
    SystemPage(),
    SettingPage(),
    MinePage()
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Demo"),
      ),
      body: this._pageList[this._currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: this._currentIndex,   //配置对应的索引值选中
        onTap: (int index){
          setState(() {  //改变状态
            this._currentIndex=index;
          });
        },
        fixedColor:Colors.blue,  //选中的颜色
        type:BottomNavigationBarType.fixed,   //配置底部tabs可以有多个按钮
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text("首页")
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.category),
              title: Text("体系")
          ),


          BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text("设置")
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text("我的")
          )
        ],
      ),
    );
  }
}

• main.dart

import 'package:flutter/material.dart';
import 'pages/tabs.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home: Tabs()
    );
  }
}