如何将TextField固定在应用页面底部且不随页面滚动？

下面分几种主流技术栈给出实现方案，效果和你提到的Twitter底部输入框一致：

1. Flutter 实现 #

可以通过两种简洁方式实现，推荐优先使用Scaffold的内置属性：

方案一：用Scaffold的bottomNavigationBar（适配键盘） #

Scaffold(
  body: SingleChildScrollView(
    // 页面滚动内容区域
    child: Column(
      children: [
        for (int i = 0; i < 20; i++)
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text("滚动内容 $i"),
          ),
      ],
    ),
  ),
  bottomNavigationBar: Padding(
    padding: EdgeInsets.only(
      bottom: MediaQuery.of(context).viewInsets.bottom, // 自动适配键盘弹出
    ),
    child: TextField(
      decoration: InputDecoration(
        hintText: "输入内容...",
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(24)),
        contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
      ),
    ),
  ),
)

• 优势：无需手动处理键盘遮挡问题，系统自动调整输入框位置
• 提示：如果不需要键盘适配，可直接移除MediaQuery相关代码

方案二：用Stack + Positioned（自定义位置） #

Stack(
  children: [
    // 滚动内容区域
    SingleChildScrollView(
      child: Column(
        children: [
          for (int i = 0; i < 20; i++)
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text("滚动内容 $i"),
            ),
        ],
      ),
    ),
    // 底部固定输入框
    Positioned(
      left: 16,
      right: 16,
      bottom: 16,
      child: TextField(
        decoration: InputDecoration(
          hintText: "输入内容...",
          border: OutlineInputBorder(borderRadius: BorderRadius.circular(24)),
          filled: true,
          fillColor: Colors.white,
        ),
      ),
    ),
  ],
)

• 优势：可灵活控制输入框的左右间距和底部距离
• 提示：若要适配键盘，需结合MediaQuery动态调整bottom值

2. Web（HTML + CSS）实现 #

利用CSS的固定定位属性快速实现：

HTML结构 #

<!-- 页面滚动内容 -->
<div class="scroll-content">
  <p>滚动内容 1</p>
  <p>滚动内容 2</p>
  <!-- 更多滚动内容 -->
</div>

<!-- 底部固定输入框 -->
<div class="bottom-input">
  <input type="text" placeholder="输入内容..." class="text-field">
</div>

CSS样式 #

.scroll-content {
  /* 给底部输入框预留空间，避免内容被遮挡 */
  padding-bottom: 80px;
}

.bottom-input {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background-color: white;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.1); /* 顶部阴影增强层次感 */
}

.text-field {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 24px;
  font-size: 16px;
}

3. Android原生（Jetpack Compose）实现 #

借助Scaffold的bottomBar属性快速搭建：

Scaffold(
  bottomBar: {
    TextField(
      value: "",
      onValueChange: {},
      placeholder: { Text("输入内容...") },
      modifier: Modifier
        .fillMaxWidth()
        .padding(16.dp)
        .shadow(elevation = 4.dp, shape = RoundedCornerShape(24.dp)),
      shape: RoundedCornerShape(24.dp),
    )
  }
) { innerPadding ->
  // 滚动内容区域，用innerPadding避免被底部输入框遮挡
  LazyColumn(
    contentPadding = innerPadding,
    verticalArrangement = Arrangement.spacedBy(8.dp)
  ) {
    items(20) { index ->
      Text(text = "滚动内容 $index", modifier = Modifier.padding(8.dp))
    }
  }
}

• 优势：自动适配系统状态栏、导航栏，无需手动处理布局偏移

内容的提问来源于stack exchange，提问作者Cliff Odebala Clarke