komponenten

UI: Komponenten

Zweck

Dokumentation wiederverwendbarer UI-Komponenten.

Wichtige Komponenten

TraewellingTopAppBar

Gradient-TopAppBar mit der aktuellen Material-Primaryfarbe.

@Composable
fun TraewellingTopAppBar(
    title: String,
    navigationIcon: @Composable () -> Unit = {},
    actions: @Composable RowScope.() -> Unit = {}
)

Hintergrund: Horizontaler Gradient von MaterialTheme.colorScheme.primary zu derselben Farbe mit Alpha 0,8. Das helle Theme verwendet DeepIndigo; Dark/AMOLED verwenden IndigoLight. Der Verlauf passt sich daher dem eingestellten Theme an.

StatusCard

Check-in-Karte für Feed-Listen.

Zeigt:

• User-Avatar und Name
• Zug/Linie mit Farbe (TransportColors) und farblich getöntem Route-Panel
• Start → Ziel Stationen mit Mini-Timeline
• Punkte-Badge
• Status-Text (body)
• Like-Button mit Zähler
• Details-Hinweis als visuelle Affordance für den Status-Detail-Screen

onLike ist nullable: ohne Handler oder bei status.isLikable = false ist die Herz-Aktion deaktiviert. Feedkarten besitzen einen Handler; eigene und fremde Profilkarten übergeben ausdrücklich null.

StateMessage

Einheitliche Darstellung für Lade-, Fehler- und Empty-States in Screens.

@Composable
fun StateMessage(
    icon: ImageVector,
    title: String,
    modifier: Modifier = Modifier,
    message: String? = null,
    iconTint: Color = MaterialTheme.colorScheme.primary,
    actionLabel: String? = null,
    onAction: (() -> Unit)? = null,
    loading: Boolean = false
)

Wird unter anderem im Feed, Check-in, StatusDetail, Profil, Benutzerprofil, Benutzersuche und Notifications genutzt, um leere Zustände, Ladezustände und Fehler visuell konsistent darzustellen.

StatPill

Kleines Inline-Statistik-Badge.

@Composable
fun StatPill(icon: ImageVector, text: String, color: Color)

Beschriftete Einstellungen

SettingsToggle verbindet Titel, Beschreibung, Schalterzustand und genau eine Aktion in der gesamten Zeile (Role.Switch, mindestens 48 dp). Die innere Switchanzeige besitzt keinen eigenen Handler. Auswahlfelder tragen ihre Titel direkt als Textfeldlabel. Der Setup-Tokenbutton nennt abhängig vom Zustand Token anzeigen oder Token verbergen aus Stringressourcen. Dies ist eine Quell-/Semantikkorrektur; instrumentierte und TalkBack-Prüfung bleiben offen.

Farben (TransportColors)

Kategorie	Farbe
ICE/NationalExpress	#9B1B30 (Wine Red)
IC/National	#9B1B30
RE/RegionalExp	#0064B0 (DB Blue)
RB/Regional	#0064B0
S-Bahn	#408335 (Green)
U-Bahn	#0054A6 (Blue)
Tram	#CE1417 (Red)
Bus	#A5107F (Purple)
Ferry	#009FE3 (Water Blue)

Verwandte Seiten

• Screens
• Theme