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:
@@ -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.
|
/// Ein Ring mit Zahl in der Mitte.
|
||||||
private struct Dial: View {
|
private struct Dial: View {
|
||||||
let value: Double
|
let value: Double
|
||||||
@@ -81,6 +96,7 @@ private struct Dial: View {
|
|||||||
Text(text).font(.system(size: 15, weight: .medium).monospacedDigit())
|
Text(text).font(.system(size: 15, weight: .medium).monospacedDigit())
|
||||||
}
|
}
|
||||||
.frame(width: 62, height: 62)
|
.frame(width: 62, height: 62)
|
||||||
|
.alignmentGuide(.dialCenter) { $0[VerticalAlignment.center] }
|
||||||
Text(caption).font(.caption2).foregroundStyle(.secondary)
|
Text(caption).font(.caption2).foregroundStyle(.secondary)
|
||||||
}
|
}
|
||||||
.padding(.bottom, 2)
|
.padding(.bottom, 2)
|
||||||
@@ -244,7 +260,7 @@ private struct BatteryDetail: View {
|
|||||||
|
|
||||||
var body: some View {
|
var body: some View {
|
||||||
if let battery = snapshot.battery {
|
if let battery = snapshot.battery {
|
||||||
HStack(spacing: 14) {
|
HStack(alignment: .dialCenter, spacing: 14) {
|
||||||
Dial(value: battery.charge,
|
Dial(value: battery.charge,
|
||||||
caption: String(localized: "metric.battery", bundle: .module),
|
caption: String(localized: "metric.battery", bundle: .module),
|
||||||
text: MetricFormat.percent(battery.charge),
|
text: MetricFormat.percent(battery.charge),
|
||||||
@@ -275,6 +291,7 @@ private struct BatteryDetail: View {
|
|||||||
// Ladestand stehen bleibt.
|
// Ladestand stehen bleibt.
|
||||||
activityLine(battery)
|
activityLine(battery)
|
||||||
}
|
}
|
||||||
|
.alignmentGuide(.dialCenter) { $0[VerticalAlignment.center] }
|
||||||
}
|
}
|
||||||
|
|
||||||
// Das Ladelimit steht hier und nicht in den Einstellungen: es ist
|
// Das Ladelimit steht hier und nicht in den Einstellungen: es ist
|
||||||
|
|||||||
Reference in New Issue
Block a user