tab 切换 和 BottomNavigationBar 自定义 底部导航条

BottomNavigationBar 组件

   BottomNavigationBar 是底部导航条，可以让我们定义底部 Tab 切换，bottomNavigationBar是 Scaffold 组件的参数。

 

BottomNavigationBar 常见的属性

 

items  List<BottomNavigationBarItem> 底部导航条按钮集合

iconSize  icon

currentIndex 默认选中第几个

onTap 选中变化回调函数

fixedColor 选中的颜色

type  BottomNavigationBarType.fixed  BottomNavigationBarType.shifting

 

案例

 

案例代码

main.dart里面

   return MaterialApp(

       home: Home()

    );

home组件里面

import 'package:flutter/material.dart';

import 'home/index.dart';
import 'home/class.dart';
import 'home/my.dart';

class Home extends StatefulWidget{
  Home({Key key});
  _HomeState createState() => _HomeState();
}

class _HomeState extends State {
  var _currentIndex = 0;
  var tabs = [Index(), ClassIf(), My()];
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('欢迎')
      ),
      body: tabs[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        type: BottomNavigationBarType.fixed,
        onTap: (val) {
          setState(() {
            _currentIndex = val;
          });
        },
        items: [
          BottomNavigationBarItem(
            title: Text('首页'),
            icon: Icon(Icons.home)
          ),
          BottomNavigationBarItem(
              title: Text('分类'),
              icon: Icon(Icons.category)
          ),
          BottomNavigationBarItem(
              title: Text('我的'),
              icon: Icon(Icons.my_location)
          ),
        ],
      ),
    );
  }
}