Scarriffle/Flaro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Der leuchtende Streifen war die Reihenfolge der Überlagerungen

Browse Source 
Ein negativer Rand dehnt, was er umschließt, meldet nach außen aber die alte
Breite. Er stand ganz oben, also legten sich Verlauf und Schrift nur über den
alten Bereich — und die zwölf Punkte daneben blieben ohne Verlauf und damit
hell. Gemessen: dort 60 Helligkeit, im Inhaltsbereich 19, bei gleichem Bild.

Jetzt wird erst der Verlauf gelegt, dann gedehnt, dann die Schrift gesetzt. Der
Verlauf deckt bis zum Rand, die Schrift bleibt auf der gemeldeten Breite und
fängt von selbst dort an, wo auch die Reihen darunter anfangen.

Der Weg dorthin ging über drei Irrtümer, die alle widerlegt sind: nicht
`glassEffect` (der Streifen blieb bei undurchsichtiger Fläche), nicht der
Platzhalter (er blieb bei grünem Platzhalter), nicht der Scroll-Anzeiger (er
blieb ohne Bildlaufansicht). Die Bildlaufansicht in der Leiste ist trotzdem
draußen — sie wurde nicht gebraucht.

Dazu: der Aufmacher nimmt die volle Höhe statt achtundachtzig Prozent, der
Haarstrich der Leiste ist zurückhaltender, und auf dem iPhone ist der Aufmacher
das **Plakat** statt des Hintergrundbilds. Ein 16:9-Bild hochkant zeigt einen
Ausschnitt aus der Mitte; ein Plakat ist von vornherein hochkant und passt
ohne Beschnitt.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
2026-09-13 20:26:32 +02:00
co-authored by Claude Opus 5
parent 873b8a4405
commit dba645d168
4 changed files with 55 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Packages/FlixyKit/Sources/FlixyDesign/Components/HeroBanner.swift
+18 -12
View File
@@ -126,18 +126,6 @@ public struct HeroBanner<Actions: View>: View {
public var body: some View {
FlixyArtwork(url: artworkURL, aspectRatio: aspectRatio, fillsFrame: fillsAvailableSpace)
// Bis unter die Leiste und an den Fensterrand.
//
// Hier stand `backgroundExtensionEffect()`. Der spiegelt den
// Bildrand und zeichnet ihn weichgezeichnet weiter — und je größer
// die Fläche wurde, die er füllen musste, desto mehr übernahm der
// Spiegel das Bild. Über die Seitenleiste hinaus war er nicht mehr
// Fortsetzung, sondern Hauptsache; auf dem iPhone legte er sich
// ohne jede Seitenleiste über den Statusbalken.
//
// Ein negativer Rand tut dasselbe ehrlicher: das Bild **selbst**
// läuft weiter. Eine Fläche, ein Ausschnitt, keine Naht.
.padding(.leading, -chromeInset)
.overlay(alignment: .bottom) {
// Der Verlauf endet in der Hintergrundfarbe der Seite, nicht in
// Schwarz: sonst entsteht genau dort, wo der Aufmacher in die
@@ -154,6 +142,24 @@ public struct HeroBanner<Actions: View>: View {
.frame(maxHeight: .infinity, alignment: .bottom)
.allowsHitTesting(false)
}
// Erst **hier** nach links ausbrechen, nach dem Verlauf und vor
// der Schrift.
//
// Ein negativer Rand dehnt zwar, was er umschließt, meldet nach
// außen aber die alte Breite. Stand er ganz oben, legten sich
// Verlauf und Schrift deshalb nur über den alten Bereich — und die
// zwölf Punkte daneben blieben ohne Verlauf und damit hell. Das war
// der leuchtende Streifen an der Kante der Seitenleiste.
//
// In dieser Reihenfolge stimmt beides: der Verlauf wird mitgedehnt
// und deckt bis zum Rand, die Schrift bleibt auf der gemeldeten
// Breite und fängt damit von selbst dort an, wo auch die Reihen
// darunter anfangen.
//
// (Hier stand einmal `backgroundExtensionEffect()`. Der spiegelte
// den Bildrand, statt das Bild weiterlaufen zu lassen — je größer
// die Fläche, desto mehr übernahm der Spiegel das Bild.)
.padding(.leading, -chromeInset)
.overlay(alignment: .bottomLeading) {
GeometryReader { geometry in
let scale = scale(for: geometry.size.width)