Akku-Popover: „Lädt" sitzt auf der Höhe des Rings

Ein HStack zentriert über die volle Höhe seiner Inhalte. Die Beschriftung unter
dem Ring gehört dazu, also rutschte alles daneben um deren halbe Höhe nach
unten. Bei drei Zeilen fällt das kaum auf, bei einer einzelnen schon: „Lädt"
stand sichtbar tiefer als die Mitte, auf die man schaut.

Eine eigene Ausrichtung löst das an der Stelle, an der es entsteht: der Ring
meldet seine Mitte, die Spalte daneben richtet sich danach — unabhängig davon,
wie viele Zeilen sie hat.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
2026-08-13 18:08:25 +02:00
parent e732394c6c
commit 9df2ddb80b

View File

@@ -61,6 +61,21 @@ private struct Row: View {
}
}
/// Die Mitte des **Rings** nicht die des Rings samt Beschriftung.
///
/// Ein `HStack` zentriert seine Inhalte über die volle Höhe. Die Beschriftung
/// unter dem Ring gehört aber dazu, und dadurch rutscht alles daneben um deren
/// halbe Höhe nach unten. Bei einer einzelnen Zeile fällt das auf: sie steht
/// dann sichtbar tiefer als die Mitte, auf die man schaut.
private extension VerticalAlignment {
enum DialCenterID: AlignmentID {
static func defaultValue(in context: ViewDimensions) -> CGFloat {
context[VerticalAlignment.center]
}
}
static let dialCenter = VerticalAlignment(DialCenterID.self)
}
/// Ein Ring mit Zahl in der Mitte.
private struct Dial: View {
let value: Double
@@ -81,6 +96,7 @@ private struct Dial: View {
Text(text).font(.system(size: 15, weight: .medium).monospacedDigit())
}
.frame(width: 62, height: 62)
.alignmentGuide(.dialCenter) { $0[VerticalAlignment.center] }
Text(caption).font(.caption2).foregroundStyle(.secondary)
}
.padding(.bottom, 2)
@@ -244,7 +260,7 @@ private struct BatteryDetail: View {
var body: some View {
if let battery = snapshot.battery {
HStack(spacing: 14) {
HStack(alignment: .dialCenter, spacing: 14) {
Dial(value: battery.charge,
caption: String(localized: "metric.battery", bundle: .module),
text: MetricFormat.percent(battery.charge),
@@ -275,6 +291,7 @@ private struct BatteryDetail: View {
// Ladestand stehen bleibt.
activityLine(battery)
}
.alignmentGuide(.dialCenter) { $0[VerticalAlignment.center] }
}
// Das Ladelimit steht hier und nicht in den Einstellungen: es ist