美文网首页
Flutter 可随意拖动按钮

Flutter 可随意拖动按钮

作者: 停心阁 | 来源:发表于2020-03-31 13:38 被阅读0次

    实现这个功能主要用到了Stack、Positioned、Draggable等几个组件
    直接上代码:

    1.main.dart文件

    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(),
        );
      }
    }
    
    1. FloatBtn.dart 文件
    import 'package:flutter/material.dart';
    
    class FloatBtn extends StatefulWidget {
      FloatBtn({Key key}) : super(key: key);
    
      @override
      _FloatBtnState createState() => _FloatBtnState();
    }
    
    class _FloatBtnState extends State<FloatBtn> {
      
      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);
                      });
    
                    }
                  )
              )
             ]
           ),
        );
      }
    }
    

    相关文章

      网友评论

          本文标题:Flutter 可随意拖动按钮

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