Ionic中堆叠标签输入框如何实现按钮与输入行对齐

在Ionic开发中遇到按钮位置不符合预期的问题：

预期效果为按钮与输入框同行显示，对齐效果和输入框自带的clear-button清除按钮完全一致。
初始实现代码：

<ion-item>
  <ion-label position="stacked">New answer</ion-label>
  <ion-input clear-input></ion-input>
  <ion-button slot="end">+</ion-button>
</ion-item>

此前尝试将按钮放到ion-input内部时，虽能实现同行显示，但end插槽的定位效果会失效。另外该输入项是列表最后一行，如果将标签放在输入框前方，很难识别出这是输入框组件。

之前把按钮放到ion-input内定位失效，本质是插槽层级匹配错误导致的，不要把按钮放在ion-item的end槽位，直接将按钮作为ion-input的子元素，指定slot="end"匹配输入框内置的尾部插槽，就能实现和原生清除按钮完全一致的同行对齐效果：

<ion-item>
  <ion-label position="stacked">New answer</ion-label>
  <ion-input clear-input>
    <ion-button slot="end" fill="clear" size="small">+</ion-button>
  </ion-input>
</ion-item>

如果存在细微的对齐偏差，在组件作用域样式中加少量规则微调即可：

ion-input ion-button[slot="end"] {
  margin-bottom: 0;
  --padding-end: 4px;
  height: 100%;
}

这种实现方式不需要修改ion-label的position配置，能保留stacked标签的原有展示效果，不会出现标签和输入框并排难以识别输入组件的问题；同时按钮和原生清除按钮同属输入框的内部插槽容器，垂直对齐、内边距都和原生控件逻辑一致，不会破坏ion-item的原有布局，输入、点击交互也不会受影响。
如果需要按钮和原生清除按钮视觉完全统一，可以给按钮补充和清除按钮一致的属性：

<ion-button slot="end" fill="clear" shape="round" size="small" color="medium">+</ion-button>

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