flutter中的手势

最新推荐文章于 2024-01-11 18:50:12 发布

原创最新推荐文章于 2024-01-11 18:50:12 发布 · 480 阅读

0 ·

CC 4.0 BY-SA版权

flutter 专栏收录该内容

17 篇文章

订阅专栏

这篇博客介绍了Flutter中使用GestureDetector实现各种手势操作，如onTapDown、onTapUp、onTap、onTapCancel、onDoubleTap和onLongPress。通过示例代码展示了如何创建一个跟随手势移动的控件，核心在于利用onPanUpdate事件处理手势移动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

flutter中可以通过GestureDetector方法中的不同手势事件来实现不同的点击操作：
例如：
onTapDown 按下。
onTapUp 按下起来之后。
onTap 点击。
onTapCancel点击之后移出点击区域。
onDoubleTap双击。
onLongPress 长按。
以下代码演示了以上不同方法的操作：

class gustrueState extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new StateFullGroupState();
  }
}

class StateFullGroupState extends State<gustrueState> {
  //定义一个String类型的变量  用于打印说明
  String printstring = '';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'nihao',
        // theme: ThemeData(primaryColor: Colors.blue),
        home: Scaffold(
          appBar: AppBar(
            title: Text('nihao'),
            leading: GestureDetector(
              onTap: () {
                Text('点我返回');
              },
              child: Icon(Icons.arrow_back),
            ),
          ),
          body: FractionallySizedBox(
            //创建一个小部件，将其子部件的大小调整到总可用空间的一小部分
            widthFactor: 1, //出入快递中给定的
            child: Stack(
              //一个小部件，其子部件的位置与其框的边缘关联
              children: <Widget>[
                Column(
                  children: <Widget>[
                    GestureDetector(
                      //手势侦查器 （有方法检测到不同的手势）
                      onTap: () => _printMsg('点击'),
                      onDoubleTap: () => _printMsg('双击'),
                      onLongPress: () => _printMsg('长按'),
                      onTapCancel: () => _printMsg('取消'),
                      onTapUp: (e) => _printMsg('松开'),
                      onTapDown: (e) => _printMsg('按下'),
                      child: Container(  //被点击的对象child
                        padding: EdgeInsets.all(60),
                        decoration: BoxDecoration(color: Colors.blue),
                        child: Text(
                          '点我',
                          style: TextStyle(fontSize: 30, color: Colors.yellow),
                        ),
                      ),
                    ),
                    //将点击的时间说明打印出来
                    Text(printstring),
                  ],
                )
              ],
            ),
          ),
        ));
  }
  /**
   * 创建打印方法
   */
  _printMsg(String s) {
    setState(() {
      printstring += ' ,$s';
    });
  }
}

eg：
flutter中制作一个跟随手势移动的控件
核心代码：
1 什么变量，用于指定手势的位置：

  double Movex = 0;
  double Movey = 0;

2 指定初始位置，确定图像的widget，实现onPanUpdate的事件
（onPanUpdate：一个与屏幕接触并移动之后的回调事件）

Positioned(
                    child: GestureDetector(
                      onPanUpdate: (e) => _doMove(e),
                      child: Container(
                        width: 50,
                        height: 50,
                        child: Text('nni'),
                        decoration: BoxDecoration(
                            color: Colors.red,
                            borderRadius: BorderRadius.circular(25)),
                      ),
                    ),
                    left: Movex,
                    top: Movey),

具体的doMove实现：
将movex和movey的值更改为回调之后的位置

_doMove(DragUpdateDetails e) {
    setState(() {
      Movex += e.delta.dx;
      Movey += e.delta.dy;
    });
  }