Flutter悬浮按钮FloatingActionButton使用详解

梅耘豪
2023-12-01

1、普通用法

1

2

3

4

5

6

floatingActionButton: FloatingActionButton(

    child: Icon(Icons.add),

      onPressed: (){

         print('不要啊~');

      },

 ),

2、修改悬浮按钮位置

继承FloatingActionButtonLocation类,重写对应方法自定义位置

1

2

3

4

5

6

7

8

9

10

11

12

13

14

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);

  }

}

使用

1

2

floatingActionButtonLocation:CustomFloatingActionButtonLocation(

             FloatingActionButtonLocation.endFloat, 0, -DpUtils.setWidth(20)),

3、修改悬浮按钮大小

1

2

3

4

5

6

7

8

floatingActionButton: SizedBox(

  height: 100.0,

  width: 100.0,

  child:FloatingActionButton(

    child: Icon(Icons.add),

    onPressed: () {},

  ),

),

4、去除悬浮按钮切换动画

继承FloatingActionButtonAnimator类并重写对应的方法

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

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);

  }

}

使用

1

floatingActionButtonAnimator: NoScalingAnimation(),

5、一般的自定义悬浮按钮样式

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

@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。所以该干嘛干嘛咯

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

@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),

              ),

            ],

          ),

        ),

    );

  }

 类似资料: