英文:
Space between views in SwiftUI
问题
你可以看到，在我的VStack（蓝色区域）和ZStack视图（灰色区域）之间有一个奇怪的白色空间。我不明白为什么，我想摆脱它。我预期这与间距有关。
我已经尝试过修改spacing参数，比如VStack(spacing: 0)，但是没有起作用。
英文:
As you can see, there is a strange white space between my VStack (the blue area) and ZStack views (the gray area). I don't understand why and I want to get rid of it. I expected that it has something to do with spacing.
the problem on iphone 14 canvas
Here is my code:
import SwiftUI
struct ContentView: View {
var body: some View {
VStack {
TabView(selection: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Selection@*/.constant(1)/*@END_MENU_TOKEN@*/) {
VStack {
VStack(spacing: 0) {
Text("Remaining Budget")
Text("Rp 1.000.000")
.font(.title)
.padding(7)
Text("February 2023")
HStack() {
VStack(alignment: .leading) {
Text("Budget")
Text("Rp 1.500.000")
}
Spacer()
VStack(alignment: .leading) {
Text("Expense")
Text("Rp 1.500.000")
}
}
.padding(.top)
.font(.system(size: 14, weight: .bold))
}
.padding([.top, .leading, .trailing, .bottom])
.background(Rectangle()
.fill(.blue.gradient)
.ignoresSafeArea(edges: [.top, .bottom]))
.foregroundColor(.white)
.font(.custom("Avenir-Heavy", size: 20))
ZStack {
Color(.secondarySystemBackground)
}
}.tabItem {
Label("Home", systemImage: "house.fill")
}.tag(1)
Text("Tab Content 2").tabItem { Label("Category", systemImage: "square.split.2x2.fill")
}.tag(2)
Text("Tab Content 2").tabItem {
Image(systemName: "plus.square")
.scaledToFit()
}.tag(3)
Text("Tab Content 2").tabItem { Label("Charts", systemImage: "chart.bar.fill")
}.tag(4)
Text("Tab Content 2").tabItem { Label("Settings", systemImage: "gearshape.fill")
}.tag(5)
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
I've tried changing the spacing parameter like VStack(spacing: 0) but it won't work.
答案1
得分: 3
VStack默认间距为8。如果不想要任何间距，可以写成VStack(spacing: 0) {}。
英文:
VStacks have a default spacing of 8. You can write VStack(spacing: 0) {} if you don't want any
答案2
得分: 0
空白部分来自第二个VStack的间距。将其设置为spacing: 0。间距会添加到VStack中的元素之后。通过更改第三个VStack，您只影响了蓝色区域内的内容，而不是它之后的内容。
var body: some View {
VStack {
TabView {
VStack(spacing: 0) { // 设置为0。间距是在这里添加的。
VStack(spacing: 0) {
Text("剩余预算")
Text("Rp 1.000.000")
.font(.title)
.padding(7)
英文:
The whitespace is coming from the spacing on the second VStack. Set this to spacing: 0 as well. The spacing is added after elements in the VStack. By changing the 3rd you are only affecting what is in that blue area, not after it.
var body: some View {
VStack {
TabView {
VStack(spacing: 0) { // Set to 0. Here is where the spacing is being added.
VStack(spacing: 0) {
Text("Remaining Budget")
Text("Rp 1.000.000")
.font(.title)
.padding(7)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论