Flutter Stack动态添加Widget时如何识别被点击的指定Widget

Flutter中Widget是不可变的配置对象，直接存储List<Widget>很难灵活修改指定项，我们可以通过数据驱动视图的方式实现需求，具体实现如下： #

1. 定义文本配置数据模型 #

首先抽象出每个文本项的配置字段，每个项携带唯一标识用于点击时定位：

import 'dart:math';
import 'package:flutter/material.dart';

class CustomTextConfig {
  // 唯一标识，用于定位点击的项
  final String id;
  // 可修改的样式属性，可根据需求扩展
  String content;
  double fontSize;
  Color textColor;
  FontWeight fontWeight;
  // Positioned的定位参数
  Offset position;

  CustomTextConfig({
    required this.id,
    this.content = "新增文本",
    this.fontSize = 14,
    this.textColor = Colors.black,
    this.fontWeight = FontWeight.normal,
    required this.position,
  });
}

2. 替换Widget列表为数据列表 #

把原来存储Widget的列表替换为存储配置数据的列表：

class YourPageState extends State<YourPage> {
  // 存储所有文本的配置数据
  final List<CustomTextConfig> _textConfigs = [];
  // 自增计数器生成唯一ID，也可引入uuid库生成更规范的唯一标识
  int _idCounter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Stack(
        // 由配置数据映射生成Widget列表
        children: _textConfigs.map((config) {
          return Positioned(
            left: config.position.dx,
            top: config.position.dy,
            // 用GestureDetector包裹文本，监听点击事件
            child: GestureDetector(
              onTap: () => _onTextTapped(config.id),
              child: Text(
                config.content,
                style: TextStyle(
                  fontSize: config.fontSize,
                  color: config.textColor,
                  fontWeight: config.fontWeight,
                ),
              ),
            ),
          );
        }).toList(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _addNewText,
        child: const Icon(Icons.add),
      ),
    );
  }

3. 实现新增和点击更新逻辑 #

// 新增文本逻辑
  void _addNewText() {
    _textConfigs.add(CustomTextConfig(
      id: "text_$_idCounter",
      // 示例随机生成位置，可根据需求自定义定位逻辑
      position: Offset(
        Random().nextDouble() * (MediaQuery.of(context).size.width - 100),
        Random().nextDouble() * (MediaQuery.of(context).size.height - 200),
      ),
    ));
    _idCounter++;
    setState(() {});
  }

  // 文本点击逻辑，传入点击项的ID定位修改
  void _onTextTapped(String targetId) {
    // 找到对应ID的配置项
    final targetIndex = _textConfigs.indexWhere((config) => config.id == targetId);
    if (targetIndex == -1) return;
    // 修改对应项的样式，这里可根据需求调整任意属性
    _textConfigs[targetIndex].fontSize += 3;
    _textConfigs[targetIndex].textColor = Colors.red;
    _textConfigs[targetIndex].fontWeight = FontWeight.bold;
    // 刷新页面
    setState(() {});
  }
}

性能优化方案（可选） #

如果需要完全不影响其他组件、实现真正的局部刷新，可以把每个文本项单独封装为独立的StatefulWidget，点击时仅调用当前文本项自身的setState方法即可，不会触发父页面和其他文本项的重构。

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