Flutter APP開發學習記錄: bottomNavigationBar底部導航菜單

時間 2020-01-11

標籤 flutter app 開發學習記錄 bottomnavigationbar 底部導航菜單简体版

原文原文鏈接

說點兒閒話

最近在學習使用flutter開發app，因爲是公司項目中使用到的技術，邊學習，邊投入到實際開發中，把本身使用到和學到的組件記錄下來，總結一下，以便回顧。html

BottomNavigationBar

BottomNavigationBar 底部導航欄，顯示在應用程序的底部，用於在少許視圖（一般在三到五個之間）中選擇。
一般手機APP首頁都是這樣的一個底部導航菜單，這裏能夠使用BottomNavigationBar來實現，底部導航欄一般與Scaffold結合使用，在此將其做爲Scaffold.bottomNavigationBar參數提供。git

如下是實現代碼：github

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,
    );
  }
}