SwiftUI中如何实现下边框与其余边粗细不同的TextField

完全可以实现你需要的「其余三边细描边、底部粗描边」的TextField效果，SwiftUI没有提供直接设置单边不同线宽边框的原生API，通过自定义背景层绘制路径的方式即可零依赖实现，具体方案如下：

实现核心逻辑 #

• 移除TextField默认的原生边框样式
• 在TextField的背景层插入自定义绘制的路径，对顶部、左侧、右侧三边使用细线宽描边，对底部边单独使用粗线宽描边
• 匹配TextField的内容内边距，避免边框和输入文字错位

可复用组件代码 #

import SwiftUI

struct ThickBottomBorderTextField: View {
    let placeholder: String
    @Binding var inputText: String
    // 支持自定义样式参数
    var thinStrokeWidth: CGFloat = 1
    var bottomStrokeWidth: CGFloat = 3
    var borderColor: Color = .secondary
    
    var body: some View {
        TextField(placeholder, text: $inputText)
            .padding(.vertical, 12)
            .padding(.horizontal, 10)
            .background(
                GeometryReader { proxy in
                    ZStack {
                        // 绘制上、左、右三边细边框
                        Path { path in
                            let viewWidth = proxy.size.width
                            let viewHeight = proxy.size.height
                            // 顶边
                            path.move(to: .zero)
                            path.addLine(to: CGPoint(x: viewWidth, y: 0))
                            // 右边
                            path.move(to: CGPoint(x: viewWidth, y: 0))
                            path.addLine(to: CGPoint(x: viewWidth, y: viewHeight))
                            // 左边
                            path.move(to: .zero)
                            path.addLine(to: CGPoint(x: 0, y: viewHeight))
                        }
                        .stroke(borderColor, lineWidth: thinStrokeWidth)
                        
                        // 单独绘制底部粗边框
                        Path { path in
                            let viewWidth = proxy.size.width
                            let viewHeight = proxy.size.height
                            path.move(to: CGPoint(x: 0, y: viewHeight))
                            path.addLine(to: CGPoint(x: viewWidth, y: viewHeight))
                        }
                        .stroke(borderColor, lineWidth: bottomStrokeWidth)
                    }
                }
            )
    }
}

使用方式 #

在业务页面中直接调用即可，可根据需求修改线宽、颜色参数：

struct DemoPage: View {
    @State private var content = ""
    var body: some View {
        ThickBottomBorderTextField(
            placeholder: "请输入内容",
            inputText: $content,
            thinStrokeWidth: 1,
            bottomStrokeWidth: 3,
            borderColor: .gray
        )
        .padding(.horizontal, 24)
    }
}

扩展优化提示 #

• 如果需要带圆角的边框，只需要将直线路径替换为圆角矩形路径，单独提取底边路径做粗描边即可
• 如果需要实现输入聚焦时边框高亮效果，新增@FocusState焦点绑定，根据焦点状态动态修改borderColor的取值即可

内容的提问来源于stack exchange，提问作者Wesley_01722