Flutter APP开发 学习记录: bottomNavigationBar底部导航菜单

说点儿闲话

最近在学习使用flutter开发app，由于是公司项目中使用到的技术，边学习，边投入到实际开发中，把自己使用到和学到的组件记录下来，总结一下，以便回顾。

BottomNavigationBar

BottomNavigationBar 底部导航栏，显示在应用程序的底部，用于在少量视图（通常在三到五个之间）中选择。
通常手机APP首页都是这样的一个底部导航菜单，这里可以使用BottomNavigationBar来实现，底部导航栏通常与Scaffold结合使用，在此将其作为Scaffold.bottomNavigationBar参数提供。

以下是实现代码：

import 'package:flutter/material.dart';
import 'index.dart';
import 'course.dart';
import 'mine.dart';
import 'login.dart';

class HomeScreen extends StatefulWidget {
  HomeScreen({Key key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<HomeScreen> {
  int _selectedIndex = 0;

  // 底部导航栏对应的页面组件
  final _widgetOptions = [IndexScreen(), CourseScreen(), MineScreen()];

  // 页面控制器（`PageController`）组件，页面视图（`PageView`）的控制器。
  PageController _controller = PageController();

  void _onItemTapped(int index) async {
    // 获取登录信息 
    // .... 此处省略
      if (index == 1 && notLogin == true) {
        // 未登录
        Navigator.push(
          context,
          new MaterialPageRoute(builder: (context) => new Login()),
        );
      } else {
        // 已登录
        _selectedIndex = index;
        // 跳到页面（`jumpToPage`）方法，更改显示在的页面视图（`PageView`）组件中页面。
        _controller.jumpToPage(index);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: PageView.builder(
        // 物理（`physics`）属性，页面视图应如何响应用户输入。
        // 从不可滚动滚动物理（`NeverScrollableScrollPhysics`）类，不允许用户滚动。
        physics: NeverScrollableScrollPhysics(),
        itemBuilder: (BuildContext context, int index) {
          return _widgetOptions.elementAt(index);
        },
        itemCount: _widgetOptions.length,
        // 控制器（`controller`）属性，用于控制滚动此页面视图位置的对象。
        controller: _controller,
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('首页'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.import_contacts),
            title: Text('课程'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            title: Text('我的'),
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.blue[700],
        onTap: _onItemTapped,
      ),
      resizeToAvoidBottomPadding: false,
    );
  }
}

参考资料

BottomNavigationBar class
Bottom navigation
底部菜单 bottomNavigationBar，Tab栏切换 TabBar
Flutter: BottomNavigationBar + PageView 翻页时崩溃

参考项目

jedi绝地武士 1个测试开发工程师用100天的业余时间开发的Flutter商业项目

相关文章

Flutter APP开发 学习记录: flutter_swiper轮播图 这篇轮播图是本篇文章中首页IndexScreen()的布局