SwiftUI 如何调整不同的屏幕尺寸答案

【问题标题】：SwiftUI how to adjust different screen sizesSwiftUI 如何调整不同的屏幕尺寸
【发布时间】：2019-11-28 00:15:42
【问题描述】：

我正在使用 SwiftUI 开发人员列表页面，iPhone X 屏幕足够大，但在 iPhone 8 中标题超出了屏幕：

iPhone X：

但在 iPhone 8 或更小的屏幕中，“查找人员”离左侧太近，“全部关注”甚至超出屏幕范围：

我知道在 UIKit 中自动布局会很容易地解决这个问题，但我想知道 SwiftUI 解决这个问题的最佳方法或正确方法是什么，一些答案说使用 Spacer 或 HStack，但它们都没有真正起作用。

var body: some View {
    NavigationView {
        List {
            ForEach(people) {person in
                PersonView(person: person)
            }
        }.navigationBarItems(leading:
            VStack(spacing: 10) {
                HStack(spacing: 100) {
                    Text("Find People").font(.system(size: 30)).bold()
                    Text("Follow All").foregroundColor(Color(ColorUtils.hexStringToUIColor(hex: Constants.THEME.THEME_COLOR)))
                }
                HStack(spacing: 20) {
                     Text("Import from: ")
                     ForEach(socialIcons, id: \.self) {icon in
                         Image(icon).resizable().frame(width: 25, height: 25)
                     }
                }
            }
        )
    }
}

【问题讨论】：

我认为问题在于您有效地指定了一个需要尾随的项目（“全部关注”）文本作为leading 视图的一部分，因为您想要社交项目下一行。如果我删除了各种堆栈和社交图标，并且只有两个文本项，前导和尾随，就可以了
您可能需要重新设计布局。 “找人”应该是.navigationBarTitle，将社交导入和关注全部作为NavigationView 内容的一部分。

标签： ios swift swiftui

【解决方案1】：

您正在放置静态间距，以便发生问题。您可以使用Spacer() 修饰符修复它并提供一些Frame()。

var body: some View {
    NavigationView {
        List {
            ForEach(peoples, id: \.self) {person in
                PersonView(person: person)
            }
        }.navigationBarItems(leading:
            VStack(spacing: 5) { // Change Spacing as you want
                HStack {
                    Text("Find People").font(.system(size: 30)).bold()
                    Spacer()
                    Text("Follow All").foregroundColor(Color(ColorUtils.hexStringToUIColor(hex: Constants.THEME.THEME_COLOR)))
                }
                HStack() {
                    Text("Import from:")
                    Spacer()
                    ForEach(socialIcons, id: \.self) {icon in
                        Image(icon).resizable().frame(width: 25, height: 25)
                            .padding(.horizontal)
                    }
                }
            }.frame(width: UIScreen.main.bounds.width-20, alignment: .center)
        )
    }
}

【讨论】：

【解决方案2】：

不要硬编码间距，而是使用动态工具，例如 Spacer() 和 .padding。请参阅下面修改您的代码作为示例。希望对您有所帮助。

HStack {
    Text("Find People").font(.system(size: 30)).bold()
    Spacer()
    Text("Follow All").foregroundColor(Color(ColorUtils.hexStringToUIColor(hex: Constants.THEME.THEME_COLOR)))
}
HStack {
     Text("Import from: ")
     Spacer()
     ForEach(socialIcons, id: \.self) {icon in
         Image(icon).resizable().frame(width: 25, height: 25)
            .padding(.horizontal)
     }
}

【讨论】：

【解决方案3】：

我为比例尺寸创建了一个有用的视图扩展，它将使用屏幕尺寸的百分比作为参数来计算尺寸，并根据屏幕尺寸返回尺寸

extension View {
      func propotionalFrame(width: CGFloat, height: CGFloat, isSquared: Bool = false, alignment: Alignment = .center) -> some View {
        let finalWidth = UIScreen.main.bounds.width * width
        let finalHeight = isSquared ? finalWidth : UIScreen.main.bounds.height * height
        return frame(width: finalWidth, height: finalHeight)
      }
    }

usage:

Image(systemName: "person.circle.fill")
      .resizable()
      .propotionalFrame(width: 0.3, height: 0.2)

【讨论】：