提问人:eugene_prg 提问时间:12/25/2020 更新时间:8/23/2022 访问量:3214
SwiftUI 中元素之间的间距?
Spacing between elements in SwiftUI?
问:
我想知道为什么这个间距出现在 SwiftUI 中的 2 个元素之间?以及如何控制/修改它? 我尝试向 ExtractedView 添加一些填充物,但它什么也没改变。似乎它以某种方式是由 .frame(height: 56) 引起的,但这正是按钮的高度,因此它不应该导致任何间距。

法典:
import SwiftUI
struct FirstLaunchView: View {
var body: some View {
VStack {
ZStack {
Image("first-launch")
.resizable()
.scaledToFill()
.frame(height: 483)
Text("AppName")
.font(.custom("Lobster", size: 24))
.fontWeight(.bold)
.foregroundColor(.white)
.frame(height: 483, alignment: .top)
.offset(x: 0, y: 61)
}
ZStack {
VStack {
ExtractedView(title: "Start", textColor: Color.secondaryColor, bgColor: Color.primaryColor)
ExtractedView(title: "Log in", textColor: Color.primaryColor, bgColor: Color.secondaryColor)
}
}
Spacer()
}
.ignoresSafeArea()
}
}
struct ExtractedView: View {
var title: String
var textColor: Color
var bgColor: Color
var body: some View {
ZStack {
RoundedRectangle(cornerRadius: 27.5)
.fill(bgColor)
.frame(width: 279, height: 56)
RoundedRectangle(cornerRadius: 27.5)
.strokeBorder(Color.primaryColor, lineWidth: 2)
.frame(width: 279, height: 56)
Text(title)
.font(.custom("NotoSans-Regular", size: 18))
.fontWeight(.bold)
.foregroundColor(textColor)
}
.frame(height: 56)
}
}
答:
7赞
Asperi
12/25/2020
#1
VStack
具有默认间距,因此在
VStack {
ExtractedView(title: "Start", textColor: Color.secondaryColor, bgColor: Color.primaryColor)
ExtractedView(title: "Log in", textColor: Color.primaryColor, bgColor: Color.secondaryColor)
}
您授予 SwiftUI 权限,以决定应在内部视图之间应用哪种默认间距。
如果需要显式间距,可以指定它,例如
VStack(spacing: 25) { // << here !!
// ... views here
}
2赞
amodrono
12/25/2020
#2
SwiftUI 的 VStack 有一个默认的填充,所以如果你不需要任何填充,你需要做的是:
VStack(spacing: 0) {
// your code goes here
}
这也允许您拥有自己的间距,例如
VStack(spacing: 40) { // 40 is the custom spacing
// your code goes here
}
评论