Flutter悬浮按钮FloatingActionButton使用详解 Flutter悬浮按钮FloatingActionButt

1、普通用法
2、修改悬浮按钮位置
3、修改悬浮按钮大小
4、去除悬浮按钮切换动画
5、一般的自定义悬浮按钮样式
6、彻底的自定义悬浮按钮样式

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); @overrideOffset getOffset(ScaffoldPrelayoutGeometry scaffoldGeometry) {Offset offset = location.getOffset(scaffoldGeometry); return Offset(offset.dx + offsetX, offset.dy + offsetY); }}

【Flutter悬浮按钮FloatingActionButton使用详解】使用

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; @overrideOffset 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); }@overrideAnimation getRotationAnimation({Animation parent}) {return Tween(begin: 1.0, end: 1.0).animate(parent); }@overrideAnimation getScaleAnimation({Animation parent}) {return Tween(begin: 1.0, end: 1.0).animate(parent); }}

使用

floatingActionButtonAnimator: NoScalingAnimation(),

5、一般的自定义悬浮按钮样式

@overrideWidget build(BuildContext context) {return Scaffold(floatingActionButton: FloatingActionButton(child: Container(child: Column(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: [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。所以该干嘛干嘛咯

@overrideWidget build(BuildContext context) {return Scaffold(floatingActionButton: Container(child: Column(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: [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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！