底部导航的应用BottomNavigationBar

最新推荐文章于 2022-04-20 00:20:52 发布

chunchun1230

最新推荐文章于 2022-04-20 00:20:52 发布

阅读量325

点赞数

CC 4.0 BY-SA版权

分类专栏： flutter

本文链接：https://blog.youkuaiyun.com/chunchun1230/article/details/82985775

flutter 专栏收录该内容

61 篇文章

订阅专栏

本文详细介绍了使用Flutter创建带有底部导航栏的应用程序的过程。从入口文件main.dart开始，到四个不同功能页面的实现，包括首页、邮箱页、检验页和我的页面。每个页面都有自己的颜色主题和图标，通过BottomNavigationBar进行切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

新建项目所需的文件，效果如图所示

先写入口文件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 new MaterialApp(
      title: 'Flutter bottomNavigationBar',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: BottomNavigationWidget(),
    );
  }
}

再写主页面bottom_navigation_widget.dart的代码，如下：

import 'package:flutter/material.dart';
import 'pages/home_screen.dart';
import 'pages/email_screen.dart';
import 'pages/checkout_screen.dart';
import 'pages/mine_screen.dart';

class BottomNavigationWidget extends StatefulWidget {
  @override
  State<StatefulWidget> 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(CheckoutScreen())
      ..add(MineScreen());
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: list[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
              icon: Icon(
                Icons.home,
                color: _bottomNavigationColor,
              ),
              title: Text(
                '首页',
                style: TextStyle(color: _bottomNavigationColor),
              )),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.email,
                color: _bottomNavigationColor,
              ),
              title: Text(
                '邮箱',
                style: TextStyle(color: _bottomNavigationColor),
              )),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.pages,
                color: _bottomNavigationColor,
              ),
              title: Text(
                '检查',
                style: TextStyle(color: _bottomNavigationColor),
              )),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.airplay,
                color: _bottomNavigationColor,
              ),
              title: Text(
                '我的',
                style: TextStyle(color: _bottomNavigationColor),
              )),
        ],
        currentIndex: _currentIndex,
        onTap: (int index) {
          setState(() {
            _currentIndex = index;
          });
        },
        type: BottomNavigationBarType.shifting,
      ),
    );
  }
}

再写分页面home_screen.dart的代码如下

import 'package:flutter/material.dart';
class HomeScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("首页"),
      ),
      body: new Container(
        color: Colors.pinkAccent,
      ),
    );
  }
}

再写分页面email_screen.dart的代码如下

import 'package:flutter/material.dart';
class EmailScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("邮箱"),
      ),
      body: new Container(
        color: Colors.red,
      ),
    );
  }
}

再写分页面checkout_screen.dart的代码如下

import 'package:flutter/material.dart';
class CheckoutScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("检验"),
      ),
      body: new Container(
        color:Colors.lightBlue,
      ),
    );
  }
}

再写分页面mine_screen.dart的代码如下

import 'package:flutter/material.dart';
class MineScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("我的"),
      ),
      body: new Container(
        color: Colors.yellow,
      ),
    );
  }
}

效果如图所示：