Flutter悬浮按钮FloatingActionButton使用详解

目录
  • 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);

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

时间: 2021-07-09

Flutter实现文本组件、图标及按钮组件的代码

•文本组件 文本组件(text)负责显示文本和定义显示样式,下表为text常见属性 Text组件属性及描述 属性名 类型 默认值 说明 data String   要显示的文本 maxLines int 0 文本要显示的最大行数 style TextStyle null 文本样式,可定义文本的字体大小.颜色.粗细等 textAlign TextAlign TextAlign.center 文本水平方向的对齐方式,取值有center.end.justify.left.right.start.val

flutter仿微信底部图标渐变功能的实现代码

先给大家展示下效果图,感觉不错请参考实例代码. 实现思路 在flutter中,如果想实现上面的页面切换效果,必然会想到pageView.pageView的controller可以监听到pageView的滚动事件,也可以获取pageView滚动的位置,所以我们在滚动事件中根据位置去改变对应的图标颜色就可以实现了. 改变图标颜色 图标是从微信中提取出来的,都是webp格式的图片.要改变图片颜色可以使用ImageIcon这个组件. ImageIcon会把一张图片变成单色图片,所以只要图片没有多色的要求

Jquery Easyui分割按钮组件SplitButton使用详解(17)

SpliButton组件依赖于Menu(菜单)组件和 LinkButton(按钮)组件 加载方式 Class加载 <a href="javascript:void(0)" id="edit" class="easyui-splitbutton" data-options="menu:'#box',iconCls:'icon-edit'">编辑</a> <div id="box"

详解VUE里子组件如何获取父组件动态变化的值

在VUE里父组件给子组件间使用props方式传递数据,但是希望父组件的一个状态值改变然后子组件也能监听到这个数据的改变来更新子组件的状态. 场景:子组件通过props获取父组件传过来的数据,子组件存在操作传过来的数据并且传递给父组件. 比如想实现一个switch开关按钮的公用组件: 1.父组件可以向按钮组件传递默认值. 2.子组件的操作可以改变父组件的数据. 3.父组件修改传递给子组件的值,子组件能动态监听到改变. 比如父组件点击重置,开关组件的状态恢复为关闭状态: 方法1: 1.因为存在子组件

jQuery Mobile中的button按钮组件基础使用教程

一.Button 组件及 jQuery Mobile 如何丰富组件样式 在 jQuery Mobile 里,可以通过给任意链接添加 data-role="button" 来产生一个 button 组件,jQuery Mobile 会追加一定的样式到链接,值得注意的是,jQuery Mobile 在给组件元素追加样式时不一定只在原有的元素上添加 CSS 和 Javascript 响应,一般还会追加一些新的元素使到组件的样式更接近于原生的 App 组件样式.下面给出一个例子: 这是一个添加

Bootstrap按钮组件详解

按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常运作. 结构方面:使用一个类名为btn-group的容器,把多个按钮放在这个容器中. 按钮组也是一个独立的组件,所以可以找到相应的源码文件: Less:buttons.less Sass:_buttons.scss Css:Bootstrap.css 3131行~3291行 <div class="btn-group"> <button type="button" class=&qu

React Native悬浮按钮组件的示例代码

React Native悬浮按钮组件:react-native-action-button,纯JS组件,支持安卓和IOS双平台,支持设置子按钮,支持自定义位置和样式和图标. 效果图 安装方法 npm i react-native-action-button --save react-native link react-native-vector-icons 因为用到了react-native-vector-icons图标组件,需要做下link.如果你项目中已经使用了react-native-ve

vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】

最近公司的产品上线,一些高级功能在基础版本中不对用户开发,通过视频的形式展示. 产品开发用的是 vue, 经同事介绍使用了vue-video-player视频播放插件,通过 demo案例很快实现了视频播放效果 <video-player class="vjs-custom-skin" ref="videoPlayer1" :options="playerOptions" :playsinline="true" :even

iview给radio按钮组件加点击事件的实例

如下所示: <RadioGroup v-model="formValidate.phone"> <Radio label="phone">商家电话</Radio> <Radio label="leaderPhone">负责人电话</Radio> <span @click="inputPhone()"><Radio label="newPho

BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)

布局组件 下拉按钮 <div class="dropdown"> <button class="btn dropdown-toggle" id='drop1' data-toggle="dropdown"> 帮助<span class="caret"></span> </button> <ul class="dropdown-menu" ro