最终效果
main
import 'package:flutter/material.dart';
import 'BottonWidget.dart';
main(){
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
final _Color = Color.fromARGB(250, 200, 100, 125);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
// 自定义主题样本
theme: ThemeData(
primarySwatch: Colors.lightBlue,
),
home: BottonWidget(),
);
}
}
BottonWidget
import 'package:flutter/material.dart';
import 'each_view.dart';
class BottonWidget extends StatefulWidget {
BottonWidget({Key key}) : super(key: key);
_BottonWidgetState createState() => _BottonWidgetState();
}
class _BottonWidgetState extends State<BottonWidget> {
List<Widget> _each_view;
int _index = 0;
@override
void initState() {
_each_view = List();
// 把 动态的EachView添加到list里面并设置title;
_each_view..add(EachView('home'))..add(EachView('email'));
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
// 设置索引
body: _each_view[_index],
// 点击打开新的路由
floatingActionButton: FloatingActionButton(
onPressed: (){
Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context){
return EachView('New Page');
}));
},
// 长按提示字
tooltip: '你还要我怎样',
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(
icon: Icon(Icons.home),
color: Colors.white,
// 点击的索引
onPressed: (){
setState(() {
_index = 0;
});
},
),
IconButton(
icon: Icon(Icons.airport_shuttle),
color: Colors.white,
onPressed: (){
setState(() {
_index = 1;
});
},
)
],
),
),
);
}
}
EachView
import 'package:flutter/material.dart';
class EachView extends StatefulWidget {
String _title;
EachView(this._title);
@override
_EachViewState 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),),
);
}
}
网友评论