文本字段背景图像 Aspect fit 限制了 swiftUI 中 iPad 的宽度

Posted 2023-02-24

【中文标题】文本字段背景图像 Aspect fit 限制了 swiftUI 中 iPad 的宽度

【英文标题】：Textfield background image Aspect fit is restricting the width in iPad in swiftUI

【发布时间】：2021-09-13 16:51:57

【问题描述】：

在 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)
       
    

【问题讨论】：

你能给我们看一张你在 iPad 上看到的截图吗？

【参考方案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

【参考方案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)

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