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(
"發(fā)主題",
style: TextStyle(fontWeight: FontWeight.bold,
fontSize: DpUtils.setSp(20), color: Colors.white),
),
],
),
),
);
}
到此這篇關于Flutter懸浮按鈕FloatingActionButton使用詳解的文章就介紹到這了,更多相關Flutter懸浮按鈕FloatingActionButton內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
首先和其他許多的GUI庫一樣，Android的UI線程是不安全的。所以下面這篇文章主要給大家介紹了關于Android子線程與更新UI問題的相關資料，需要的朋友可以參考借鑒，下面隨著小編來一起學習學習吧2019-03-03
這篇文章主要介紹了Android AsyncTask用法巧用實例代碼的相關資料,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了Android自定義彈出窗口PopupWindow使用技巧，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
kotlin Standard中的內(nèi)聯(lián)函數(shù)示例詳解
這篇文章主要給大家介紹了關于kotlin Standard中內(nèi)聯(lián)函數(shù)的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用kotlin具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-08-08
這篇文章主要為大家詳細介紹了Android利用Canvas標點畫線并加入位移動畫的第一篇，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
這篇文章主要為大家詳細介紹了Android學習教程之滑動布局使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
Android 實例開發(fā)基于ArcSoft實現(xiàn)人臉識別
人臉識別，是基于人的臉部特征信息進行身份識別的一種生物識別技術。用攝像機或攝像頭采集含有人臉的圖像或視頻流，并自動在圖像中檢測和跟蹤人臉，進而對檢測到的人臉進行識別的一系列相關技術，通常也叫做人像識別、面部識別2021-11-11
這篇文章主要為大家詳細介紹了Android使用Retrofit上傳文件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
adb全稱Android Debug Bridge，是Android SDK中的一個工具, 使用adb可以直接操作管理Android模擬器或者真實的Andriod設備，就是起到調(diào)試橋的作用，這篇文章主要介紹了adb工具的基本使用,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Android動畫實現(xiàn)原理和代碼分析，如果你對此感興趣，跟著小編學習下吧。2017-12-12