Flutter中如何将WebCard自身传递给点击事件？

你当前代码里的this指向的是当前页面的ScreenState实例——因为代码写在页面State的build方法中，上下文属于State，所以无法获取到对应的WebCard实例。下面提供两种可行的解决方案：

方案1：为每个WebCard实例创建变量 #

这种方法适合卡片数量较少的场景，直接把每个WebCard实例赋值给变量，再在回调中传入该变量：

Expanded(
  child: selectedTab == 0
      ? ListView(
          children: [
            // 先定义卡片实例
            final webCardBlank = WebCard(
              date: 'June 11, 2024',
              time: '10AM-11AM',
              title: 'Blank',
              subTitle: 'GoToBlankPage',
              url: '',
              onCustomJoin: () => openpage(context, webCardBlank),
            ),
            final webCardBrugal = WebCard(
              date: 'June 12, 2024',
              time: '1PM-2PM',
              title: 'Brugal',
              subTitle: 'Brugal Rum',
              url: 'https://www.brugal.com',
              onCustomJoin: () => openpage(context, webCardBrugal),
            ),
            webCardBlank,
            webCardBrugal,
          ],
        )
      : // 其他Tab内容
)

方案2：修改WebCard的回调参数（推荐） #

如果卡片数量较多或需要动态生成列表，推荐修改WebCard的回调函数定义，让它在内部触发时自动传递自身实例：

第一步：修改WebCard类的回调类型 #

假设你的WebCard是无状态组件，调整onCustomJoin的参数类型：

class WebCard extends StatelessWidget {
  final String date;
  final String time;
  final String title;
  final String subTitle;
  final String url;
  // 把回调改为接收WebCard实例的函数
  final void Function(WebCard) onCustomJoin;

  const WebCard({
    super.key,
    required this.date,
    required this.time,
    required this.title,
    required this.subTitle,
    required this.url,
    required this.onCustomJoin,
  });

  @override
  Widget build(BuildContext context) {
    // 在卡片的点击触发处，把当前实例传递给回调
    return GestureDetector(
      onTap: () => onCustomJoin(this),
      child: Column(
        children: [
          Text(date),
          Text(time),
          // 其他UI元素
        ],
      ),
    );
  }
}

如果WebCard是有状态组件，在State类中需要通过widget获取当前WebCard实例：

class WebCard extends StatefulWidget {
  final String date;
  final String time;
  final String title;
  final String subTitle;
  final String url;
  final void Function(WebCard) onCustomJoin;

  const WebCard({super.key, required this.onCustomJoin, required this.date, required this.time, required this.title, required this.subTitle, required this.url});

  @override
  State<WebCard> createState() => _WebCardState();
}

class _WebCardState extends State<WebCard> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => widget.onCustomJoin(widget), // 用widget获取当前WebCard实例
      child: // 卡片UI
    );
  }
}

第二步：使用WebCard时接收实例 #

在列表中创建WebCard时，直接在回调中接收卡片实例：

Expanded(
  child: selectedTab == 0
      ? ListView(
          children: [
            WebCard(
              date: 'June 11, 2024',
              time: '10AM-11AM',
              title: 'Blank',
              subTitle: 'GoToBlankPage',
              url: '',
              onCustomJoin: (card) => openpage(context, card),
            ),
            WebCard(
              date: 'June 12, 2024',
              time: '1PM-2PM',
              title: 'Brugal',
              subTitle: 'Brugal Rum',
              url: 'https://www.brugal.com',
              onCustomJoin: (card) => openpage(context, card),
            ),
          ],
        )
      : // 其他Tab内容
)

这样每次点击卡片时，都会把当前点击的WebCard实例传递给openpage方法，完美解决你的问题。

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