Ionic仿WhatsApp输入框样式求助：图标重叠及文本遮挡问题

修改后的HTML结构 #

<ion-footer>
  <ion-row class="input-row" align-items-center>
    <!-- 输入框区域 -->
    <ion-col size="8">
      <ion-input 
        placeholder="Nachricht" 
        class="message-eingabe" 
        autoGrow="true" 
        rows="1" 
        maxlength="150"
        [(ngModel)]="msg"
      ></ion-input>
    </ion-col>
    <!-- 附件、相机按钮 -->
    <ion-col size="2" class="icon-buttons">
      <ion-button fill="clear">
        <ion-icon name="attach-outline"></ion-icon>
      </ion-button>
      <ion-button fill="clear">
        <ion-icon name="camera"></ion-icon>
      </ion-button>
    </ion-col>
    <!-- 发送按钮 -->
    <ion-col size="2" class="send-button">
      <ion-button fill="clear">
        <ion-icon name="send"></ion-icon>
      </ion-button>
    </ion-col>
  </ion-row>
</ion-footer>

对应的CSS样式 #

.input-row {
  padding: 8px 16px;
  gap: 8px;
}

.message-eingabe {
  border-radius: 20px;
  background-color: #f0f0f0;
  padding: 8px 12px;
}

.icon-buttons {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.send-button {
  display: flex;
  justify-content: center;
  align-items: center;
}

关键修改说明 #

• 解决图标重叠：用ion-row+ion-col的网格布局替代原有的绝对定位，把附件、相机按钮放到同一列，通过flex横向排列，彻底避免重叠问题。
• 避免文本被遮挡：移除输入框内的绝对定位按钮，给输入框设置合适内边距，同时通过网格布局预留右侧空间，输入文本不会再被按钮遮挡。
• 发送按钮外部布局：将发送按钮单独放在独立列中，与输入框、功能按钮并列布局，完美实现WhatsApp式的右侧外部按钮效果，输入框自然从左侧开始填充对应宽度。

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