SwiftUI, удалите пространство между представлениями в VStack?

#swiftui #swiftui-list

Вопрос:

Почему между тремя синими прямоугольниками и списком так много места? Как я могу удалить пространство, чтобы все представления в стеке VStack были вверху? Я попытался использовать a Spacer() сразу после списка, но ничего не изменилось.

 struct ContentView: View {
    
    init() { UITableView.appearance().backgroundColor = UIColor.clear }
    
    var body: some View {
        NavigationView {
            ZStack {
                Color.red
                    .ignoresSafeArea()
                VStack {
                    HStack {
                        Text("Faux Title")
                            .font(.system(.largeTitle, design: .rounded))
                            .fontWeight(.heavy)
                        Spacer()
                        Button(action: {
                            // settings
                        }, label: {
                            Image(systemName: "gearshape.fill")
                                .font(.system(.title2))
                        })
                    }
                    .padding()
                    
                    GeometryReader { geometry in
                        HStack() {
                            Text("1")
                                .frame(width: geometry.size.width * 0.30, height: 150)
                                .background(Color.blue)
                            Spacer()
                            Text("2")
                                .frame(width: geometry.size.width * 0.30, height: 150)
                                .background(Color.blue)
                            Spacer()
                            Text("3")
                                .frame(width: geometry.size.width * 0.30, height: 150)
                                .background(Color.blue)
                        }
                    }
                    .padding()
                    
                    List {
                        Text("One")
                        Text("Two")
                        Text("Three")
                        Text("Four")
                        Text("Five")
                        Text("Six")
                    }
                    .listStyle(InsetGroupedListStyle())
                }
            }
            .navigationBarHidden(true)
        }
    }
}

Бонусный вопрос: В веб-разработке вы можете открыть веб-инспектор вашего браузера и с помощью селектора элементов щелкнуть по элементам, которые выделяют их границы. Полезно для чего-то подобного, когда вы пытаетесь выяснить, к какому элементу относится нарушающий интервал. Есть ли что-то подобное в Xcode?

Ответ №1:

 VStack(spacing: 0) {...} 
Spacer()

на ваш вопрос вы можете в Xcode использовать инспектор просмотра. https://developer.apple.com/library/archive/documentation/ToolsLanguages/Conceptual/Xcode_Overview/ExaminingtheViewHierarchy.html

Ответ №2:

Поскольку вы знаете , что ваш HStack с синими прямоугольниками будет высотой 150 , вы должны ограничить его этим, используя .frame(height: 150) :

 GeometryReader { geometry in
    ...
}
.padding()
.frame(height: 150) //Here

В противном случае GeometryReader он будет занимать все доступное вертикальное пространство.

Re: ваше сравнение веб-разработчиков, ознакомьтесь с инспектором иерархии представлений Xcode. Это не совсем то же самое, но в том же духе: https://developer.apple.com/library/archive/documentation/ToolsLanguages/Conceptual/Xcode_Overview/ExaminingtheViewHierarchy.html