flutter-可拖动悬浮按钮

最新推荐文章于 2026-01-05 16:05:14 发布

原创最新推荐文章于 2026-01-05 16:05:14 发布 · 2.9k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#flutter #android #ios

flutter 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了如何在Flutter应用中创建一个可拖动的悬浮按钮，适用于Android和iOS平台。通过自定义手势处理，实现用户可以自由调整悬浮按钮的位置。

组件

import 'package:flutter/material.dart';

class FloatButton extends StatefulWidget {
  FloatButton({Key key}) : super(key: key);

  @override
  _FloatButtonState createState() => _FloatButtonState();
}

class _FloatButtonState extends State<FloatButton> {
  Offset offsetA = Offset(20, kToolbarHeight + 100); //按钮的初始位置

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    final width = size.width;
    final height = size.height;

    return Scaffold(
      body: Stack(children: <Widget>[
        Positioned(
            left: offsetA.dx,
            top: offsetA.dy,
            child: Draggable(
                //创建可以被拖动的Widget
                child: FloatingActionButton(
                  tooltip: 'Increment',
                  child: Icon(Icons.add),
                  onPressed: () {},
                ),
                //拖动过程中的Widget
                feedback: FloatingActionButton(
                  tooltip: 'Increment',
                  child: Icon(Icons.add),
                  onPressed: () {},
                ),
                //拖动过程中，在原来位置停留的Widget，设定这个可以保留原本位置的残影，如果不需要可以直接设置为Container()
                childWhenDragging: Container(),

                // FloatingActionButton(
                //   tooltip: 'Increment',
                //   child: Icon(Icons.add), onPressed: () {},
                // ),
                //拖动结束后的Widget
                onDraggableCanceled: (Velocity velocity, Offset offset) {
                  // 计算组件可移动范围  更新位置信息
                  setState(() {
                    var x = offset.dx;
                    var y = offset.dy;
                    if (offset.dx < 0) {
                      x = 20;
                    }

                    if (offset.dx > 375) {
                      x = 335;
                    }

                    if (offset.dy < kBottomNavigationBarHeight) {
                      y = kBottomNavigationBarHeight;
                    }

                    if (offset.dy > height - 100) {
                      y = height - 100;
                    }

                    offsetA = Offset(x, y);
                  });
                }))
      ]),
    );
  }
}

main

import 'package:flutter/material.dart';
import 'FloatBtn.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FloatBtn(),
    );
  }
}