ios - SwiftUI - Canvas 超出屏幕宽度 - 应用被拒绝

Question

由于登录屏幕超出 iPad 显示屏边界的问题，我的应用在提交到应用商店时被拒绝了两次。我已尝试重现该问题，但无法在模拟器或实体 iPad 上重现

Apple 向我发送了以下回复

From Apple
4. Design: Preamble
Guideline 4.0 - Design

We noticed that the login screen of your app was still crowded or laid out in a way that made it difficult to use your app.
We launched the app on iPad (6th generation) running iOS 13.1.3 on Wifi.

Next Steps
To resolve this issue, please revise your app to ensure that the content and controls on the screen are easy to read and interact with.

Resources
For more information, please review the following resources on the iOS Developer Center page:

   - UI Do's and Don'ts
   - iOS Human Interface Guidelines
   - UIKit

Please see attached screenshot for details.

我无法复制这个。这是我的代码:

登录.swift

import SwiftUI

struct Login: View {

    @EnvironmentObject var session: SessionStore
    @ObservedObject private var kGuardian = KeyboardGuardian(textFieldCount: KeyboardGuardian.KeyboardSlots.count.rawValue)

    @State var email: String = ""
    @State var password: String = ""
    @State var loading = false
    @State var error = false


    func getUser () {
        session.listen()
    }

    func signIn () {
        loading = true
        error = false
        session.signIn(email: email, password: password) { (result, error) in
            self.loading = false
            if error != nil {
                self.error = true
            } else {
                self.email = ""
                self.password = ""
            }
        }
    }

    var body: some View {
        VStack {
            Image("Cloud Pager")
                .resizable()
                .foregroundColor(.white)
                .aspectRatio(contentMode: ContentMode.fill)
                .padding()

            Text("Cloud Pager")
                .font(.largeTitle)
                .foregroundColor(.white)
                .bold()
                .padding(Edge.Set.bottom, 30)

            Spacer()

            ZStack(alignment: .leading) {
                Text("Email")
                    .foregroundColor(email.isEmpty ? .white : .black)
                    .fontWeight(email.isEmpty ? .regular : .bold)
                    .padding(.leading, 10)
                    .offset(y: email.isEmpty ? 0 : -30)

                TextField("", text:$email)
                    .background(Color.clear)
                    .foregroundColor(.white)
                    .textContentType(.emailAddress)
                    .keyboardType(.emailAddress)
                    .padding(.leading, 10)
                    .padding(.trailing, 10)
            }
            Rectangle()
                .frame(height: 3.0, alignment: .bottom)
                .foregroundColor(Color.white)
                .padding(.bottom, 40)
                .padding(.leading, 10)
                .padding(.trailing, 10)

            ZStack(alignment: .leading) {
                Text("Password")
                    .foregroundColor(password.isEmpty ? .white : .black)
                    .fontWeight(password.isEmpty ? .regular : .bold)
                    .padding(.leading, 10)
                    .offset(y: password.isEmpty ? 0 : -30)
                SecureField("", text:$password)
                    .background(Color.clear)
                    .foregroundColor(.white)
                    .textContentType(.password)
                    .padding(.leading, 10)
                    .padding(.trailing, 10)
            }
            Rectangle()
                .frame(height: 3.0, alignment: .bottom)
                .foregroundColor(Color.white)
                .padding(.bottom, 50)
                .padding(.leading, 10)
                .padding(.trailing, 10)

            VStack {
                Button(action: signIn) {
                    HStack(alignment: .center) {
                        Spacer()
                        if loading {
                            ActivityIndicator()
                        } else {
                            Text("Sign In")
                                .foregroundColor(.blue)
                                .bold()
                        }
                        Spacer()
                    }
                }.padding().background(Color.white).cornerRadius(30.0)
            }
            .padding(Edge.Set.bottom, 8)
        }
        .padding()
        .background(Color.blue.edgesIgnoringSafeArea(.all))
        .statusBar(hidden: true)
        .onAppear(perform: getUser)
        .offset(y: kGuardian.slide).animation(.easeInOut(duration: 0.5))
    }
}

struct ActivityIndicator: UIViewRepresentable {

    func makeUIView(context: Context) -> UIActivityIndicatorView {
        let v = UIActivityIndicatorView()

        return v
    }

    func updateUIView(_ activityIndicator: UIActivityIndicatorView, context: Context) {
        activityIndicator.startAnimating()
    }
}

struct Login_Previews: PreviewProvider {
    static var previews: some View {
        Login()
            .environmentObject(SessionStore())
    }
}

在我运行该应用程序的每个 iPad 模拟器(和物理第 6 代 iPad)上，我无法复制上面的屏幕截图。我的总是这样:

谁能弄清楚这里发生了什么。我的应用程序设置仅在 iPhone 和 iPad 设备上设置为纵向

信息.plist

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>CFBundleDevelopmentRegion</key>
    <string>$(DEVELOPMENT_LANGUAGE)</string>
    <key>CFBundleExecutable</key>
    <string>$(EXECUTABLE_NAME)</string>
    <key>CFBundleIdentifier</key>
    <string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
    <key>CFBundleInfoDictionaryVersion</key>
    <string>6.0</string>
    <key>CFBundleName</key>
    <string>$(PRODUCT_NAME)</string>
    <key>CFBundlePackageType</key>
    <string>$(PRODUCT_BUNDLE_PACKAGE_TYPE)</string>
    <key>CFBundleShortVersionString</key>
    <string>$(MARKETING_VERSION)</string>
    <key>CFBundleVersion</key>
    <string>1</string>
    <key>LSRequiresIPhoneOS</key>
    <true/>
    <key>UIApplicationSceneManifest</key>
    <dict>
        <key>UIApplicationSupportsMultipleScenes</key>
        <false/>
        <key>UISceneConfigurations</key>
        <dict>
            <key>UIWindowSceneSessionRoleApplication</key>
            <array>
                <dict>
                    <key>UISceneConfigurationName</key>
                    <string>Default Configuration</string>
                    <key>UISceneDelegateClassName</key>
                    <string>$(PRODUCT_MODULE_NAME).SceneDelegate</string>
                </dict>
            </array>
        </dict>
    </dict>
    <key>UIBackgroundModes</key>
    <array>
        <string>remote-notification</string>
    </array>
    <key>UILaunchStoryboardName</key>
    <string>LaunchScreen</string>
    <key>UIRequiredDeviceCapabilities</key>
    <array>
        <string>armv7</string>
    </array>
    <key>UIRequiresFullScreen</key>
    <true/>
    <key>UISupportedInterfaceOrientations</key>
    <array>
        <string>UIInterfaceOrientationPortrait</string>
    </array>
    <key>UISupportedInterfaceOrientations~ipad</key>
    <array>
        <string>UIInterfaceOrientationPortrait</string>
        <string>UIInterfaceOrientationPortraitUpsideDown</string>
    </array>
</dict>
</plist>

Answer 1

问题出在图像配置上。您应该为其添加以下修饰符:

.scaledToFit()

或只是将内容模式更改为适合

.aspectRatio(contentMode: .fit)

之前 -> 之后

请注意，所有内容 都不能调整大小，最好将其中一些设置为固定大小。

建议:

对于这样的页面，将所有内容放入一个容器中并为其指定 maxWidth 和 maxHeight。您不希望您的设计可以缩放以填充整个 100 英寸电视，使用第二个屏幕选项显示您的应用程序，是吗？

注意 2:您使用的图像非常接近来自 Apple 的受版权保护图标，也许下次 apple 拒绝您的应用程序是因为那。保重。