如何为Flutter的ReusableCard组件可选添加GestureDetector？

方案实现 #

将onPress设为可空回调，通过条件判断决定是否包裹GestureDetector，同时修复回调传递的错误写法：

import 'package:flutter/material.dart';

const bottomBarHeight = 80.0;
const activeCardColor = Color(0xFF1D1E33);
const inactiveCardColor = Color(0xFF111328);
const bottomBarColor = Color(0xFFEB1555);

class ReusableCard extends StatelessWidget {
  ReusableCard({required this.colour, this.cardChild, this.onPress});

  final Color colour;
  final Widget? cardChild;
  final VoidCallback? onPress;

  @override
  Widget build(BuildContext context) {
    final cardContent = Container(
      margin: EdgeInsets.all(15.0),
      decoration: BoxDecoration(
        color: colour,
        borderRadius: BorderRadius.circular(15.0),
      ),
      child: cardChild,
    );

    return onPress != null 
        ? GestureDetector(onTap: onPress, child: cardContent) 
        : cardContent;
  }
}

关键说明 #

1. 可空回调声明：把onPress定义为VoidCallback?（替代泛型Function，类型更明确），移除required使其成为可选参数。
2. 条件渲染：根据onPress是否为空，决定是否用GestureDetector包裹容器内容，避免无意义的手势监听。
3. 修复回调错误：原代码中onTap: onPress()会立即执行函数，正确写法是直接传递函数引用onTap: onPress。

使用示例 #

• 无手势场景：

ReusableCard(
  colour: inactiveCardColor,
  cardChild: const Text("静态卡片"),
);

• 带手势场景：

ReusableCard(
  colour: activeCardColor,
  cardChild: const Text("可点击卡片"),
  onPress: () => print("卡片被点击"),
);

内容的提问来源于stack exchange，提问作者Adi V