首页 > 解决方案 > SwiftUI 中的 UITextField 溢出屏幕宽度

问题描述

在 SwiftUI 中使用 UITextField 我发现当文本溢出 UITextField 宽度时会出现问题。而不是 UITextField 固定大小并滚动文本,它会增长直到溢出屏幕宽度。

我尝试了一些方法,例如在 AppTextField 中放置 fixedSize(),为 UITextField 设置一个框架,但我没有找到解决此问题的方法。

字符少的文本字段

TextField 超过宽度限制

应用程序屏幕

struct ContentView: View {
    
    @State var text = ""
    
    var body: some View {
        VStack {
            AppTextField(text: $text)
                .frame(height: 48)
                .padding(.horizontal, 16)
                .overlay(
                    RoundedRectangle(cornerRadius: 8)
                        .stroke(lineWidth: 1)
                )
        }
        .padding(.horizontal, 16)
    }
}

应用文本域

import Foundation
import UIKit
import SwiftUI

struct AppTextField: UIViewRepresentable {
    
    @Binding var text: String
    
    init(text: Binding<String>) {
        self._text = text
    }
    
    func makeUIView(context: UIViewRepresentableContext<AppTextField>) -> UITextField {
        let textField = UITextField(frame: .zero)
        textField.delegate = context.coordinator
        
        return textField
    }

    func makeCoordinator() -> AppTextField.Coordinator {
        return Coordinator(text: $text)
    }

    func updateUIView(_ textField: UITextField, context: UIViewRepresentableContext<AppTextField>) {
        textField.text = text
    }
    
    class Coordinator: NSObject, UITextFieldDelegate {

        @Binding var text: String

        init(text: Binding<String>) {
            self._text = text
        }
        
        func textFieldDidChangeSelection(_ textField: UITextField) {
            guard let text = textField.text else {
                return
            }
            
            DispatchQueue.main.async {
                self.text = text
            }
        }
        
    }
}

标签: swiftswiftuiuikituitextfield

解决方案


推荐阅读