美文网首页
flutter 手势

flutter 手势

作者: feitry | 来源:发表于2022-05-19 16:36 被阅读0次

先放代码:

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  final String title;

  const HomePage({super.key, required this.title});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Text("hi,${widget.title}"),
      ),
    );
  }
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'web title',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MyButton(), //const HomePage(title: 'title'),
    );
  }
}

void main(List<String> args) {
  runApp(const MyApp());
}

class MyButton extends StatelessWidget {
  const MyButton({super.key});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        // ignore: avoid_print
        print('object:on tap');
      },
      onDoubleTap: () {
        // ignore: avoid_print
        print('object:double tap');
      },
      onLongPress: () {
        // ignore: avoid_print
        print('object:on long press');
      },
      child: const HomePage(title: 'title-tap'),
    );
  }
}

运行效果:


Simulator Screen Shot - iPhone 13 Pro Max - 2022-05-19 at 16.33.44.png

在页面可进行轻点、双击、长安,控制台打印相应的调用方法:


截屏2022-05-19 下午4.35.51.png

HomePage也可以是其他Widget ,实现手势效果,GestureDetector,在gesture_detector.dart文件中可以看到,它支持各种手势:


截屏2022-05-19 下午4.31.13.png

相关文章

  • Flutter无限轮播Banner

    Flutter无限轮播Banner实现 [TOC] 手势 ​ Flutter中的手势系统有两个独立的层。第一层...

  • Flutter 4. 手势和资源文件

    1.手势 Flutter中提供的手势检测组件为GestureDetector,可以为child组件赋予手势响应。 ...

  • Flutter 小技巧——手势处理

    Flutter手势处理 在Flutter中的手势事件分为两层。第一层有原始指针事件,它描述了屏幕上指针(例如,触摸...

  • Flutter 手势

    这一篇简单说说Flutter的手势。 自身支持手势的Widget 如果某个Widget本身支持事件监测,那直接给他...

  • flutter 手势

    先放代码: 运行效果: 在页面可进行轻点、双击、长安,控制台打印相应的调用方法: HomePage也可以是其他Wi...

  • Flutter_点击事件和手势

    Flutter_点击事件和手势 Flutter中的手势系统有两个独立的层。第一层具有原始指针事件,其描述屏幕上指针...

  • Flutter 的手势(GestureDetector)分析详解

    今天详细讲解一下Flutter中的GestureDetector。 目录: 一、手势识别器分类二、手势识别器的相关...

  • Flutter-GestureDetector缩放手势

    在使用GestureDetector组件做手势控制的时候,我们还会接触到缩放手势。这篇博客主要分享Flutter ...

  • Flutter实战之手势操作篇

    Flutter实战之手势操作篇https://juejin.im/post/6844903910595887112...

  • Flutter和iOS手势冲突解决思路

    具体问题 iOS和flutter都有手势处理,但是在某些情况下可能产生手势冲突,比如iOS有一个抽屉手势,而flu...

网友评论

      本文标题:flutter 手势

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