flutter学习之底部导航栏制作

迷南。 2021-09-17 11:50 439阅读 0赞

首先我们先写一个主入口文件，这个文件只是简单的APP通用结构，最主要的是要引入自定义的`BottomNavigationWidget`组件。

main.dart

import 'package:flutter/material.dart';
    import 'bottom_navigation_widget.dart';
    void main()=> runApp(new MyApp());
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title:'Flutter bottomNavigationBar',
          theme:ThemeData.light(),
          home:BottomNavigationWidget()
        );
      }.
    }

### BottomNaivgationWidget自定义 ###

import 'package:flutter/material.dart';
    class BottomNavigationWidget extends StatefulWidget {
      _BottomNavigationWidgetState createState() => _BottomNavigationWidgetState();
    }
    class _BottomNavigationWidgetState extends State<BottomNavigationWidget> {
      final _BottomNavigationColor = Colors.blue;
      @override
      Widget build(BuildContext context) {
         return Scaffold(
           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(
                   'AipPlay',
                   style:TextStyle(color:_BottomNavigationColor)
                 )
               ),
             ],
             type:BottomNavigationBarType.fixed
           ),
         );
      }
    }

先来写一个HomeScreen组件，新建一个pages目录，然后在目录下面新建`home_screen.dart`文件。

import 'package:flutter/material.dart';
    class HomeScreen extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar:AppBar(
            title: Text('HOME'),
          ),
          body:Center(
            child: Text('HOME'),
          )
        );
      }
    }

`bottom_navigation_widget.dart`的全部代码

import 'package:flutter/material.dart';
    import 'pages/home_screen.dart';
    import 'pages/email_screen.dart';
    import 'pages/pages_screen.dart';
    import 'pages/airplay_screen.dart';
    class BottomNavigationWidget extends StatefulWidget {
      _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(
                   'AipPlay',
                   style:TextStyle(color:_BottomNavigationColor)
                 )
               ),
             ],
             currentIndex:_currentIndex,
             onTap:(int index){
               setState((){
                 _currentIndex= index;
               });
             },
             type:BottomNavigationBarType.fixed
           ),
         );
      }
    }

ok,完整的底部导航可以了，这个笔记值得记录，以后就可以直接copy了

原文来自前端大牛技术胖的博客

[http://jspang.com/post/flutterDemo.html\#toc-ff4][http_jspang.com_post_flutterDemo.html_toc-ff4]

[http_jspang.com_post_flutterDemo.html_toc-ff4]: http://jspang.com/post/flutterDemo.html#toc-ff4