【Flutter-Tab】

截屏2020-12-28 下午1.30.02.png
#######默认初始类main.dart，
新建主模RootPage，四个子模块HomePage、CategoryPage，CartPage，AccountPage类

main.dart

import 'package:flutter/material.dart';
import 'package:flutterdemo/rootPage.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      theme: ThemeData.light(),
      home: RootPage(),
    );
  }
}

RootPage：主界面

import 'package:flutter/material.dart';
import './cartPage.dart';
import './homePage.dart';
import './accountPage.dart';
import './categoryPage.dart';

class RootPage extends StatefulWidget {
  @override
  _RootPagePageState createState() => _RootPagePageState();
}

class _RootPagePageState extends State<RootPage> {
  int _currentIndex = 0;
  @override
  void initState() {
    super.initState();
    _currentIndex = 0;
  }

//icon: Icon(Icons.home, color: Colors.blue), 可以直接设置颜色
  final List<BottomNavigationBarItem> bottomsTabs = [
    BottomNavigationBarItem(
      backgroundColor: Colors.blue,
      icon: Icon(Icons.home),
      label: '首页',
    ),
    BottomNavigationBarItem(
      backgroundColor: Colors.green,
      icon: Icon(Icons.category),
      label: '分类',
    ),
    BottomNavigationBarItem(
      backgroundColor: Colors.amber,
      icon: Icon(Icons.chat),
      label: '购物车',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      label: '我的',
    )
  ];

  final List<Widget> tabBodies = [
    HomePage(),
    CategoryPage(),
    CartPage(),
    AccountPage()
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: tabBodies[_currentIndex],
        bottomNavigationBar: BottomNavigationBar(
          items: bottomsTabs,
          currentIndex: _currentIndex,
          //一般都是使用fixed模式,如果不设置，4个tab以上时，只选中的显示图片+文字，其他的图片
          //默认为shifting风格
          //type: BottomNavigationBarType.shifting,
          type: BottomNavigationBarType.fixed,
          //被选择item的颜色
          selectedItemColor: Colors.amber[800],
          //未选择item的颜色
          unselectedItemColor: Colors.blue,
          //设置导航菜单背景颜色，如果type为shifting风格时，此设置无效为默认白色背景
          //在type为fixed风格时，则导航背景为设置的该背景颜色
          backgroundColor: Colors.white,
          showSelectedLabels: true, //导航是否显示文字说明，默认为true显示
          onTap: (index) {
            _changePage(index);
            print(index);
          },
        ));
  }

  /*切换页面*/
  void _changePage(int index) {
    /*如果点击的导航项不是当前项  切换 */
    if (index != _currentIndex) {
      setState(() {
        _currentIndex = index;
      });
    }
  }
}

HomePage类，
CategoryPage，CartPage，AccountPage同方式创建

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('首页11'),
          //导航颜色
          backgroundColor: Colors.pink,
        ),
        body: Center(
          child: Text('homePage11'),
        ));
  }
}