SwiftUI中TextField自适应内容宽度且不超出屏幕的实现问题

要实现TextField随输入内容自适应宽度，同时不超过屏幕可用宽度，且右侧跟随固定文本，可通过以下方式解决：

步骤1：定义宽度获取的PreferenceKey #

用于准确捕获右侧固定文本的实际渲染宽度，避免硬编码适配误差：

import SwiftUI

struct TextWidthPreferenceKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }
}

步骤2：实现自适应布局的ContentView #

struct ContentView: View {
    @State private var inputText = ""
    @State private var suffixTextWidth: CGFloat = 0
    private let horizontalPadding: CGFloat = 16
    private let textSpacing: CGFloat = 8

    var body: some View {
        HStack(spacing: textSpacing) {
            TextField("Enter Text", text: $inputText)
                .frame(
                    maxWidth: UIScreen.main.bounds.width - horizontalPadding * 2 - suffixTextWidth - textSpacing,
                    alignment: .leading
                )
            
            Text(".package.com")
                .background(
                    GeometryReader { proxy in
                        Color.clear
                            .preference(key: TextWidthPreferenceKey.self, value: proxy.size.width)
                    }
                )
        }
        .padding(.horizontal, horizontalPadding)
        .frame(height: 24)
        .onPreferenceChange(TextWidthPreferenceKey.self) { newValue in
            suffixTextWidth = newValue
        }
    }
}

关键逻辑说明 #

• 动态计算最大宽度：用屏幕总宽度减去内边距、右侧文本宽度和间距，得到TextField的最大可用宽度——内容较短时TextField自动收缩适配，内容长度触达最大值时停止扩展，不会超出屏幕
• 精确获取右侧文本宽度：通过PreferenceKey配合背景中的GeometryReader，捕获文本实际渲染宽度，避免字体、系统缩放等因素导致的宽度偏差
• 布局优先级：HStack中TextField默认优先根据内容调整宽度，设置maxWidth后会自动限制最大扩展范围

可选优化：内容超出时自动换行 #

如果需要TextField内容超过最大宽度时自动换行，添加.lineLimit(nil)修饰符即可：

TextField("Enter Text", text: $inputText)
    .lineLimit(nil)
    .frame(
        maxWidth: UIScreen.main.bounds.width - horizontalPadding * 2 - suffixTextWidth - textSpacing,
        alignment: .leading
    )

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