Flutter之用户点击行为捕获,及处理点击事件

最新推荐文章于 2024-07-05 00:34:28 发布

长风朗月碎梦

最新推荐文章于 2024-07-05 00:34:28 发布

阅读量4.6k

点赞数 1

分类专栏： Flutter 移动端开发前端技术文章标签： Flutter 用户点击行为

本文链接：https://blog.csdn.net/weixin_38175774/article/details/89304953

版权

前端技术同时被 3 个专栏收录

13 篇文章 0 订阅

订阅专栏

Flutter

8 篇文章 1 订阅

订阅专栏

移动端开发

6 篇文章 0 订阅

订阅专栏

在这里插入图片描述

1.实现的功能

捕获用户的点击行为
打印出点击行为
捕获拖动行为并用于拖动小球
更换主题同时清空打印的点击行为
2.用户手势行为主要是GestureDetector 这个widget提供api

child: GestureDetector(
                      onTap:()=> _printMsg("点击"),
                      onDoubleTap:()=> _printMsg("双击"),
                      onLongPress:()=> _printMsg("长按"),
                      onPanUpdate: (e){
                        print("拖动");
                        setState(() {
                          moveX+=e.delta.dx;
                          moveY+=e.delta.dy;
                        });
                      },

3.全部代码:

import 'package:flutter/material.dart';
class GesturePage extends StatefulWidget {
  @override
  _GesturePageState createState() => new _GesturePageState();
}

class _GesturePageState extends State<GesturePage> {
  bool itemFlag=true;

  String printMsg="";

  double moveX=0;
  double moveY=0;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "11",
      theme: ThemeData(
        primarySwatch: Colors.teal,
        brightness: itemFlag?Brightness.dark:Brightness.light
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("处理手势"),
          leading: GestureDetector(
            onTap: ()=>Navigator.pop(context),
            child: Icon(Icons.arrow_back),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          tooltip: '悬浮',
          child: Icon(Icons.brush),
          onPressed: () {
            _change();
          },
        ),
        body: Column(
          children: <Widget>[
            Container(
              height: 300,
              decoration: BoxDecoration(color: Colors.grey),
              child: Stack(
                children: <Widget>[
                  Positioned(
                    left: moveX,
                    top: moveY,
                    child: GestureDetector(
                      onTap:()=> _printMsg("点击"),
                      onDoubleTap:()=> _printMsg("双击"),
                      onLongPress:()=> _printMsg("长按"),
                      onPanUpdate: (e){
                        print("拖动");
                        setState(() {
                          moveX+=e.delta.dx;
                          moveY+=e.delta.dy;
                        });
                      },
                      child: Container(
                        width: 60,
                        height: 60,
                        decoration: BoxDecoration(borderRadius: BorderRadius.circular(30),color: Colors.orange),
                      ),
                    ),
                  ),
                ],
              ),
            ),
            Text(printMsg),
            Container(
                child: Wrap(children:listData(),)),
          ],
        ),
      
      ),
    );
  }
  var list= <String>[];
  _printMsg(String s) {
    setState(() {
      list.add(s);
    });
  }

  void _change() {
    list=<String>[];
    setState(() {
      itemFlag=!itemFlag;
    });
  }

  listData() {
    var listWidget= <Container>[];
    for (var i = 0; i < list.length; ++i) {
      listWidget.add(new Container(
          child: Chip(avatar: Icon(Icons.people), label: Text(list[i]),
              labelStyle: TextStyle(
                  color: Colors.pink, fontSize: 12, fontWeight:
              FontWeight.w100)))
      );
    }
  return listWidget;
  }
}