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

Flutter之用户点击行为捕获,及处理点击事件_第1张图片
Flutter之用户点击行为捕获,及处理点击事件_第2张图片
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 {
  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: [
            Container(
              height: 300,
              decoration: BoxDecoration(color: Colors.grey),
              child: Stack(
                children: [
                  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= [];
  _printMsg(String s) {
    setState(() {
      list.add(s);
    });
  }

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

  listData() {
    var listWidget= [];
    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;
  }
}

你可能感兴趣的:(Flutter,移动端开发,前端技术)