Question

我目前在解决如何消除内容视图（VStack）和标签栏视图之间的间距方面遇到麻烦。我想删除VStack或Tab栏创建的边框，或者将间距设为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)
    }

Answer 1

边框是由填充

引入的

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

在使用.padding(value)的每个位置，值应用于所有边缘。

如果您需要在底部将其删除，例如，可以指定

.padding（[。horizontal，.top]）

或可以为每个边缘设置的其他显式参数，或完全将其删除。

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

1 个答案: