Textfield 背景图像 Aspect fit 在 swiftUI 中限制 iPad 的宽度

Question

在 iPhone 中的设计看起来不错。但在 iPad 中，TextField 宽度没有增加。如果我更改内容模式以填充两个字段重叠。我该如何解决这个问题？

    var body: some View {
       
        VStack (alignment: .center,spacing :35){
            
            TextField("Enter Username", text: $username).frame(minWidth: 0 , maxWidth: .infinity).frame(height: 55).background(Image("userinput").resizable().aspectRatio(contentMode: .fit)).multilineTextAlignment(.center).padding([.leading,.trailing],15)
                            
            TextField("Enter Password", text: $username).frame(minWidth: 0 , maxWidth: .infinity).frame(height: 55).background(Image("pswrd").resizable().aspectRatio(contentMode: .fit)).multilineTextAlignment(.center).padding([.leading,.trailing],15)
                
            Button("SIGN IN") {
               action = true
                print("Just tapped")
            }.frame(minWidth: 0 , maxWidth: .infinity).frame(height: 55).background(Color(red: 46/255, green: 152/255, blue: 182/255)).foregroundColor(.white).cornerRadius(5).padding([.leading,.trailing],50)
       
    }
}

Answer 1

文本字段的宽度肯定在增加（尝试添加 .border(Color.gray) 进行测试）。但是，我假设您的 userinput 或 pswrd 图片看起来像这样？

这是不好的做法。你不想让你的图像包含动态的东西，比如文本字段的边框，因为图像是固定的，不能拉伸。

相反，让您的图像只包含图像，然后使用 HStack 将其放在左侧。

struct ContentView: View {
    @State var username = ""
    @State var password = ""
    
    var body: some View {
        VStack(alignment: .center, spacing: 35) {
            
            HStack {
                Image("userinput")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                
                TextField("Enter Username", text: $username)
                    .multilineTextAlignment(.center)
            }
            .frame(height: 55)
            .border(Color.gray)
            .padding([.leading, .trailing], 15)
            
            HStack {
                Image("pswrd")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                
                TextField("Enter Password", text: $password)
                    .multilineTextAlignment(.center)
            }
            .frame(height: 55)
            .border(Color.gray)
            .padding([.leading, .trailing], 15)
            
            Button("SIGN IN") {
                print("Just tapped")
            }
            .frame(maxWidth: .infinity)
            .frame(height: 55)
            .background(Color(red: 46/255, green: 152/255, blue: 182/255))
            .foregroundColor(.white)
            .cornerRadius(5)
            .padding([.leading, .trailing], 50)
            
        }
    }
}

结果：

iPhone	iPad

Answer 2

您确定 TextField 的宽度没有增加吗？我复制并粘贴了 Xcode 中的代码，但框架工作正常，屏幕尺寸为 increasing/decreasing。

问题应该出在图片上。您在 textField 的顶部插入了一个具有固定属性的图像。我建议手动应用它并检查您的图像。

https://thehappyprogrammer.com/custom-textfield-in-swiftui/

此网站可以帮助您创建文本字段。

如果你想要文本框旁边的图片，你可以将它插入到 Hstack 中以获得更好的优化。例如

        HStack {
            Image(systemName: "person.fill").frame(width: 55, height: 55).background(Color(.systemGray5)).foregroundColor(.blue)
            TextField("Enter Username", text: $username).frame(minWidth: 0 , maxWidth: UIScreen.main.bounds.width/2).frame(height: 55)
        }.border(Color.gray)

根据自己的喜好更改颜色和人像。我还建议了解 GeometryReader 和 UIScreen.main.bounds，它们非常擅长设计最佳用户界面。

Textfield 背景图像 Aspect fit 在 swiftUI 中限制 iPad 的宽度

Textfield background image Aspect fit is restricting the width in iPad in swiftUI

textfield

aspect-fit

swift

swiftui