嵌入在 VStack 中的 HStack 中的奇怪间距行为

Question

我有一个 HStack 来布置一个 TextField 和一个 Button 并排在一起。我将它嵌入到VStack 中以显示下面的一行。我注意到这种情况下的垂直间距与标准的VStack 布局不同。请参阅以下屏幕截图中的详细信息。有人可以帮我理解这种行为以及我应该如何解决它？

编辑：下面的代码

import SwiftUI

struct ContentView: View {
    @State private var username: String = ""
    @State private var password: String = ""

    var body: some View {
        VStack(spacing: 8) {
        
            VStack {
                TextField("Username", text: $username)
                    .background(Color.red.opacity(0.5))
                Rectangle()
                    .fill(Color.blue)
                    .frame(height: 1)
            }
            .background(Color.blue.opacity(0.5))
    
            VStack {
                HStack {
                    SecureField("Password", text: $password)
                        .background(Color.blue.opacity(0.5))
                    Button(action: { }, label: { Image(systemName: "eye")     })
                }
                .background(Color.red.opacity(0.5))
                Rectangle()
                    .fill(Color.blue)
                    .frame(height: 1)
            }
        }
        .padding()
    }
}

Answer 1

看起来 VStack 中的默认间距可能会因内部视图而异。

如果您有 TextField 和 Rectangle，它的行为会有所不同；如果它是 HStack 和 Rectangle，则行为会有所不同。

我建议你添加一个明确的间距：

struct ContentView: View {
    @State private var username: String = ""
    @State private var password: String = ""

    var body: some View {
        VStack(spacing: 8) {
            VStack(spacing: 3) { // add here
                TextField("Username", text: $username)
                    .background(Color.red.opacity(0.5))
                Rectangle()
                    .fill(Color.blue)
                    .frame(height: 1)
            }
            .background(Color.blue.opacity(0.5))

            VStack(spacing: 3) { // add here
                HStack {
                    SecureField("Password", text: $password)
                        .background(Color.blue.opacity(0.5))
                    Button(action: {}, label: { Image(systemName: "eye") })
                }
                .background(Color.red.opacity(0.5))
                Rectangle()
                    .fill(Color.blue)
                    .frame(height: 1)
            }
        }
        .padding()
    }
}

Answer 2

我认为问题在于您的编码方式，这里是一种工作方式：

---

import SwiftUI

struct ContentView: View {
    @State private var username: String = ""
    @State private var password: String = ""

    var body: some View {

        VStack(spacing: 8) {
        
            VStack {
                
                TextField("Username", text: $username)
                    .background(Color.red.opacity(0.5))

                Rectangle()
                    .fill(Color.blue)
                    .frame(height: 1)

            }
            .background(Color.blue.opacity(0.5))
            
            VStack {

                SecureField("Password", text: $password)
                    .background(Color.blue.opacity(0.5))
                    .overlay(Button(action: { }, label: { Image(systemName: "eye") }), alignment: .trailing)
 
                
                Rectangle()
                    .fill(Color.blue)
                    .frame(height: 1)
                
            }
            .background(Color.red.opacity(0.5))
        }
        .padding()
    }
}

---

更新：

 struct ContentView: View {
    
    @State private var username: String = ""
    @State private var password: String = ""

    var body: some View {

        VStack(spacing: 8) {
        
            VStack {
                
                TextField("Username", text: $username)
                    .background(Color.red.opacity(0.5))
                    .frame(height: 20)

                Rectangle()
                    .fill(Color.blue)
                    .frame(height: 1)

            }
            .background(Color.blue.opacity(0.5))
            
            VStack {
                
                HStack {
                    
                    SecureField("Password", text: $password)
                        .background(Color.blue.opacity(0.5))

                    Button(action: { }, label: { Image(systemName: "eye").resizable().scaledToFit().frame(height: 20) })
  
                }

                Rectangle()
                    .fill(Color.blue)
                    .frame(height: 1)
                
            }
            .background(Color.red.opacity(0.5))
        }
        .padding()
    }
}