SwiftUI：如何让列表样式的输入TextField固定在顶部，下方数据列表可滚动且保留原有样式

嘿，我太懂你这种纠结了——既要把输入框牢牢钉在顶部不跟着滚动，又得让下面的内容能自由滚动，还得死死保住原生List那套舒服的样式，之前我折腾类似需求的时候也卡了好一阵，现在给你分享个完美解决的方案：

核心思路就是把原来的单个List拆成两个独立的小List，分别对应固定的输入区和可滚动的内容区，再通过样式统一和布局微调，让它们看起来完全像一个整体：

具体实现代码 #

import SwiftUI

struct HomeView: View {
    @State private var textFieldUserInput: String = ""
    
    var body: some View {
        VStack(spacing: 0) {
            // 顶部固定的输入框区域
            List {
                Section {
                    TextField("Enter Text", text: $textFieldUserInput)
                }
            }
            .listStyle(.insetGrouped) // 和下方List用完全一致的样式
            .scrollDisabled(true) // 禁用这个小List的滚动
            .frame(height: 100) // 手动设置高度，刚好容纳输入区（可根据自己的需求微调）
            
            // 下方可滚动的内容列表
            List {
                Section {
                    // 用ForEach模拟大量数据，方便测试滚动效果
                    ForEach(0..<30) { index in
                        Text("Example Text \(index + 1)")
                    }
                }
            }
            .listStyle(.insetGrouped) // 统一样式，和顶部保持视觉一致
            .scrollDismissesKeyboard(.interactively) // 滚动时自动收起键盘，提升使用体验
        }
    }
}

关键细节解释 #

• 样式完全统一：给两个List设置一模一样的listStyle（这里用的.insetGrouped，你可以换成你原来用的任何样式），这样两个区域的Section边框、文字排版、内外间距都会和原来的单个List完全一致。
• 布局无缝衔接：把两个List放在spacing: 0的VStack里，消除它们之间的空隙，视觉上就是一个连贯的整体。
• 输入区彻底固定：顶部的小List加上.scrollDisabled(true)确保不会滚动，设置frame(height:)让它只占输入框需要的高度，不会像你之前那样被拉伸占半屏。
• 内容区自由滚动：下方的List保持默认的滚动属性，内容多了自动触发滚动，完全不影响顶部的输入框。

要是你觉得固定高度不够灵活，也可以用GeometryReader动态计算输入区的高度，但对于这种简单的输入框，固定一个合适的高度已经足够好用了。

试试这个方案，绝对能满足你既要样式不变、又要顶部固定下方滚动的需求！

内容来源于stack exchange