Flutter 底部导航栏制作-1 02

底部导航栏制作

现在大多数的app都会有底部导航这个功能，所以今天做一个底部导航栏这个功能，因为我之前是做移动端iOS开发，我会结合iOS对底部导航栏的开发进行Flutter的底部导航栏开发。

思路

一个MyApp的MaterialApp载体中放入一个BottomNavigationWidget组件，BottomNavigationWidget组件中放入你想要导航切换的几个界面，然后把界面放在数组中，根据BottomNavigationWidget的Scaffold组件中的BottomNavigationBar组件进行切换index,从数组中根据index去除相应的界面展示上，这里的BottomNavigationWidget组件是继承StatefulWidget，因为中间有状态的更新

分为三个步骤：

• 步骤一：
  在我们的Main.dart文件中去创建我们的应用程序入口：
  我取名字为MyApp

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

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

class Myapp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'flutter Bottom Navigate Bar',
      theme: ThemeData.light(),
      home: BottomNavigationWidget(),
    );
  }
}

• 步骤二：

import 'package:flutter/material.dart';
import 'pages/AirPlay_screen.dart';
import 'pages/Email_screen.dart';
import 'pages/home_screen.dart';
import 'pages/Pages_screen.dart';
//  创建底部组件
class BottomNavigationWidget extends StatefulWidget {
  @override
  _BottomNavigationWidgetState createState() => _BottomNavigationWidgetState();
}

class _BottomNavigationWidgetState extends State<BottomNavigationWidget> {
  final _bottomNavigationColor = Colors.blue;
  int _currentIndex = 0;
  List<Widget> list = List();
  @override
  void initState() {
    list
      ..add(HomeScreen())
      ..add(EmailScreen())
      ..add(PagesScreen())
      ..add(AirPlayScreen());
    super.initState();
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: list[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
              icon: Icon(
                Icons.home,
                color: _bottomNavigationColor,
              ),
              title: Text(
                'Home',
                style: TextStyle(color: _bottomNavigationColor),
              )),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.email,
                color: _bottomNavigationColor,
              ),
              title: Text(
                'Email',
                style: TextStyle(color: _bottomNavigationColor),
              )),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.pages,
                color: _bottomNavigationColor,
              ),
              title: Text(
                'Pages',
                style: TextStyle(color: _bottomNavigationColor),
              )),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.airplay,
                color: _bottomNavigationColor,
              ),
              title: Text(
                'Airplay',
                style: TextStyle(color: _bottomNavigationColor),
              )),
        ],
        currentIndex: _currentIndex,
        onTap: (int index) {
        // 更新状态
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }
}

• 步骤三：
  import ‘pages/AirPlay_screen.dart’;
  import ‘pages/Email_screen.dart’;
  import ‘pages/home_screen.dart’;
  import ‘pages/Pages_screen.dart’;

这个四个分别是四个界面我拿一个举例子：

import 'package:flutter/material.dart';


class EmailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('EmailScreen'),),
      body: Center(
        child: Text('Email'),
      ),
    );
  }
}

这样就会达到下面的效果：