flutter中的底部导航栏切换

“本文主要介绍flutter中的底部导航栏切换

做android原生开发时，底部导航栏是通过自定义布局，图片自己上网找，点击之后还要变色，在切换的时候使用fragment，切换下一个的同时上一个隐藏…… 现在，来看flutter怎么实现吧

效果

img

解析

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

然后还需要一个bottom.dart表示主界面，tabs.dart表示底部栏以及调用上面三个界面，所以总共五个dart文件，不需要资源文件

单独界面 Category.dart

每一个界面很简单，只需要显示有色方块即可，用同一个模板，如 分类界面，显示绿色的框

代码语言：javascript复制

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表示当前按下的位置

代码语言：javascript复制

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()即可，具体只是想分离代码模块

代码语言：javascript复制

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有类似的方法我还没学到吧，不过，以上从理解的简单程度和实现的简单程度都是碾压原生开发的！

flutter ios android dart 编程算法

0 人点赞