Swiftui Tooltip View Compount ⇐ IOS

[Anonymous]

Мне нужно сделать компонент подсказки Swiftui, который поддерживает применение к любому представлению Swiftui, в идеале через модификатор View. То, что я хочу достичь, это в значительной степени именно то, что в настоящее время есть Airbnb, если быть более точным, это: https://imgur.com/a/y6uw4yxобразно Ширина минус 20pts горизонтальные поля с каждой стороны (как вы можете видеть в примере Airbnb). < /p>
Моя текущая реализация работает, но макет разрывается, если представление не точно центрировано в середине экран. < /p>
Текущий код: < /p>

Код: Выделить всё

    struct TestView: View {
var body: some View {
HStack {
Rectangle()
.frame(width: 100, height: 50)
.foregroundStyle(Color.green)
.tooltip()
}
}
}

extension View {
func tooltip() -> some View {
modifier(TooltipModifier())
}
}

struct TooltipModifier: ViewModifier {

func body(content: Content) -> some View {
content
.overlay(alignment: .bottom) {
Tooltip()
.fixedSize()
.alignmentGuide(.bottom, computeValue: { dimension in
dimension[.top] - 20
})
}
}
}

struct Tooltip: View {
var body: some View {
ZStack(alignment: .top) {
HStack {
Text("This is some text that guides the user")
Spacer()
Image(systemName: "xmark.circle.fill")
.resizable()
.frame(width: 16, height: 16)
}
.padding(8)
// This only works if the view is exactly in the middle of the screen, if not then alignment breaks.
.frame(width: UIScreen.main.bounds.width - 40)
.background(Color.red.opacity(0.5))
.cornerRadius(8)

Triangle()
.fill(Color.red.opacity(0.5))
.frame(width: 20, height: 10)
.offset(y: -10)
}
}
}

struct Triangle: Shape {
public func path(in rect: CGRect) -> Path {
var path = Path()

let topMiddle = CGPoint(x: rect.midX, y: rect.minY)
let bottomLeft = CGPoint(x: rect.minX, y: rect.maxY)
let bottomRight = CGPoint(x: rect.maxX, y: rect.maxY)

path.move(to: bottomLeft)
path.addLine(to: bottomRight)

path.addArc(
center: CGPoint(x: topMiddle.x, y: topMiddle.y),
radius: 0,
startAngle: .degrees(0),
endAngle: .degrees(180),
clockwise: true
)

path.addLine(to: bottomLeft)

return path
}
}

Если представление точно центрировано в середине экрана, например, что в настоящее время имеет Testview , результат - это то, что мне нужно:


Но если мы добавим второй прямоугольник к Основной hStack, так что его больше нет в середине экрана, затем разрывы макета:
< /p>
Любая идея, как я могу сделать, чтобы она занимала полную ширину и поддерживает представления на любой части экрана? Пытался использовать геометрические читатели, но, как обычно, они, кажется, полностью разрушают мой макет.
Спасибо!

Подробнее здесь: https://stackoverflow.com/questions/794 ... ent-issues