Contents

处理点击

Contents

注意
交互式示例

您不仅希望向用户显示信息，还希望用户与您的应用进行交互。使用GestureDetector 组件来响应基本操作，例如点击和拖动。

此食谱展示了如何制作一个自定义按钮，当点击时显示一个 SnackBar，步骤如下：

创建按钮。
将其包装在一个带有 onTap() 回调的 GestureDetector 中。

dart// GestureDetector 包装了按钮。
GestureDetector(
  // 当点击子组件时，显示一个 SnackBar。
  onTap: () {
    const snackBar = SnackBar(content: Text('Tap'));

    ScaffoldMessenger.of(context).showSnackBar(snackBar);
  },
  // 自定义按钮
  child: Container(
    padding: const EdgeInsets.all(12),
    decoration: BoxDecoration(
      color: Colors.lightBlue,
      borderRadius: BorderRadius.circular(8),
    ),
    child: const Text('My Button'),
  ),
)

有关向按钮添加 Material 水波纹效果的信息，请参阅添加 Material 触摸水波纹食谱。
尽管此示例创建了一个自定义按钮，但 Flutter 包含少量按钮实现，例如：ElevatedButton、TextButton 和 CupertinoButton。

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) {
    // GestureDetector 包装了按钮。
    return GestureDetector(
      // 当点击子组件时，显示一个 SnackBar。
      onTap: () {
        const snackBar = SnackBar(content: Text('Tap'));

        ScaffoldMessenger.of(context).showSnackBar(snackBar);
      },
      // 自定义按钮
      child: Container(
        padding: const EdgeInsets.all(12),
        decoration: BoxDecoration(
          color: Colors.lightBlue,
          borderRadius: BorderRadius.circular(8),
        ),
        child: const Text('My Button'),
      ),
    );
  }
}

除非另有说明，否则本网站上的文档反映的是 Flutter 的最新稳定版本。页面最后更新于 2025-01-30。查看源代码或报告问题。

注意

交互式示例