[SwiftUI]自定义下划线

系统有一个下划线修饰，但最低只支持到iOS16。

extension View {
  
    @available(iOS 16.0, macOS 13.0, tvOS 16.0, watchOS 9.0, *)
    public func underline(_ isActive: Bool = true, pattern: Text.LineStyle.Pattern = .solid, color: Color? = nil) -> some View

}

下面自定义一个下划线，以便在iOS14上使用。

import SwiftUI

struct UnderlineModifier: ViewModifier {
    /// 下划线颜色
    var color: Color
    /// 下划线高度
    var height: CGFloat
    /// 下划线底部偏移
    var offset: CGFloat
    func body(content: Content) -> some View {
        content
            .overlay(
                GeometryReader { geometry in
                    Rectangle()
                        .frame(height: height)
                        .foregroundColor(color)
                        .offset(y: geometry.size.height - height - offset) // 根据文本高度调整下划线的位置
                }
            )
    }
}

extension View {
    func underline(color: Color, height: CGFloat = 1, offset: CGFloat = 0) -> some View {
        self.modifier(UnderlineModifier(color: color, height: height, offset: offset))
    }
}

使用：

Text("Terms of use")
	.frame(height: 25)
	.foregroundColor(Color(hexString: "#C5C5C5"))
	.underline(color: Color(hexString: "#C5C5C5", alpha: 0.7)!, height: 0.5, offset: 7)

示意图：