Flutter悬浮按钮FloatingActionButton使用详解
更新时间：2021年07月12日 10:42:15 作者：sugood
本文主要介绍了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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
首先和其他许多的GUI库一样，Android的UI线程是不安全的。所以下面这篇文章主要给大家介绍了关于Android子线程与更新UI问题的相关资料，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧2019-03-03
这篇文章主要介绍了Android AsyncTask用法巧用实例代码的相关资料,需要的朋友可以参考下2017-01-01
这篇文章主要介绍了Android自定义弹出窗口PopupWindow使用技巧，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
这篇文章主要给大家介绍了关于kotlin Standard中内联函数的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用kotlin具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-08-08
这篇文章主要为大家详细介绍了Android利用Canvas标点画线并加入位移动画的第一篇，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-09-09
这篇文章主要为大家详细介绍了Android学习教程之滑动布局使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
人脸识别，是基于人的脸部特征信息进行身份识别的一种生物识别技术。用摄像机或摄像头采集含有人脸的图像或视频流，并自动在图像中检测和跟踪人脸，进而对检测到的人脸进行识别的一系列相关技术，通常也叫做人像识别、面部识别2021-11-11
这篇文章主要为大家详细介绍了Android使用Retrofit上传文件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
adb全称Android Debug Bridge，是Android SDK中的一个工具, 使用adb可以直接操作管理Android模拟器或者真实的Andriod设备，就是起到调试桥的作用，这篇文章主要介绍了adb工具的基本使用,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了Android动画实现原理和代码分析，如果你对此感兴趣，跟着小编学习下吧。2017-12-12
最新评论