如何让 SwiftUI 界面可扩展？答案

【问题标题】：How to make SwiftUI interface scalable?如何让 SwiftUI 界面可扩展？
【发布时间】：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。另外，如果我的回答有效，您可以按绿色复选标记接受吗？

标签： ios swift swiftui

【解决方案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()
        }
    }
}

结果：

【讨论】：