Flutter 底部导航栏切换实现
在 Android 原生开发中,底部导航栏通常涉及自定义布局和 Fragment 切换。在 Flutter 中,可以通过 BottomNavigationBar 组件更便捷地实现。
效果

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

然后还需要一个 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) {
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) {
return Scaffold(
appBar: AppBar(
title: Text('底部导航栏切换'),
),
/** * 切换底部导航栏的时候动态修改 body 内容 */
body: _pageList[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentIndex,
//实现底部导航栏点击选***能
onTap: (int index) {
setState(() {
_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 'tabs.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Tabs()
);
}
}


