GestureDetector 无法在 SizedBox 中工作

Question

我有下面的小部件，可以创建 CircularIconButton。我想要一个 GestureDetector，这样这个小部件占用的整个空间都可以被点击并完成一些操作。下面是它的样子：

但无论我做什么，它似乎都不起作用，而且我什至没有看到 GestureDetector 显示在小部件树中。

这是我的代码：

import 'package:flutter/material.dart';
import 'package:fti_team_member_app_v3/features/theme/theme_constants.dart';
import 'package:url_launcher/url_launcher.dart';

/// Creates a circular icon button with a text footer that links to a url.
class CircularIconButton extends StatelessWidget {
  /// The button title.
  final String title;

  /// The button icon.
  final IconData icon;

  /// The url to link to.
  final String url;

  /// The width of the button container.
  final double containerWidth;

  /// The height of the button container.
  static const double containerHeight = 160;

  /// The height of the button.
  static const double buttonHeight = 100;

  const CircularIconButton(
      {super.key,
      required this.title,
      required this.icon,
      required this.url,
      this.containerWidth = 125});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: containerWidth,
      height: containerHeight,
      child: GestureDetector(
        behavior: HitTestBehavior.translucent,
        onTap: () async {
          if (!await launchUrl(Uri.parse(url))) {
            throw Exception('Could not launch ${Uri.parse(url)}');
          }
        },
        child: Column(
          children: [
            SizedBox(
              height: buttonHeight,
              child: ElevatedButton(
                onPressed: null,
                style: primaryButtonStyle.copyWith(
                  shape: WidgetStateProperty.all<CircleBorder>(
                      const CircleBorder()),
                ),
                child: Icon(icon),
              ),
            ),
            // The title of the button.
            Align(
              child: Text(
                title,
                softWrap: true,
                overflow: TextOverflow.ellipsis,
                maxLines: 3,
                textAlign: TextAlign.center,
                style: meta.copyWith(color: ftiDarkGray),
              ),
            )
          ],
        ),
      ),
    );
  }
}

我尝试移动 GestureDetector 的放置位置，希望能够修复它，但到目前为止没有任何效果。

Answer 1

如果 GestureDetector 在 Flutter 中的 SizedBox 上不起作用，需要注意的是，TextField/Padding/Sizedbox GestureDetector 在某些情况下不能直接工作，如果您需要手势检测器在 Text field/Padding/SizedBox 上顺利工作，请使用 AbsorbPointer 。此代码中的 AbsorbPointer 检查手势检测器的 onTap 功能是否已启用

 GestureDetector(
              onTap: () {
                print("hello now i m working ");
              },
              child: AbsorbPointer(
                child: TextField(
                  controller: textController,
                  readOnly: true,
                  decoration: InputDecoration(
                      labelText: 'Research Thinker File ',
                      suffixIcon: Icon(Icons.upload_outlined)),
                ),
              ),
            ),

参考：https://researchthinker.com/solved-gesture detector-is-not-working-on-the-textfield/