BottomNavigationBar 自定義底部導航條

時間 2019-11-13

標籤 bottomnavigationbar 自定義底部導航简体版

原文原文鏈接

在flutter中，BottomNavigationBar 是底部導航條，可讓咱們定義底部 Tab 切換，bottomNavigationBar是 Scaffold 組件的參數。 app

BottomNavigationBar 常見的屬性

items ：List底部導航條按鈕集合
iconSize ：icon
currentIndex ：默認選中第幾個
onTap：選中變化回調函數
fixedColor ：選中的顏色
type ：BottomNavigationBarType.fixed & BottomNavigationBarType.shifting

基本實現

import 'package:flutter/material.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:Scaffold(
        appBar: AppBar(
          title: Text("Flutter Demo"),
        ),
        body: Text("tabBar"),
        bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text("首頁")
            ),
             BottomNavigationBarItem(
              icon: Icon(Icons.category),
              title: Text("分類")
            ),
            
             BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text("設置")
            )
          ],
        ),
      )
    );
  }
}

切換選中

當咱們點擊按鈕，想要切換選中的導航塊時，須要監聽onTap，而後改變currentIndex。less

import 'package:flutter/material.dart';
void main() => runApp(MyApp());

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

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

  _TabsState createState() => _TabsState();
}

class _TabsState extends State<Tabs> {

  int _currentIndex=0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Flutter Demo"),
        ),
        body: Text("tabBar"),
        bottomNavigationBar: BottomNavigationBar(

          currentIndex: this._currentIndex,
          onTap: (int index){
              setState(() {
                  this._currentIndex=index;
              });
          },
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text("首頁")
            ),
             BottomNavigationBarItem(
              icon: Icon(Icons.category),
              title: Text("分類")
            ),
            
             BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text("設置")
            )
          ],
        ),
      );
  }
}

須要特別說明的是，默承認以顯示兩個或者三個BottomNavigationBarItem，若是有更多的BottomNavigationBarItem須要顯示，則須要配置type的爲BottomNavigationBarType.fixed，不然樣式會出現問題。ide

頁面切換

要實現點擊後頁面切換的效果，首先須要有三個頁面，在flutter中，一切皆組件，頁面也是組件。函數

首先，在lib目錄下新建pages文件夾，而後在pages下新建文件夾tabs，並新建上面導航對應的三個頁面。ui

Category.dartthis

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 Text("分類");
  }
}

Home.dartspa

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Text("我是首頁組件");
  }
}

Setting.dart3d

import 'package:flutter/material.dart';

class SettingPage extends StatefulWidget {
  SettingPage({Key key}) : super(key: key);
  _SettingPageState createState() => _SettingPageState();
}

class _SettingPageState extends State<SettingPage> {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        ListTile(
          title: Text("我是一個文本"),
        ),
         ListTile(
          title: Text("我是一個文本"),
        ),
         ListTile(
          title: Text("我是一個文本"),
        ),
         ListTile(
          title: Text("我是一個文本"),
        )
      ],
    );
  }
}

而後，在pages文件夾下新建Tabs.dart文件，並將上面例子中的tabs組件剪切到這個文件中，code

import 'package:flutter/material.dart';
class Tabs extends StatefulWidget {
  Tabs({Key key}) : super(key: key);

  _TabsState createState() => _TabsState();
}

class _TabsState extends State<Tabs> {

  int _currentIndex=0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Flutter Demo"),
        ),
        body: Text("tabBar"),
        bottomNavigationBar: BottomNavigationBar(

          currentIndex: this._currentIndex,
          onTap: (int index){
              setState(() {
                  this._currentIndex=index;
              });
          },
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text("首頁")
            ),
             BottomNavigationBarItem(
              icon: Icon(Icons.category),
              title: Text("分類")
            ),
            
             BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text("設置")
            )
          ],
        ),
      );
  }
}

最後，在main.dart中引入Tabs.dartblog

import 'package:flutter/material.dart';

import 'pages/Tabs.dart';

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

此時，僅僅只是實現上面例子中的效果，還不能實現頁面的切換，還須要繼續修改Tabs.dart文件。

import 'package:flutter/material.dart';
import 'tabs/Home.dart';
import 'tabs/Category.dart';
import 'tabs/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("Flutter Demo"),
        ),
        body: this._pageList[this._currentIndex],
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: this._currentIndex,   //配置對應的索引值選中
          onTap: (int index){
              setState(() {  //改變狀態
                  this._currentIndex=index;
              });
          },
          iconSize:36.0,      //icon的大小
          fixedColor:Colors.red,  //選中的顏色  
          type:BottomNavigationBarType.fixed,   //配置底部tabs能夠有多個按鈕
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text("首頁")
            ),
             BottomNavigationBarItem(
              icon: Icon(Icons.category),
              title: Text("分類")
            ),
            
             BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text("設置")
            )
          ],
        ),
      );
  }
}