SwiftUI中无需使用ZStack，能否在文本输入框内添加图片？

我尝试在SwiftUI的文本输入框右侧添加校验状态图标（预期图标显示在输入框内部右侧），但使用ZStack实现时整个视图出现异常。想知道有没有无需使用Stack的实现方式，或者应该如何基于现有Stack代码调整？

原代码：

HStack {
    ZStack {
        CustomTextField(placeholder: "Email", text: $email, textColor: .black, isValid: emailValid)
            .focused($isEmailFocused)
        
        if let isValid = emailValid {
            Image(isValid ? "check_solid" : "cancel_solid")
                .resizable()
                .frame(width: 25, height: 25)
                .foregroundColor(isValid ? Color("greenstrokes") : Color("redstrokes"))
                .position(x: UIScreen.main.bounds.width - 100, y: 75)
        }
    }
}

方案一：优化现有ZStack写法 #

原代码的核心问题是用了硬编码的position（依赖屏幕宽度），导致布局在不同设备上适配异常，而且没有给输入框预留图标空间，可能导致文字被遮挡。调整方式如下：

HStack {
    ZStack(alignment: .trailing) {
        CustomTextField(placeholder: "Email", text: $email, textColor: .black, isValid: emailValid)
            .focused($isEmailFocused)
            .padding(.trailing, 35) // 给右侧图标预留空间，避免文字被遮挡
        
        if let isValid = emailValid {
            Image(isValid ? "check_solid" : "cancel_solid")
                .resizable()
                .frame(width: 25, height: 25)
                .foregroundColor(isValid ? Color("greenstrokes") : Color("redstrokes"))
                .padding(.trailing, 15) // 调整图标与输入框边缘的间距
        }
    }
}

• 用ZStack(alignment: .trailing)让图标自动对齐输入框右侧
• 给输入框添加右侧padding，确保文字不会被图标覆盖
• 去掉硬编码的position，改用padding控制图标位置，适配所有设备

方案二：无需额外Stack的实现方式 #

如果想彻底避免使用外部ZStack，可以利用SwiftUI的.suffix修饰符（适用于基于系统TextField封装的CustomTextField），或者修改CustomTextField的内部布局：

方式1：使用suffix修饰符

HStack {
    CustomTextField(placeholder: "Email", text: $email, textColor: .black, isValid: emailValid)
        .focused($isEmailFocused)
        .suffix {
            if let isValid = emailValid {
                Image(isValid ? "check_solid" : "cancel_solid")
                    .resizable()
                    .frame(width: 25, height: 25)
                    .foregroundColor(isValid ? Color("greenstrokes") : Color("redstrokes"))
                    .padding(.leading, 8)
            }
        }
}

.suffix会自动将图标附加在输入框的右侧，无需额外的Stack容器。

方式2：修改CustomTextField内部布局

如果CustomTextField是你自己封装的组件，可以直接在其内部用HStack整合输入框和图标逻辑，外部调用时就不需要额外的布局容器了：

struct CustomTextField: View {
    let placeholder: String
    @Binding var text: String
    let textColor: Color
    let isValid: Bool?
    
    var body: some View {
        HStack {
            TextField(placeholder, text: $text)
                .foregroundColor(textColor)
            
            if let isValid = isValid {
                Image(isValid ? "check_solid" : "cancel_solid")
                    .resizable()
                    .frame(width: 25, height: 25)
                    .foregroundColor(isValid ? Color("greenstrokes") : Color("redstrokes"))
            }
        }
    }
}

这样外部调用时直接使用CustomTextField即可，不需要额外的HStack或ZStack。

总结 #

优先推荐方案一，快速修复现有代码的布局问题；如果想简化外部布局逻辑，可以选择方案二的两种方式，彻底避免使用额外的Stack容器。

内容的提问来源于stack exchange，提问作者ahmed ayman eljebari