如何让 SwiftUI 界面可扩展？

Posted 2023-02-23

【中文标题】如何让 SwiftUI 界面可扩展？

【英文标题】：How to make SwiftUI interface scalable?

【发布时间】：2021-11-21 00:17:24

【问题描述】：

我的 SwiftUI 界面在每个 iPhone 型号上看起来都不同。我想询问使用 SwiftUI 创建可扩展（或至少可适应）界面的最佳实践。

例如：

struct NewStruct: View 
    @State var someState = false
    var body: some View 
        VStack 
            HStack 
                Spacer().frame(width: 25)
                Text("Text1")
                Spacer()
            
            Button(action: 
                someState = !someState
            , label: 
                ZStack 
                    RoundedRectangle(cornerRadius: 15).fill(Color.white).frame(width: 350, height: 60)
                    HStack 
                        HStack 
                            Spacer().frame(maxWidth: 10)
                            Image(systemName: "bolt.fill").resizable().scaledToFit().frame(width: 35, height: 35).cornerRadius(30).padding()
                            Text("Text1").foregroundColor(Color.black)
                            Spacer()
                            Spacer(minLength: 30)
                            Image(systemName: "poweroff").resizable().frame(width: 25, height: 25)
                            Image(systemName: "power").resizable().frame(width: 25, height: 25)
                            Spacer().frame(maxWidth: 30)
                        
                    
                
            )
        
    

How it should look like (iPhone 12)	Buggy view(iPhone 12 Pro Max)

【问题讨论】：

只是不要硬编码布局。

谢谢，你能提供一些技巧来避免这种情况吗？将不胜感激！

@SmilingKnight 只是不要使用固定框架，然后 SwiftUI 会自动缩放你的界面。也不要使用 GeometryReader。另外，如果我的回答有效，您可以按绿色复选标记接受吗？

【参考方案1】：

问题就在这里——设置350 的固定框架并不能很好地扩展到其他屏幕尺寸：

RoundedRectangle(cornerRadius: 15).fill(Color.white).frame(width: 350, height: 60)

另外，使用.background 代替ZStack — ZStack 通常用于更大的视图。您可以做的另一件事是使用.padding 而不是Spacer().frame(width: 25) — 垫片旨在扩展以填充尽可能多的空间，因此将其框架限制为25 并没有真正的意义。

struct NewStruct: View 
    @State var someState = false
    var body: some View 
        VStack 
            HStack 
                Text("Text1")
                Spacer()
            
            .padding(.horizontal, 25)
            
            Button(action: 
                someState = !someState
            , label: 
                    HStack 
                        HStack 
                            Image(systemName: "bolt.fill").resizable().scaledToFit().frame(width: 35, height: 35).cornerRadius(30).padding()
                            Text("Text1").foregroundColor(Color.black)
                            Spacer()
                            Image(systemName: "poweroff").resizable().frame(width: 25, height: 25)
                            Image(systemName: "power").resizable().frame(width: 25, height: 25)
                        
                        .padding(.horizontal, 10)
                    
                    .background( /// here!
                        RoundedRectangle(cornerRadius: 15).fill(Color.white)
                    )
            )
        
    


struct ContentView: View 
    var body: some View 
   
        /// ZStacks are made for bigger views, like a red color that fills the screen.
        ZStack 
            Color.red
            NewStruct()
        
    

结果：