23Flutter FloatingActionButton实现类似闲鱼App底部导航凸起按钮：
/* 一、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 = 1}) : super(key: key); _TabsState createState() => _TabsState(this.index); } class _TabsState extends State<Tabs> { int _currentIndex = 0; _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: 80, width: 80, padding: EdgeInsets.all(8), margin: EdgeInsets.only(top: 10), decoration: BoxDecoration( borderRadius: BorderRadius.circular(40), color: Colors.white ), child: FloatingActionButton( child: Icon(Icons.add), onPressed: () { // print("floatingActionButton tabs"); setState(() { this._currentIndex=1; }); }, backgroundColor: this._currentIndex==1?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('gztt@163.com'), 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: 40), 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: 5), RaisedButton.icon( icon: Icon(Icons.search), label: Text('图标'), onPressed: null, ), SizedBox(width: 10), RaisedButton( child: Text('有颜色'), color: Colors.blue, textColor: Colors.white, onPressed: () { print('有颜色按钮'); }, ), SizedBox(width: 10), RaisedButton( child: Text('有阴影'), color: Colors.blue, textColor: Colors.white, elevation: 10, onPressed: () { print('有阴影按钮'); }), ], ), SizedBox(height: 10), Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Container( height: 50, width: 400, child: RaisedButton( child: Text('宽度高度'), color: Colors.blue, textColor: Colors.white, elevation: 20, onPressed: () {}, ), ) ], ), SizedBox(height: 10), Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Expanded( child: Container( height: 60, margin: EdgeInsets.all(10), child: RaisedButton( child: Text('自适应按钮'), color: Colors.blue, textColor: Colors.white, elevation: 20, onPressed: () { print('自适应按钮'); }, ), )) ], ), SizedBox(height: 10), Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ RaisedButton( child: Text('圆角按钮'), color: Colors.blue, textColor: Colors.white, elevation: 20, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10)), onPressed: () { print('圆角按钮'); }, ), RaisedButton( child: Text('圆形按钮'), color: Colors.blue, textColor: Colors.white, elevation: 20, 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(20), height: 50, 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 = 80, this.height = 30}); @override Widget build(BuildContext context) { return Container( height: this.height, width: this.width, child: RaisedButton( child: Text(this.text), onPressed: this.pressed, ), ); } }
