/*
一、Flutter FloatingActionButton介绍
FloatingActionButton简称FAB,可以实现浮动按钮，也可以实现类型闲鱼app的底部凸起导航。
child:子视图，一般为Icon,不推荐使用文字。
tooltip:FAB被长按时显示，也是无障碍功能
backgroundColor:背景颜色
elevation:未点击的时候的阴影
hignlightElevation:点击时阴影值，默认12.0
onPressed:点击事件回调
shape:可以定义FAB的形状等。
mini:是否是mini类型默认false
*/
Tabs.dart【设置闲鱼APP凸起按钮方法】
import 'package:flutter/material.dart';
import 'tabs/Home.dart';
import 'tabs/Category.dart';
import 'tabs/Setting.dart'; class Tabs extends StatefulWidget {
final index;
Tabs({Key key, this.index = }) : super(key: key);
_TabsState createState() => _TabsState(this.index);
} class _TabsState extends State<Tabs> {
int _currentIndex = ;
_TabsState(index) {
this._currentIndex = index;
}
List _pageList = [HomePage(), CategoryPage(), SettingPage()];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Demo'),
),
floatingActionButton: Container(
height: ,
width: ,
padding: EdgeInsets.all(),
margin: EdgeInsets.only(top: ),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(),
color: Colors.white
),
child: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
// print("floatingActionButton tabs");
setState(() {
this._currentIndex=;
});
},
backgroundColor: this._currentIndex==?Colors.red:Colors.yellow,
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomNavigationBar(
currentIndex: this._currentIndex,
onTap: (int index) {
// print(index);
setState(() {
this._currentIndex = index;
});
},
iconSize: 36.0,
type: BottomNavigationBarType.fixed,
fixedColor: Colors.red,
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('首页')),
BottomNavigationBarItem(
icon: Icon(Icons.category), title: Text('分类')),
BottomNavigationBarItem(
icon: Icon(Icons.settings), title: Text('设置')),
]),
body: this._pageList[this._currentIndex],
drawer: Drawer(
child: Column(
children: <Widget>[
Row(
children: <Widget>[
// Expanded(
// child: DrawerHeader(
// child: Text('你好Flutter'),
// decoration: BoxDecoration(
// // color: Colors.yellow
// image: DecorationImage(
// image: NetworkImage('https://www.itying.com/images/flutter/2.png'),
// fit:BoxFit.cover
// ),
// ),
// )
// ) Expanded(
child: UserAccountsDrawerHeader(
accountName: Text('老师你好'),
accountEmail: Text('[email protected]'),
currentAccountPicture: CircleAvatar(
backgroundImage: NetworkImage(
'https://www.itying.com/images/flutter/3.png'),
),
decoration: BoxDecoration(
// color: Colors.yellow
image: DecorationImage(
image: NetworkImage(
'https://www.itying.com/images/flutter/2.png'),
fit: BoxFit.cover),
),
otherAccountsPictures: <Widget>[
Image.network(
'https://www.itying.com/images/flutter/5.png'),
Image.network(
'https://www.itying.com/images/flutter/4.png')
],
),
)
],
),
ListTile(
leading: CircleAvatar(
child: Icon(Icons.home),
),
title: Text('我的空间')),
Divider(),
ListTile(
leading: CircleAvatar(
child: Icon(Icons.home),
),
title: Text('用户中心'),
onTap: () {
Navigator.of(context).pop();
Navigator.pushNamed(context, '/user');
}),
Divider(),
ListTile(
leading: CircleAvatar(
child: Icon(Icons.home),
),
title: Text('用户中心'),
)
],
),
),
endDrawer: Drawer(
child: Text('右侧侧边栏'),
),
);
}
}
Button.dart
import 'package:flutter/material.dart';
class ButtonDemoPage extends StatelessWidget {
const ButtonDemoPage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('按钮演示页面'),
actions: <Widget>[
IconButton(
icon: Icon(Icons.settings),
onPressed: () {},
)
],
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add,color: Colors.black,size: ),
onPressed: (){
print("floatingActionButton");
},
backgroundColor: Colors.yellow,
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
children: <Widget>[
RaisedButton(
child: Text('普通'),
onPressed: () {
print('普通按钮');
},
),
SizedBox(width: ),
RaisedButton.icon(
icon: Icon(Icons.search),
label: Text('图标'),
onPressed: null,
),
SizedBox(width: ),
RaisedButton(
child: Text('有颜色'),
color: Colors.blue,
textColor: Colors.white,
onPressed: () {
print('有颜色按钮');
},
),
SizedBox(width: ),
RaisedButton(
child: Text('有阴影'),
color: Colors.blue,
textColor: Colors.white,
elevation: ,
onPressed: () {
print('有阴影按钮');
}),
],
),
SizedBox(height: ),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: ,
width: ,
child: RaisedButton(
child: Text('宽度高度'),
color: Colors.blue,
textColor: Colors.white,
elevation: ,
onPressed: () {},
),
)
],
),
SizedBox(height: ),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Container(
height: ,
margin: EdgeInsets.all(),
child: RaisedButton(
child: Text('自适应按钮'),
color: Colors.blue,
textColor: Colors.white,
elevation: ,
onPressed: () {
print('自适应按钮');
},
),
))
],
),
SizedBox(height: ),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text('圆角按钮'),
color: Colors.blue,
textColor: Colors.white,
elevation: ,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular()),
onPressed: () {
print('圆角按钮');
},
),
RaisedButton(
child: Text('圆形按钮'),
color: Colors.blue,
textColor: Colors.white,
elevation: ,
splashColor: Colors.grey,
shape: CircleBorder(side: BorderSide(color: Colors.white)),
onPressed: () {
print('圆形按钮');
},
)
],
),
FlatButton(
//扁平化按钮：
child: Text('扁平化的按钮'),
color: Colors.blue,
textColor: Colors.yellow,
onPressed: () {},
),
OutlineButton(
child: Text('线框按钮'),
onPressed: () {
print('OutlineButton');
},
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Container(
margin: EdgeInsets.all(),
height: ,
child: OutlineButton(
child: Text('注册'),
onPressed: () {},
),
),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ButtonBar(
//按钮组
children: <Widget>[
RaisedButton(
child: Text('登录'),
color: Colors.blue,
textColor: Colors.white,
onPressed: () {},
),
RaisedButton(
child: Text('注册'),
color: Colors.blue,
textColor: Colors.white,
onPressed: () {},
),
],
)
],
),
MyButton(
text: "自定义按钮",
height: 60.0,
width: 100.0,
pressed: () {
print("自定义按钮");
},
)
],
));
}
}
//自定义按钮组件：
class MyButton extends StatelessWidget {
final text;
final pressed;
final double width;
final double height;
const MyButton(
{this.text = '', this.pressed = null, this.width = , this.height = });
@override
Widget build(BuildContext context) {
return Container(
height: this.height,
width: this.width,
child: RaisedButton(
child: Text(this.text),
onPressed: this.pressed,
),
);
}
}