捕获和处理点击动作

我们的 app 不仅要把信息展示给用户,还要和用户进行交互。怎么响应用户的点击,拖动等操作行为呢? ——使用 GestureDetector Widget。

你可以通过以下步骤来实现一个按钮,当用户点击的时候显示 snackbar 消息:

  1. 创建一个按钮。

  2. GestureDetector 包裹按钮,并传入 onTap 回调函数。

// The GestureDetector wraps the button.
GestureDetector(
  // When the child is tapped, show a snackbar.
  // 当它的子元素被点击,显示一个 snackbar 
  onTap: () {
    const snackBar = SnackBar(content: Text('Tap'));

    ScaffoldMessenger.of(context).showSnackBar(snackBar);
  },
  // The custom button
  // 这个是我们的自定义按钮
  child: Container(
    padding: const EdgeInsets.all(12.0),
    decoration: BoxDecoration(
      color: Colors.lightBlue,
      borderRadius: BorderRadius.circular(8.0),
    ),
    child: const Text('My Button'),
  ),
)

注意

  1. 如果你想添加点按涟漪效果 (Material Design) 请参考文章 添加点按涟漪效果 (Material Design)

  2. 这里为了说明原理,我们创建了自定义的按钮,其实 Flutter 已经为我们准备了很多现成的按钮供我们使用,比如: ElevatedButtonTextButtonCupertinoButton

交互式样例

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    const title = 'Gesture Demo';

    return const MaterialApp(
      title: title,
      home: MyHomePage(title: title),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: const Center(
        child: MyButton(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    // The GestureDetector wraps the button.
    return GestureDetector(
      // When the child is tapped, show a snackbar.
      onTap: () {
        const snackBar = SnackBar(content: Text('Tap'));

        ScaffoldMessenger.of(context).showSnackBar(snackBar);
      },
      // The custom button
      child: Container(
        padding: const EdgeInsets.all(12.0),
        decoration: BoxDecoration(
          color: Colors.lightBlue,
          borderRadius: BorderRadius.circular(8.0),
        ),
        child: const Text('My Button'),
      ),
    );
  }
}