程序入口
import 'package:flutter/material.dart';
import 'botton_navigation_widget.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'demo',
theme:ThemeData.light(),
home: BottomNavigationWidget()//導航Widget
);
}
}
導航widget
import 'package:flutter/material.dart';
import 'index.dart';
import 'campus_network.dart';
import 'curriculum.dart';
import 'personal_center.dart'; class BottomNavigationWidget extends StatefulWidget {
@override
_BottomNavigationWidgetState createState() => _BottomNavigationWidgetState();
} class _BottomNavigationWidgetState extends State<BottomNavigationWidget> {
final _BottomNavigationColor = Colors.blue;
//現在的索引
int _currentIndex = 0;
//widget集合
List<Widget> list = List();
//重寫初始化方法,將需要導航的widget添加到集合
@override
void initState() {
list
//..相當於list.
..add(IndexScreen())
..add(CurriculumScreen())
..add(CampusNetworkScreen())
..add(PersonalCenterScreen());
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: list[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
//超過3個不顯示名字，需要設置
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
icon: Icon(
Icons.crop_3_2,
color:_BottomNavigationColor,
),
title: Text(
'首頁'
),
),
BottomNavigationBarItem(
icon: Icon(
Icons.crop_3_2,
color:_BottomNavigationColor,
),
title: Text(
'課程'
),
),
BottomNavigationBarItem(
icon: Icon(
Icons.crop_3_2,
color:_BottomNavigationColor,
),
title: Text(
'分校網絡'
),
),
BottomNavigationBarItem(
icon: Icon(
Icons.crop_3_2,
color:_BottomNavigationColor,
),
title: Text(
'個人中心'
),
),
],
//高亮顯示
currentIndex: _currentIndex,
//點擊導航時更新現在的下標
onTap: (int index){
setState(() {
_currentIndex = index;
});
},
),
);
}
}
需要跳轉的widget
import 'package:flutter/material.dart';
class IndexScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('index'),
),
body: Center(
child: Text('index'),
),
);
}
}