SwiftUI 中元素之间的间距?

Spacing between elements in SwiftUI?

提问人:eugene_prg 提问时间:12/25/2020 更新时间:8/23/2022 访问量:3214

问:

我想知道为什么这个间距出现在 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)
    }
}
SwiftUI的

评论


答:

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
}