10*：flutter之BottomNavigationBar和 BottomNavigationBarItem

問題

 

目錄

 

預備

 

正文

1：BottomNavigationBar

首先，bottomNavigationBar 是屬於 Scaffold 中的一個位於底部的控件。通常和 BottomNavigationBarItem 配合使用

BottomNavigationBar構造方法

BottomNavigationBar({
    Key key,
    @required this.items, // BottomNavigationBarItem控件組
    this.onTap, // 點擊事件
    this.currentIndex = 0, // 當前第幾個
    this.elevation = 8.0, // 陰影
    BottomNavigationBarType type, // 導航類型：fixed與shifting(放大動畫)
    Color fixedColor, // 被選中的顏色
    this.backgroundColor, // 導航背景色
    this.iconSize = 24.0, // 圖標大小
    Color selectedItemColor, // 被選中的顏色,與fixedColor不能同時設置
    this.unselectedItemColor, // 未被選中項的顏色
    this.selectedIconTheme = const IconThemeData(), // 選中圖標的樣式
    this.unselectedIconTheme = const IconThemeData(), // 未選中圖標的樣式
    this.selectedFontSize = 14.0, // 被選中文字的大小
    this.unselectedFontSize = 12.0, // 未被選中文字的大小
    this.selectedLabelStyle, // 備選中文字的樣式
    this.unselectedLabelStyle,
    this.showSelectedLabels = true, // 是否顯示被選中bar的文字
    bool showUnselectedLabels,
  })

BottomNavigationBar中屬性比較簡單，下面我們來看一下BottomNavigationBarItem

bottomNavigationBarItem

底部導航欄要顯示的Item，有圖標和標題組成

構造方法：

const BottomNavigationBarItem({
    @required this.icon,
    this.title,
    Widget activeIcon,
    this.backgroundColor,
  })

簡單使用

一般來說，點擊底部導航欄都是要進行頁面切換或者更新數據的，我們需要動態的改變一些狀態，所以，我們要繼承自StatefulWidget

import 'package:flutter/material.dart';
import 'package:flutter_sample/widget/bottom_nav/cart_page.dart';
import 'package:flutter_sample/widget/bottom_nav/home_page.dart';
import 'package:flutter_sample/widget/bottom_nav/msg_page.dart';
import 'package:flutter_sample/widget/bottom_nav/person_page.dart';

class IndexPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _IndexState();
  }
}

class _IndexState extends State<IndexPage> {
  final List<BottomNavigationBarItem> bottomNavItems = [
    BottomNavigationBarItem(
      backgroundColor: Colors.blue,
      icon: Icon(Icons.home),
      title: Text("首頁"),
    ),
    BottomNavigationBarItem(
      backgroundColor: Colors.green,
      icon: Icon(Icons.message),
      title: Text("消息"),
    ),
    BottomNavigationBarItem(
      backgroundColor: Colors.amber,
      icon: Icon(Icons.shopping_cart),
      title: Text("購物車"),
    ),
    BottomNavigationBarItem(
      backgroundColor: Colors.red,
      icon: Icon(Icons.person),
      title: Text("個人中心"),
    ),
  ];

  int currentIndex;

  final pages = [HomePage(), MsgPage(), CartPage(), PersonPage()];

  @override
  void initState() {
    super.initState();
    currentIndex = 0;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("底部導航欄"),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: bottomNavItems,
        currentIndex: currentIndex,
        type: BottomNavigationBarType.fixed,
        onTap: (index) {
          _changePage(index);
        },
      ),
      body: pages[currentIndex],
    );
  }

  /*切換頁面*/
  void _changePage(int index) {
    /*如果點擊的導航項不是當前項  切換 */
    if (index != currentIndex) {
      setState(() {
        currentIndex = index;
      });
    }
  }
}

入口函數：

/*入口函數*/
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter入門示例程序',
      theme: ThemeData(
        primaryColor: Colors.blue,
      ),
      home: IndexPage(),
    );
  }
}
 

注意

 

引用

1：Flutter底部導航欄BottomNavigationBar