Flutter中如何实现点击图片时在图片上叠加显示勾选标记？

你需要通过状态管理记录图片的选中状态，再用Stack组件叠加图片和勾选标记，点击时切换状态即可完成需求，具体修改步骤如下：

步骤1：定义选中状态变量 #

在当前State类中添加布尔类型的选中状态标记，如果是多图片列表场景，建议用数组存储每个index的选中状态：

// 单张图片场景
bool _isSelected = false;
// 多图片列表场景
List<bool> _selectedPhotos = List.generate(你的图片列表总长度, (index) => false);

步骤2：修改布局结构，叠加勾选标记 #

把原来的Image.network外层套上Stack组件，根据选中状态控制右上角勾选图标的显示：

child: Container(
  decoration: const BoxDecoration(
    color: Colors.transparent,
    borderRadius: BorderRadius.all(Radius.circular(15))
  ),
  child: Padding(
    padding: const EdgeInsets.all(10.0),
    child: ClipRRect(
      borderRadius: const BorderRadius.all(Radius.circular(15)),
      // 新增Stack组件叠加内容
      child: Stack(
        fit: StackFit.expand,
        children: [
          Image.network(
            state.photos[index].urls.small,
            fit: BoxFit.cover,
          ),
          // 选中状态下显示勾选标记
          if(_selectedPhotos[index]) // 单张场景替换为 if(_isSelected)
            const Align(
              alignment: Alignment.topRight,
              child: Padding(
                padding: EdgeInsets.all(8.0),
                child: Icon(
                  Icons.check_box,
                  color: Colors.greenAccent,
                  size: 24,
                ),
              )
            )
        ],
      ),
    ),
  ),
),
highlightColor: Colors.blue,
radius: 15,
onTap: () {
  // 点击切换选中状态，触发UI刷新
  setState(() {
    _selectedPhotos[index] = !_selectedPhotos[index];
    // 单张场景替换为 _isSelected = !_isSelected;
  });                       
},

核心逻辑说明 #

• Stack组件支持在同一块区域内叠加多个子组件，子组件排列顺序越靠后，显示层级越高
• 布尔状态变量控制勾选图标的显隐，点击时调用setState触发UI重新渲染即可实现切换效果
• 可以按需调整勾选图标的颜色、大小、边距，适配你的设计风格

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