GitHub：https://github.com/happy-python/flutter_demos/tree/master/bottom_navigation_demo
項目目錄結(jié)構(gòu)：
lib/main.dart
import 'package:flutter/material.dart';
import 'home_widget.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Tutorial',
theme: ThemeData(
primarySwatch: Colors.blue,
),
debugShowCheckedModeBanner: false,
home: Home(),
);
}
}
lib/home_widget.dart
import 'package:flutter/material.dart';
import 'placeholder_widget.dart';
class Home extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _HomeState();
}
}
class _HomeState extends State<Home> {
int _currentIndex = 0;
List<Widget> _children = [
PlaceholderWidget(Colors.cyan),
PlaceholderWidget(Colors.orange),
PlaceholderWidget(Colors.green),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Bottom Navigation'),
),
body: _children[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
BottomNavigationBarItem(
icon: Icon(Icons.mail), title: Text('Messages')),
BottomNavigationBarItem(
icon: Icon(Icons.person), title: Text('Profile')),
],
currentIndex: _currentIndex,
onTap: (index){
setState(() {
_currentIndex = index;
});
},
),
);
}
}
lib/placeholder_widget.dart
import 'package:flutter/material.dart';
class PlaceholderWidget extends StatelessWidget {
final Color color;
PlaceholderWidget(this.color);
@override
Widget build(BuildContext context) {
return Container(
color: color,
);
}
}
