Flutter悬浮按钮FloatingActionButton使用详解
1、普通用法
floatingActionButton: FloatingActionButton( child: Icon(Icons.add), onPressed: (){ print('不要啊~'); }, ),
2、修改悬浮按钮位置
继承FloatingActionButtonLocation类,重写对应方法自定义位置
import 'package:flutter/material.dart'; class CustomFloatingActionButtonLocation extends FloatingActionButtonLocation { FloatingActionButtonLocation location; double offsetX; // X方向的偏移量 double offsetY; // Y方向的偏移量 CustomFloatingActionButtonLocation(this.location, this.offsetX, this.offsetY); @override Offset getOffset(ScaffoldPrelayoutGeometry scaffoldGeometry) { Offset offset = location.getOffset(scaffoldGeometry); return Offset(offset.dx + offsetX, offset.dy + offsetY); } }
使用
floatingActionButtonLocation:CustomFloatingActionButtonLocation( FloatingActionButtonLocation.endFloat, 0, -DpUtils.setWidth(20)),
3、修改悬浮按钮大小
floatingActionButton: SizedBox( height: 100.0, width: 100.0, child:FloatingActionButton( child: Icon(Icons.add), onPressed: () {}, ), ),
4、去除悬浮按钮切换动画
继承FloatingActionButtonAnimator类并重写对应的方法
import 'package:flutter/material.dart'; class NoScalingAnimation extends FloatingActionButtonAnimator{ double _x; double _y; @override Offset getOffset({Offset begin, Offset end, double progress}) { _x = begin.dx +(end.dx - begin.dx)*progress ; _y = begin.dy +(end.dy - begin.dy)*progress; return Offset(_x,_y); } @override Animation<double> getRotationAnimation({Animation<double> parent}) { return Tween<double>(begin: 1.0, end: 1.0).animate(parent); } @override Animation<double> getScaleAnimation({Animation<double> parent}) { return Tween<double>(begin: 1.0, end: 1.0).animate(parent); } }
使用
floatingActionButtonAnimator: NoScalingAnimation(),
5、一般的自定义悬浮按钮样式
@override Widget build(BuildContext context) { return Scaffold( floatingActionButton: FloatingActionButton( child: Container( child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ Image.asset( "images/float_button.png", width: DpUtils.setWidth(32), height: DpUtils.setWidth(32), ), Text( "悬浮按钮", style: TextStyle(fontWeight: FontWeight.bold, fontSize: DpUtils.setSp(20), color: Colors.white), ), ], ), ), elevation: 0, onPressed: () { _doSome(); }, backgroundColor: Colors.black, heroTag: "floatHome", ), ) )}
6、彻底的自定义悬浮按钮样式
其实,floatingActionButton 可以直接传入普通的widget。所以该干嘛干嘛咯
@override Widget build(BuildContext context) { return Scaffold( floatingActionButton: Container( child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ Image.asset( "images/home_icon_publishing.png", width: DpUtils.setWidth(32), height: DpUtils.setWidth(32), ), Text( "发主题", style: TextStyle(fontWeight: FontWeight.bold, fontSize: DpUtils.setSp(20), color: Colors.white), ), ], ), ), ); }
到此这篇关于Flutter悬浮按钮FloatingActionButton使用详解的文章就介绍到这了,更多相关Flutter悬浮按钮FloatingActionButton内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Android RecyclerView选择多个item的实现代码
这篇文章主要为大家详细介绍了Android RecyclerView选择多个item的实现代码,仿网易新闻客户端频道选择效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-02-02android之HttpPost&HttpGet使用方法介绍
下文直接讲用法,先知道怎么用,再知道怎么回事,具体如下,感兴趣的朋友可以参考下哈2013-06-06Android中FloatingActionButton实现悬浮按钮实例
这篇文章主要介绍了Android中FloatingActionButton实现悬浮按钮实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。2017-04-04
最新评论