SwiftUI 如何调整不同的屏幕尺寸 [英] SwiftUI how to adjust different screen sizes

问题描述

我正在使用 SwiftUI 开发人员列表页面，iPhone X 屏幕足够大，但 iPhone 8 中的标题不在屏幕上:

I'm using SwiftUI to develop a people list page, the iPhone X screen is big enough but the titles are out of the screen in iPhone 8:

iPhone X:

然而，在 iPhone 8 或更小的屏幕中，Find People"离左边太近，Follow All"甚至在屏幕外:

However in iPhone 8 or smaller screen the "Find People" is too close to left and "Follow All" is even out of screen:

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

I know in UIKit autolayout will solve this very easy but I wonder what's the best way or proper way for SwiftUI to solve this, some answer saying using like Spacer or HStack, but none of them actually work.

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)
                     }
                }
            }
        )
    }
}

推荐答案

您正在放置静态间距，因此会出现该问题.您可以使用 Spacer() 修饰符修复它并提供一些 Frame().

You are putting static spacing so that issue is occurring. you can fix it using Spacer() Modifier and give some 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)
        )
    }
}

这篇关于SwiftUI 如何调整不同的屏幕尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！