美文网首页Flutter
Flutter总结之悬浮按钮FloatingActionButt

Flutter总结之悬浮按钮FloatingActionButt

作者: sugood | 来源:发表于2021-07-11 17:21 被阅读0次

    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总结之悬浮按钮FloatingActionButt

        本文链接:https://www.haomeiwen.com/subject/bwgkpltx.html