SwiftUI 2.0 如何在矩形上进行叠加

Question

我一直在重建我的旧 UIKit 应用程序并在 Swiftui 2.0 (IOS 14) 中创建。我有 3 个文本标签，下面应该有一个分隔符。该分隔线上方还应该有一个覆盖层，以显示已单击的文本。如果您在下面看到我的 SwiftUI 图像，我唯一的问题是让 Blue Overlay 部分直接出现在 Divider 上方，就像我在 UIKit 中所做的那样。正如您现在从图像中看到的那样，蓝色覆盖在分隔线上方大约 2 或 3 像素。任何建议都会很棒。这是代码

VStack {
  HStack {
            Text("Following")
                .foregroundColor(Color(UIColor(hexString: "5C5C5F")))
                .font(.system(size: 16))
            Spacer()
            Text("Followers")
                .foregroundColor(Color(UIColor(hexString: "5C5C5F")))
                .foregroundColor(Color.gray)
                .font(.system(size: 16))
            Spacer()
            Text("Profile")
                .overlay(
                    Rectangle().frame(width: 80, height: 3).offset(y: 10)
                    , alignment: .bottom)
                .foregroundColor(Color(UIColor(hexString: BlueOcean)))
                .font(.system(size: 16))
            
        }.padding(20)
        Rectangle().frame(height: 3)
            .foregroundColor(Color(UIColor.systemGroupedBackground))

}

这就是它在 SwiftUI 中的样子

这就是它的外观：UIKit

Answer 1

这是一个可能方法的演示 - 想法是对每个选项卡应用下划线并根据需要对齐它们（当然可以调整每个选项卡的样式）

使用 Xcode 12.1 / iOS 14.1 准备

struct DemoTabsView: View {
    var body: some View {
        HStack(alignment: .bottom, spacing: 0) {
            TabItemView { Text("Following") }
            TabItemView { Spacer() }
            TabItemView { Text("Followers") }
            TabItemView { Spacer() }
            TabItemView(selected: true) { Text("Profile") }
        }
    }
}

struct TabItemView<Label: View>: View {
    var selected = false
    let label: () -> Label
    var body: some View {
        VStack(spacing: 20) {
            label()
                .font(.system(size: 16))
                .foregroundColor(selected ? Color.blue : Color.black)
            Rectangle().frame(height: 3)
                .foregroundColor(selected ? Color.blue : Color(UIColor.systemGroupedBackground))
        }.fixedSize(horizontal: false, vertical: true)
    }
}