main.dart
import 'package:flutter/material.dart';
import 'bottom_appBar_demo.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
title: 'Flutter 自定义主题样本',
theme: ThemeData(primarySwatch: Colors.lightBlue),
home: BottomAppbarDemo(),
);
}
}
each_view
import 'package:flutter/material.dart';
class EachView extends StatefulWidget {
String _title;
EachView(this._title);
@override
State<EachView> createState() => _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),
),
);
}
}
bottom_appBar_demo
import 'package:flutter/material.dart';
import 'each_view.dart';
class BottomAppbarDemo extends StatefulWidget {
const BottomAppbarDemo({Key? key}) : super(key: key);
@override
State<BottomAppbarDemo> createState() => _BottomAppbarDemoState();
}
class _BottomAppbarDemoState extends State<BottomAppbarDemo> {
late List<Widget> _eachView;
int _index = 0;
@override
void initState() {
super.initState();
_eachView = [];
_eachView
..add(EachView('home'))
..add(EachView('xtt'))
..add(EachView('xtt1'));
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: _eachView[_index],
//可交互使用按钮
floatingActionButton: FloatingActionButton(
onPressed: () {
Navigator.of(context)
.push(MaterialPageRoute(builder: (BuildContext context) {
return EachView('New page');
}));
},
tooltip: 'xtt',
child: Icon(
Icons.add,
color: Colors.white,
),
),
//融合
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
color: Colors.lightBlue,
//与可交互按钮融合
shape: CircularNotchedRectangle(),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
IconButton(
onPressed: () {
setState(() {
_index = 0;
});
},
icon: Icon(Icons.home),
color: Colors.white,
),
IconButton(
onPressed: () {
setState(() {
_index = 1;
});
},
icon: Icon(Icons.airport_shuttle),
color: Colors.white,
),
],
),
),
);
}
}