android开发都有底部导航栏,Flutter总有自带的底部导航栏。
BottomNavigationBar 于 PageView 相互使用,pageView 类似于android中的ViewPage。
import 'package:flutter/material.dart';
import 'package:flutter_app/http/ApiService.dart';
import 'package:flutter_app/bean/project_content_entity.dart';
import 'package:flutter_app/modular/home_page.dart';
import 'package:flutter_app/modular/navi_page.dart';
import 'package:flutter_app/modular/project_page.dart';
import 'package:flutter_app/modular/tree_page.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new MyState();
}
}
class MyState extends State<MyApp> {
var _currentIndex = 0;
final PageController _controller = PageController();
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: PageView(
//类似于ViewPage滑动
physics: NeverScrollableScrollPhysics(), //禁止滑动
controller: _controller,
onPageChanged: _onPageChange,
children: <Widget>[HomePage(), ProjectPage(), TreePage(), NaviPage()],
),
bottomNavigationBar: BottomNavigationBar(
onTap: _onTap,
currentIndex: _currentIndex,
type: BottomNavigationBarType.fixed, //样式有两种不同的样式
items: [
_createBottomNavigationBarItem(
Icons.home, Colors.grey, Colors.blue, 0, '首页'),
_createBottomNavigationBarItem(
Icons.school, Colors.grey, Colors.blue, 1, '项目'),
_createBottomNavigationBarItem(Icons.format_indent_decrease,
Colors.grey, Colors.blue, 2, '体系'),
_createBottomNavigationBarItem(Icons.picture_in_picture_alt,
Colors.grey, Colors.blue, 3, '导航'),
],
),
),
);
}
_createBottomNavigationBarItem(IconData icon, Color unSelectColor,
Color selectColor, int index, String tabName) {
return BottomNavigationBarItem(
icon: Icon(
//未选中图片
icon,
color: unSelectColor,
),
title: Text(
tabName,
style: TextStyle(
color: _currentIndex == index ? Colors.blue : Colors.grey),
),
activeIcon: Icon(
//选中图片
icon,
color: selectColor,
),
);
}
//tabBar点击更改
void _onTap(int index) {
setState(() {
_controller.jumpToPage(index); //跳转切换页面
_currentIndex = index;
});
}
//page更改状态
void _onPageChange(int index) {
setState(() {
_currentIndex = index; //更新当前页面下标
});
}
}
切换的页面 HomePage ,ProjectPage,TreePage,NaviPage。都是类似,我就贴一个HomePage了。
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget{
@override
State<StatefulWidget> createState() {
return new HomePageState();
}
}
class HomePageState extends State<HomePage>{
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(child: Text("Home"),),
);
}
}
效果图: