swift - 文本字段背景图像 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)
            
        }
    }
}

结果：

苹果手机	iPad

Answer 2

您确定 TextField 的宽度没有增加吗？我在 Xcode 中复制并粘贴了代码，但框架工作得很好，并且随着屏幕尺寸的增加/减少。

问题出在图像中。您在 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)

根据您的喜好更改颜色和人物图像。我还推荐了解GeometryReaderand UIScreen.main.bounds，它们在设计最佳用户界面方面非常出色。