flutter中的底部導航欄切換

“本文主要介紹flutter中的底部導航欄切換

做android原生開發時，底部導航欄是通過自定義布局，圖檔自己上網找，點選之後還要變色，在切換的時候使用fragment，切換下一個的同時上一個隐藏…… 現在，來看flutter怎麼實作吧

效果

img

解析

除了主界面以外，必然需要這三個界面，界面布局如下

然後還需要一個bottom.dart表示主界面，tabs.dart表示底部欄以及調用上面三個界面，是以總共五個dart檔案，不需要資源檔案

單獨界面 Category.dart

每一個界面很簡單，隻需要顯示有色方塊即可，用同一個模闆，如 分類界面，顯示綠色的框

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) {
    // TODO: implement build
    return Container(
      width: 300,
      height: 300,
      color: Colors.green,
    );
  }
}

           

複制

另外兩個類似

底部導航欄 tabs.dart

bottomNavigationBar元件，可以直接顯示底部按鈕，onTap方法進行互動, setState方法可以實時渲染修改界面，currentIndex表示目前按下的位置

import 'package:flutter/material.dart';
import 'pages/Category.dart';
import 'pages/Home.dart';
import 'pages/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) {
    // TODO: implement build
    return
      Scaffold(
        appBar: AppBar(
          title: Text('底部導航欄切換'),
        ),
        /** * 切換底部導航欄的時候動态修改body内容 */
        body:this._pageList[this._currentIndex],
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: this._currentIndex,
          //實作底部導航欄點選選***能
          onTap: (int index){
// this._currentIndex=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("我的")
            )
          ],
        ),
      );
  }
}

           

複制

主界面 bottom.dart

其實很簡單，隻需要調用Tabs()即可，具體隻是想分離代碼子產品

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

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


           

複制

所有代碼都在，直接運作即可

思考

本質上，這個切換是用清單排好的，但是最好應該使用鍵值對的形式，可能flutter有類似的方法我還沒學到吧，不過，以上從了解的簡單程度和實作的簡單程度都是碾壓原生開發的！