Flutter点击Widget高亮问题：仅切换点击项的父级颜色

你的问题核心在于所有WidgetHandle共享了同一个isSingleTapped状态变量——不管点击哪个组件，这个全局变量都会被设为true，导致所有依赖它的WidgetHandle同步切换到白色背景。要实现“点击单个Widget仅其对应父级变色”的效果，我们需要让每个可点击项拥有独立的状态，或者通过父组件精准跟踪选中的目标。

方案1：封装独立的可选中组件（支持多选） #

把每个带点击交互的项封装成独立的StatefulWidget，让每个组件维护自己的选中状态，这样它们之间的状态互不干扰。

封装组件代码 #

class SelectableWidget extends StatefulWidget {
  final Widget child;
  final double width;
  final double height;

  const SelectableWidget({
    super.key,
    required this.child,
    this.width = 200,
    this.height = 200,
  });

  @override
  State<SelectableWidget> createState() => _SelectableWidgetState();
}

class _SelectableWidgetState extends State<SelectableWidget> {
  bool _isSelected = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: widget.width,
      height: widget.height,
      child: InkWell(
        onTap: () {
          // 点击时切换选中状态（如果需要点击一次保持选中，改成_isSelected = true即可）
          setState(() => _isSelected = !_isSelected);
        },
        child: WidgetHandle(
          handleColor: _isSelected ? Colors.white : Colors.transparent,
          child: widget.child,
        ),
      ),
    );
  }
}

使用封装后的组件 #

在你的Stack中直接替换原来的代码：

Stack(
  children: <Widget>[
    SelectableWidget(
      child: TextFormField(
        decoration: InputDecoration(
          border: InputBorder.none,
          hintText: getAddress(),
          hintStyle: TextStyle(color: white, fontSize: 18),
        ),
      ),
    ),
    SelectableWidget(
      child: Icon(
        Icons.face,
        color: white,
        size: 32,
      ),
    ),
    // 其他需要添加的Widget都用SelectableWidget包裹即可
  ],
)

方案2：父组件跟踪选中项（支持单选） #

如果你的需求是同一时间只能有一个Widget被选中，可以在父组件中维护一个选中索引/标识，点击时更新这个标识，每个WidgetHandle根据自身是否匹配标识来切换颜色。

示例代码 #

// 在父组件的State类中添加变量
int? _selectedItemIndex;

// 构建Stack
Stack(
  children: <Widget>[
    _buildSelectableItem(0, TextFormField(
      decoration: InputDecoration(
        border: InputBorder.none,
        hintText: getAddress(),
        hintStyle: TextStyle(color: white, fontSize: 18),
      ),
    )),
    _buildSelectableItem(1, Icon(
      Icons.face,
      color: white,
      size: 32,
    )),
    // 其他项依次递增索引
  ],
)

// 提取构建方法
Widget _buildSelectableItem(int index, Widget child) {
  return Container(
    width: 200,
    height: 200,
    child: InkWell(
      onTap: () {
        setState(() {
          _selectedItemIndex = index;
        });
      },
      child: WidgetHandle(
        handleColor: _selectedItemIndex == index ? Colors.white : Colors.transparent,
        child: child,
      ),
    ),
  );
}

注意事项 #

• 记得删除原来的全局isSingleTapped变量，避免干扰新的状态逻辑。
• 如果WidgetHandle本身是自定义组件，确保它能正确接收handleColor参数并应用到背景上。

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