Flutter 底部导航栏切换实现

Flutter 底部导航栏切换实现

在 Android 原生开发中，底部导航栏通常涉及自定义布局和 Fragment 切换。在 Flutter 中，可以通过 BottomNavigationBar 组件更便捷地实现。

效果

解析

除了主界面以外，必然需要这三个界面，界面布局如下

然后还需要一个 bottom.dart 表示主界面，tabs.dart 表示底部栏以及调用上面三个界面，所以总共五个 dart 文件，不需要资源文件

单独界面 Category.dart

每一个界面很简单，只需要显示有色方块即可，用同一个模板，如 分类界面，显示绿色的框

import 'package:flutter/material.dart';

class CategoryPage extends StatefulWidget {
  CategoryPage({Key key}) : super(key: key);
  _CategoryPageState createState() => _CategoryPageState();
}

class _CategoryPageState extends State<CategoryPage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 300,
      height: 300,
      color: Colors.green,
    );
  }
}

另外两个类似

底部导航栏 tabs.dart

bottomNavigationBar 组件，可以直接显示底部按钮，onTap 方法进行交互，setState 方法可以实时渲染修改界面，currentIndex 表示当前按下的位置

import 'package:flutter/material.dart';
import 'pages/Category.dart';
import 'pages/Home.dart';
import 'pages/Setting.dart';

class Tabs extends StatefulWidget {
  Tabs({Key key}) : super(key: key);
  _TabsState createState() => _TabsState();
}

class _TabsState extends State<Tabs> {
  int _currentIndex = 0;
  //下面的三个方法都是三个界面的方法
  List _pageList = [
    HomePage(),
    CategoryPage(),
    SettingPage()
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('底部导航栏切换'),
      ),
      /** * 切换底部导航栏的时候动态修改 body 内容 */
      body: _pageList[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        //实现底部导航栏点击选***能
        onTap: (int index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text("首页")
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.category),
              title: Text("分类")
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text("我的")
          )
        ],
      ),
    );
  }
}

主界面 bottom.dart

其实很简单，只需要调用 Tabs() 即可，具体只是想分离代码模块

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Tabs()
    );
  }
}