如何在 SwiftUI 中删除主要内容视图和标签栏之间的间距?

Posted

技术标签:

【中文标题】如何在 SwiftUI 中删除主要内容视图和标签栏之间的间距?【英文标题】:How can I remove the spacing between the main content view and the tab bar in SwiftUI? 【发布时间】:2020-02-09 01:10:41 【问题描述】:

我目前无法确定如何消除内容视图 (VStack) 和标签栏视图之间的间距。有一个由 VStack 或 Tab Bar 创建的边框,我想删除它或者将间距设置为 0 以创建更流畅的外观

目前,它看起来像这样: https://i.stack.imgur.com/xbGiS.png

我的代码:

            ScrollView(.horizontal, showsIndicators: false) 
                HStack(spacing: 10) 
                    Button(action: 
                        print("Tapped!")
                    ) 
                        HStack(spacing: 10) 
                            Image(systemName: "clock.fill")
                                .foregroundColor(.white)
                            Text("Bus Times")
                        
                        .padding(7.5)
                        .foregroundColor(.white)
                        .background(Color.init(red: 235/255, green: 100/255, blue: 30/255))
                        .cornerRadius(40)
                    

                    Button(action: 
                        print("Tapped!")
                    ) 
                        HStack 
                            Image(systemName: "waveform.path.ecg")
                            Text("Services")
                        
                        .padding(7.5)
                        .foregroundColor(.white)
                        .background(Color.init(red: 235/255, green: 100/255, blue: 30/255))
                        .cornerRadius(40)
                    

                    Button(action: 
                        print("Tapped!")
                    ) 
                        HStack 
                            Image(systemName: "location.north.fill")
                            Text("Find me")
                        
                        .padding(7.5)
                        .foregroundColor(.white)
                        .background(Color.init(red: 235/255, green: 100/255, blue: 30/255))
                        .cornerRadius(40)
                    

                    Button(action: 
                        print("Tapped!")
                    ) 
                        HStack 
                            Image(systemName: "magnifyingglass")
                            Text("Search")
                        
                        .padding(7.5)
                        .foregroundColor(.white)
                        .background(Color.init(red: 235/255, green: 100/255, blue: 30/255))
                        .cornerRadius(40)
                    

                
            
            Text("Latest news & events").font(.headline).bold()
            PostRow(categoryName: "news", posts: postData)
        
        .padding()
        .navigationBarTitle("Royal Holloway")
        .font(.subheadline)
    

【问题讨论】:

【参考方案1】:

边框由内边距引入

    
    .padding() // << this one
    .navigationBarTitle("Royal Holloway")
    .font(.subheadline)

在您使用.padding(value) 的每个地方, 应用于所有边。

如果需要在底部去掉可以指定,例如

.padding([.horizo​​ntal, .top])

或其他显式参数,可以为每条边设置或完全删除它。

【讨论】:

以上是关于如何在 SwiftUI 中删除主要内容视图和标签栏之间的间距?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 SwiftUI 显示全栈模式?

如何在 SwiftUI 的标签栏的特定视图中隐藏导航栏?

如何计算 SwiftUI 中的标签栏高度?

带有 SwiftUI 的标签栏上方的额外导航视图

删除阴影 SwiftUI 旁边的空格

如何全屏显示 SwiftUI 子视图?