如何在屏幕底部添加send message textfield发送消息文本输入框

以下是不同技术栈的通用实现方式：

前端（HTML/CSS/JS） #

核心通过固定定位把输入框钉在视口底部，同步适配安全区和键盘弹出场景

• 基础HTML结构

<div class="chat-container">
  <!-- 聊天消息列表区域 -->
  <div class="message-list"></div>
  <!-- 底部输入框区域 -->
  <div class="input-bar">
    <input type="text" placeholder="输入消息..." id="message-input">
    <button id="send-btn">发送</button>
  </div>
</div>

• 核心CSS样式

.input-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 8px 16px;
  background: #fff;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
  /* 适配iOS底部安全区 */
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
  box-sizing: border-box;
  display: flex;
  gap: 8px;
  align-items: center;
}
.input-bar input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #eee;
  border-radius: 20px;
  outline: none;
}

移动端可监听resize事件动态调整输入框bottom值，避免软键盘遮挡输入框。

iOS SwiftUI实现 #

使用safeAreaInset修饰器直接绑定底部位置，自动适配安全区

struct ChatView: View {
  @State private var messageText = ""
  
  var body: some View {
    List {
      // 聊天消息列表渲染逻辑
    }
    .safeAreaInset(edge: .bottom) {
      HStack(spacing: 8) {
        TextField("输入消息...", text: $messageText)
          .textFieldStyle(.roundedBorder)
        Button("发送") {
          // 发送消息业务逻辑
        }
      }
      .padding()
      .background(.background)
      .shadow(color: .black.opacity(0.1), radius: 2, x: 0, y: -2)
    }
  }
}

安卓Jetpack Compose实现 #

通过Scaffold的bottomBar参数承载输入框组件

@Composable
fun ChatScreen() {
  var messageText by remember { mutableStateOf("") }
  Scaffold(
    bottomBar = {
      Row(
        modifier = Modifier
          .fillMaxWidth()
          .navigationBarsPadding()
          .padding(horizontal = 16.dp, vertical = 8.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        verticalAlignment = Alignment.CenterVertically
      ) {
        TextField(
          value = messageText,
          onValueChange = { messageText = it },
          placeholder = { Text("输入消息...") },
          modifier = Modifier.weight(1f),
          shape = RoundedCornerShape(20.dp)
        )
        Button(onClick = { /* 发送消息业务逻辑 */ }) {
          Text("发送")
        }
      }
    }
  ) { paddingValues ->
    LazyColumn(
      modifier = Modifier
        .fillMaxSize()
        .padding(paddingValues)
    ) {
      // 聊天消息列表渲染逻辑
    }
  }
}

内容的提问来源于stack exchange，提问作者Aniekan-abasi Akpakpan