三个页面,main主界面主入口,TabNavigator 底部导航栏,HomePage 主界面
main.dart 页面
import 'package:demoflutter/navigator/tab_navigator.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: TabNavigator(),
);
}
}
tab_navigator.dart
import 'package:demoflutter/page/home_page.dart';
import 'package:flutter/material.dart';
//底部状态栏点击
class TabNavigator extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return _TabNavigator();
}
}
class _TabNavigator extends State<TabNavigator> with SingleTickerProviderStateMixin {
//页面
final pages = <Widget>[
HomePage(),
HomePage(),
HomePage(),
HomePage(),
];
//title和图标
List<String> titles = ['首页', '搜索', '旅拍', '我的'];
List<IconData> icons = [
Icons.home,
Icons.search,
Icons.camera_alt,
Icons.contacts
];
int _currentIndex = 0;
//初始化页面控制器,并设置默认选择页面
final _controller = PageController(initialPage: 0);
@override
Widget build(BuildContext context) {
// 脚手架
return Scaffold(
body: PageView(
controller: _controller,
children: pages,
physics: NeverScrollableScrollPhysics(),
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentIndex,
onTap: (index) {
_controller.jumpToPage(index);
setState(() {
_currentIndex = index;
});
},
type: BottomNavigationBarType.fixed,
items: getBarItems()),
);
}
List<BottomNavigationBarItem> getBarItems() {
final _defaultColor = Colors.grey;
final _activieColor = Colors.blue;
List<BottomNavigationBarItem> list = [];
for (int i = 0; i < titles.length; i++) {
BottomNavigationBarItem barItem = BottomNavigationBarItem(
icon: Icon(
icons[i],
color: _defaultColor,
),
activeIcon: Icon(
icons[i],
color: _activieColor,
),
title: Text(
titles[i],
style: TextStyle(
color: _currentIndex != i ? _defaultColor : _activieColor),
),
);
list.add(barItem);
}
return list;
}
}
home_page.dart
import 'package:flutter/material.dart';
//首页页面
class HomePage extends StatefulWidget{
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return _HomePage();
}
}
class _HomePage extends State<HomePage> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
body:Container(
child: Text("首页"),
),
);
}
}