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

Posted 2023-02-23

【中文标题】SwiftUI 如何调整不同的屏幕尺寸

【英文标题】：SwiftUI how to adjust different screen sizes

【发布时间】：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 内容的一部分。

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