如何在可点击的ion-item中合规嵌套ion-button？

使用场景 #

需要实现如下列表交互：

• 列表项点击后跳转至新页面
• 每个列表项侧边附带操作按钮（类似移动端Gmail的星标按钮），视觉上属于列表项内部
• 交互需同时兼容触摸界面与鼠标/触控板操作，因此无法使用Ionic的ion-item-sliding组件（相关已知问题：#22909、#23155）
• 也可考虑其他适用的UI模式

调研与潜在解决方案 #

直接嵌套方案（不可行） #

最直观的实现方式是直接在ion-item内嵌套ion-button，代码示例：

<ion-item
  button="true"
  detail="false"
  @click="parentClicked"
>
  <ion-label> An item </ion-label>

  <ion-button slot="end" @click="childClicked">
    <ion-label> Action </ion-label>
  </ion-button>
</ion-item>

但该方案会生成按钮嵌套按钮的无效HTML结构，严重违反无障碍访问标准，体验极差。

同级元素定位方案（复杂度高） #

有方案建议将ion-item和操作按钮设为同级元素，通过相对定位将操作按钮覆盖在列表项上方。但该方案基于原生HTML/CSS实现，在Ionic中需要复制组件样式保证对齐，实现复杂且稳定性不足。

潜在替代方案 #

编辑模式切换 #

在工具栏添加「编辑」按钮，切换至编辑模式后：

• 列表项不再作为跳转按钮
• 显示每个项的操作按钮
  局限性：仅适用于删除、重命名等操作，无法适配「收藏/星标」这类需要随时触发的操作场景。

勾选模式变体 #

灵感来自三星音乐的交互：

• 长按列表项切换至勾选模式
• 此模式下点击列表项为选中操作（而非跳转），同时显示全局操作工具栏
• 选中多个项时禁用单项目操作（如重命名）

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