用 flutter 构建底部导航效果

本博客将介绍使用 flutter 来构建一个基本的底部导航效果。

---

项目下载路径：

---

---

lib 目录：

---

源代码

///main.dart
import 'package:flutter/material.dart';
import './pages/index_page.dart';

///能套一个方便的组件的话，就套一个，方便以后修改
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: IndexPage(),
    );
  }
}


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

class CartPage extends StatelessWidget {
  const CartPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(body: Text('购物车页面'),);
  }
}



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

class CategoryPage extends StatelessWidget {
  const CategoryPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(body: Text('分类页面'),);
  }
}


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

class HomePage extends StatelessWidget {
  const HomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(body: Text('首页页面'),);
  }
}


///index_page.dart
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_shop/pages/cart_page.dart';
import 'package:flutter_shop/pages/category_page.dart';
import 'package:flutter_shop/pages/home_page.dart';
import 'package:flutter_shop/pages/member_page.dart';

class IndexPage extends StatefulWidget {
  @override
  _IndexPageState createState() => _IndexPageState();
}

class _IndexPageState extends State<IndexPage> {

  final List<BottomNavigationBarItem> bottomtabs = [
    BottomNavigationBarItem(
      icon: Icon(CupertinoIcons.home),
      title: Text('首页'),
    ),
    BottomNavigationBarItem(
      icon: Icon(CupertinoIcons.search),
      title: Text('分类'),
    ),
    BottomNavigationBarItem(
      icon: Icon(CupertinoIcons.shopping_cart),
      title: Text('购物车'),
    ),
    BottomNavigationBarItem(
      icon: Icon(CupertinoIcons.profile_circled),
      title: Text('会员中心'),
    ),
 ];

 final List tabBodies = [
   HomePage(),
   CategoryPage(),
   CartPage(),
   MemberPage()
 ];

 int currentIndex = 0;
 var currentPage;

 @override
 void initState() { 
   super.initState();
   currentPage = tabBodies[currentIndex];
 }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromRGBO(244, 255, 255, 1.0),
      appBar: AppBar(title:Text('百姓')),
      body: currentPage,
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: currentIndex,
        items: bottomtabs,
        onTap: (index){
          setState(() {
           currentIndex = index; 
           currentPage = tabBodies[currentIndex];
          });
        },
      ),
    );
  }
}



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

class MemberPage extends StatelessWidget {
  const MemberPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(body: Text('会员中心页面'),);
  }
}

---

简要的分析

1. main.dart是入口；index_page.dart放置底部导航，可以说是主体部分；其它几个部分则是要转入的页面。（flutter 基本的页面布局在这里，不再赘述）
2. 最为重要的部分就是 底部导航。实现该功能是通过 Scaffold 组件的 bottomNavigationBar 属性。
3. BottomNavigationBar 组件构造器：

 BottomNavigationBar({
    Key key,
    @required this.items,    ///底部导航的元素组成，由    List<BottomNavigationBarItem> 组成
    this.onTap,   ///点击某一个图标后，产生的动作
    this.currentIndex = 0,   ///底部导航的索引
    this.elevation = 8.0,    ///这个 [BottomNavigationBar] 的z坐标，如果为空，默认值为' 8.0 '
    BottomNavigationBarType type,  ///定义 [BottomNavigationBar] 的布局和行为，
    Color fixedColor,    ///[selectedItemColor]的值。此getter仅用于向后兼容，首选[selectedItemColor]属性。
    this.backgroundColor,  ///如果 [type] 是 [BottomNavigationBarType.shifting] 和[ items]  有[BottomNavigationBarItem.backgroundColor] 的设置,[item]的背景颜色会引起和覆盖这种颜色
    this.iconSize = 24.0,    ///设置图标大小
    Color selectedItemColor,     ///为被选择的  [BottomNavigationBarItem.icon]  和 [BottomNavigationBarItem.label] 设置颜色，如果为空，[ThemeData.primaryColor] 被使用
    this.unselectedItemColor,/   //未被选择的  [BottomNavigationBarItem.icon]  和 [BottomNavigationBarItem.label] 设置颜色，如果为空，[TextTheme.caption] 被使用
    this.selectedIconTheme = const IconThemeData(),
    this.unselectedIconTheme = const IconThemeData(),
    this.selectedFontSize = 14.0,
    this.unselectedFontSize = 12.0,
    this.selectedLabelStyle,
    this.unselectedLabelStyle,
    this.showSelectedLabels = true,
    bool showUnselectedLabels,
  }) 

---

4. 了解完构造器，再回去看 index_page.dart 应该明朗很多。onTap 是点击是触发的事件（动作）；这里是实现底部导航的自由切换
   5.BottomNavigationBar 常用的属性有
   items
   type
   currentIndex
   onTap