Question

我正在使用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)
                     }
                }
            }
        )
    }
}

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

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

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

2 个答案: