如何将Ion-icon正确定位在ion-footer内的ion-card旁

修正后代码 #

<IonFooter style={{
  backgroundColor: 'white',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
  padding: '8px 16px',
  minHeight: '60px'
}}>
  <IonCard style={{
    width: '78%',
    margin: 0,
    borderRadius: '24px',
    boxShadow: 'none'
  }}>
    <IonCardContent style={{padding: '4px 12px'}}>
      <IonTextarea
        placeholder="输入消息..."
        value={text}
        onIonChange={e => setText(e.detail.value)}
        autoGrow
        maxRows={3}
      />
    </IonCardContent>
  </IonCard>
  <IonIcon 
    icon={arrowForwardSharp} 
    size="large" 
    color="dark"
    style={{
      cursor: 'pointer',
      zIndex: 99
    }}
    onClick={() => {
      // 提交消息逻辑
      if(text.trim()) {
        // 调用发送方法
        setText('')
      }
    }}
  />
</IonFooter>

关键调整说明 #

• 给IonFooter开启flex横向布局，设置子元素垂直居中、两端对齐，加上内边距避免元素贴边，设置最小高度保证显示区域充足。
• 清空IonCard默认外边距，关闭默认阴影消除异常黑框，调整圆角适配聊天输入框的通用样式。
• 给IonIcon设置z-index:99避免被下层元素遮挡，添加点击事件实现提交功能。
• 给IonTextarea添加autoGrow属性，可实现输入内容超过单行时自动向上撑开，最高支持3行，不会超出footer范围。

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