Flutter 小案例

底部tabbar 实现

import 'package:flutter/material.dart';
import 'bottom_nav_bar.dart';

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

class MyApp extends StatelessWidget {
   
  @override
  Widget build(BuildContext context) {
   
    return MaterialApp(
      title: 'myApp',
      home: BottomNavBar(),
    );
  }
}

import 'package:flutter/material.dart';
import './pages/email_screen.dart';
import './pages/page_screen.dart';
import './pages/play_screen.dart';
import './pages/home_screen.dart';

class BottomNavBar extends StatefulWidget {
   
  @override
  _BottomNavBarState createState() => _BottomNavBarState();
}

class _BottomNavBarState extends State<BottomNavBar> {
   
  final _BtmNavBarColor = Colors.blue;
  int _currentIndex = 0;
  List<Widget> pageList = new List(); // 此处也可以直接赋值数组
  // 重写初始化方法
  @override
  void initState() {
   
    // 1.将页面装载到List组件中
    pageList
      ..add(HomeScreen())
      ..add(PageScreen())
      ..add(EmailScreen())
      ..add(PlayScreen());
    // 通过父类调用初始化方法
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
   
    return Scaffold(
      //3.设置要显示的组件
      body: pageList[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
              icon: Icon(
                Icons.home,
                color: _BtmNavBarColor,
              ),
              title: Text(
                'Home',
                style: TextStyle(color: _BtmNavBarColor),
              )),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.pages,
                color: _BtmNavBarColor,
              ),
              title: Text(
                'Pages',
                style: TextStyle(color: _BtmNavBarColor),
              )),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.email,
                color: _BtmNavBarColor,
              ),
              title: Text(
                'Email',
                style: TextStyle(color: _BtmNavBarColor),
              )),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.airplay,
                color: _BtmNavBarColor,
              ),
              title: Text(
                'AipPlay',
                style: TextStyle(color: _BtmNavBarColor),
              )),
        ],
//两个字段,shifting是只有选中的时候才显示icon下面的text,fixed是不管选中不选中都显示text.
        type: BottomNavigationBarType.fixed,
        //2.设置tabbar的点击事件 并接收一个触发对象的下标
        onTap: (int index) {
   
          //将点击的index 传给 body中要显示的下标
          setState((){
   
             _currentIndex= index;
           });
        },
        //4.设置高亮的tabbar下标
        currentIndex: _currentIndex,
      ),
    );
  }
}

页面切换效果实现

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

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

class MyApp extends StatelessWidget {
   
  @override
  Widget build(BuildContext context) {
   
    return MaterialApp(
      title: 'my App',