如何为SwiftUI可滚动TextField设置contentInset？复刻Telegram输入框

要实现Telegram风格的消息输入框，核心是避免直接给TextField添加padding导致滚动区域与背景的冲突，正确做法是将TextField包裹在容器中，把padding、背景和圆角应用到容器上，让TextField填充整个容器空间：

修改后的代码 #

if #available(iOS 16.0, *) {     
    // 用容器包裹TextField，将样式属性转移到容器上
    HStack(spacing: 0) {
        TextField(
            "MainInputView.Message.TextView", 
            text: $messageInputViewModel.message,                    
            prompt: Text("MainInputView.Message.TextView", comment: "Message input placeholder"), 
            axis: .vertical
        )                  
        .lineLimit(10)
        // 让TextField填充容器的全部可用空间，文本默认左对齐
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
    }
    .padding(.vertical, 8)
    .padding(.horizontal, 15)
    .background(Color.systemBackground)                
    .clipShape(RoundedRectangle(cornerSize: .init(width: 20, height: 20)))
}

原理说明 #

直接给TextField添加padding时，TextField的内部滚动区域会被padding约束在更小范围内，当内容超出高度开始滚动时，会露出TextField原生的背景边界（与外层background产生视觉差），看起来像是内部边框。

将样式属性（padding、背景、圆角）转移到外层容器后，TextField会填充容器的整个空间，滚动时内容自然延伸到容器的padding区域，完全匹配Telegram的UI效果。

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