SwiftUI中如何为带cornerRadius的Rectangle实现指定样式底部边框？

问题分析 #

你当前的代码通过mask裁剪了整个渐变矩形，导致只显示下半部分，但没有实现设计图中窄的底部渐变边框+底部圆角的效果。需要调整思路，直接绘制符合要求的底部边框元素。

解决方案 #

以下是两种可靠的实现方式：

方式一：直接绘制底部渐变圆角条

这种方式最直观，单独创建一个底部的渐变条，设置其底部圆角并与文本框对齐：

ZStack {
    // 这里可以放置你的文本框内容（示例）
    TextField("请输入内容", text: .constant(""))
        .padding()
        .frame(height: 50)
        .background(Color.white)
        .cornerRadius(6)
    
    // 底部渐变边框
    LinearGradient(
        colors: [
            Color("#B37CFA").opacity(0.5),
            Color("#2A5389").opacity(0.5),
            Color("#2DB854").opacity(0.5)
        ],
        startPoint: .leading,
        endPoint: .trailing
    )
    .frame(height: 4) // 边框高度，可按需调整
    .cornerRadius(6, corners: [.bottomLeft, .bottomRight])
    .frame(maxWidth: .infinity)
    .padding(.horizontal, 20) // 与文本框的水平内边距保持一致
}
.padding()

方式二：用stroke+trim裁剪边框

通过stroke绘制完整圆角矩形边框，再用trim只保留底部的部分：

ZStack {
    // 文本框背景
    RoundedRectangle(cornerRadius: 6)
        .fill(Color.white)
        .frame(height: 50)
    
    // 底部渐变边框
    RoundedRectangle(cornerRadius: 6)
        .stroke(
            LinearGradient(
                colors: [
                    Color("#B37CFA").opacity(0.5),
                    Color("#2A5389").opacity(0.5),
                    Color("#2DB854").opacity(0.5)
                ],
                startPoint: .leading,
                endPoint: .trailing
            ),
            lineWidth: 4 // 边框宽度
        )
        .trim(from: 0.45, to: 0.55) // 裁剪仅显示底部边框，数值可微调
        .frame(height: 50)
}
.padding(.horizontal, 20)

关键说明 #

• 方式一的优势是可控性强，边框高度、圆角大小可以精准调整，适配各种布局场景；
• 方式二更适合需要边框与文本框圆角完全对齐的场景，trim的数值需要根据边框宽度微调，确保只显示底部的边；
• 注意Color("#xxxxxx")需要确保你的项目支持十六进制颜色，若未支持，可替换为系统颜色或自定义颜色初始化方法。

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