23Flutter FloatingActionButton实现类似闲鱼App底部导航凸起按钮：
/*一、Flutter FloatingActionButton介绍FloatingActionButton简称FAB,可以实现浮动按钮，也可以实现类型闲鱼app的底部凸起导航。child:子视图，一般为Icon,不推荐使用文字。tooltip:FAB被长按时显示，也是无障碍功能backgroundColor:背景颜色elevation:未点击的时候的阴影hignlightElevation:点击时阴影值，默认12.0onPressed:点击事件回调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()];@overrideWidget 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.yellowimage: 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);@overrideWidget 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});@overrideWidget build(BuildContext context) {return Container(height: this.height,width: this.width,child: RaisedButton(child: Text(this.text),onPressed: this.pressed,),);}}
转载于
//www.cnblogs.com/yiweiyihang/p/11512814.html
小鱼儿
冷不防
港控/mmm°
骑猪看日落
￡神魔★判官ぃ
还没有评论，来说两句吧...