根据B站技术胖大佬的视频敲的,感谢大佬。
main.dart中,注意home后面的BottomAppBarDemo,为引入的底部菜单栏
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.lightBlue
),
home: BottomAppBarDemo(),
);
}
}
新建一个bottom_appbar_demo.dart
class BottomAppBarDemo extends StatefulWidget {
@override
_BottomAppBarDemoState createState() => new _BottomAppBarDemoState();
}
class _BottomAppBarDemoState extends State<BottomAppBarDemo> {
List<Widget> _eachView;
int _index = 0;
@override
void initState() {
_eachView = List();
_eachView..add(EachView("Home"))..add(EachView("Head"));
super.initState();
}
@override
Widget build(BuildContext context) {
return new Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: () {
Navigator.of(context)
.push(MaterialPageRoute(builder: (BuildContext context) {
return EachView("new Page");
}));
},
tooltip: "bigHead",
child: Icon(
Icons.add,
color: Colors.white,
),
),
//放置位置 中间的缺口处
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
color: Colors.lightBlue,
//CircularNotchedRectangle 意思是一个带有圆形缺口的矩形
shape: CircularNotchedRectangle(),
child: Row(
mainAxisSize: MainAxisSize.max,
//将主轴空白区域均分,使各个子控件间距相等
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
IconButton(
icon: Icon(Icons.home, color: Colors.white),
onPressed: () {
setState(() {
Navigator.of(context)
.push(MaterialPageRoute(builder: (BuildContext context) {
return EachView("Home");
}));
});
},
),
IconButton(
icon: Icon(Icons.access_alarm, color: Colors.white),
onPressed: () {
Navigator.of(context)
.push(MaterialPageRoute(builder: (BuildContext context) {
return EachView("Home");
}));
},
)
],
),
),
);
}
}
关键地方都有注释,当点击底部菜单栏item的时候,需要跳转到不同页面,此时新建一个each_view.dart
class EachView extends StatefulWidget {
String _title;
EachView(this._title);
@override
_EachViewState createState() => new _EachViewState();
}
class _EachViewState extends State<EachView> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title:Text(widget._title)),
body: Center(child: Text(widget._title)),
);
}
}