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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家! 

相关文章

  • Android切面编程入门讲解

    Android切面编程入门讲解

    这篇文章给大家分享了关于Android进阶资深开发必备技能-切面编程入门的相关知识点内容,有兴趣的朋友们参考下。
    2018-08-08
  • 详解Android MacAddress 适配心得

    详解Android MacAddress 适配心得

    本篇文章主要介绍了详解Android MacAddress 适配心得,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • Android下载gradle失败的解决方法

    Android下载gradle失败的解决方法

    这篇文章主要介绍了Android下载gradle失败的解决方法,文章通过图文结合的方式给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-06-06
  • Android NavigationBar问题处理的方法

    Android NavigationBar问题处理的方法

    本篇文章主要介绍了Android NavigationBar问题处理的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • Android NotificationListenerService通知监听服务使用

    Android NotificationListenerService通知监听服务使用

    这篇文章主要为大家介绍了Android NotificationListenerService通知监听服务使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • Android中使用sax解析xml文件的方法

    Android中使用sax解析xml文件的方法

    本篇文章介绍了,在Android中使用sax解析xml文件的方法。需要的朋友参考下
    2013-04-04
  • Android权限如何禁止以及友好提示用户开通必要权限详解

    Android权限如何禁止以及友好提示用户开通必要权限详解

    这篇文章主要给大家介绍了关于Android权限如何禁止以及友好提示用户开通必要权限的相关资料,文中通过示例代码介绍的非常详细,对各位Android开发者们具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-04-04
  • android H5本地缓存加载优化的实战

    android H5本地缓存加载优化的实战

    这篇文章主要介绍了android H5本地缓存加载优化的实战,帮助大家更好的理解和学习使用Android,感兴趣的朋友可以了解下
    2021-04-04
  • 谈一谈Android内存泄漏问题

    谈一谈Android内存泄漏问题

    谈一谈Android内存泄漏问题,围绕内存泄露的定义、内存泄露的原理、内存泄露的解决方法进行探讨,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • Android图片实现压缩处理的实例代码

    Android图片实现压缩处理的实例代码

    本篇文章主要介绍了Android图片实现压缩处理的实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07

最新评论