Using now Scaffold instead of implemented app layout by ourselves

This commit is contained in:
dankito 2024-09-05 00:37:07 +02:00
parent ae95673856
commit 3046188db9
1 changed files with 25 additions and 27 deletions

View File

@ -35,11 +35,12 @@ fun App() {
val colors = MaterialTheme.colors.copy(primary = Colors.Primary, primaryVariant = Colors.PrimaryDark, onPrimary = Color.White, val colors = MaterialTheme.colors.copy(primary = Colors.Primary, primaryVariant = Colors.PrimaryDark, onPrimary = Color.White,
secondary = Colors.Accent, secondaryVariant = Colors.Accent, onSecondary = Color.White) secondary = Colors.Accent, secondaryVariant = Colors.Accent, onSecondary = Color.White)
val snackbarHostState = remember { SnackbarHostState() }
// the same values as in BottomBar, but LocalContentColor.current and LocalContentAlpha.current have a different value there // the same values as in BottomBar, but LocalContentColor.current and LocalContentAlpha.current have a different value there
val snackbarTextColor = MaterialTheme.colors.onPrimary.copy(alpha = 0.74f) // 0.74f = ContentAlpha.HighContrastContentAlpha.medium val snackbarTextColor = MaterialTheme.colors.onPrimary.copy(alpha = 0.74f) // 0.74f = ContentAlpha.HighContrastContentAlpha.medium
// we want to place the FAB half size into the BottomBar so we have to add some top padding to it
val fabPositionAdjustment = 44.dp // FabSpacing = 16.dp + FAB height (= 56.dp) / 2
val coroutineScope = rememberCoroutineScope() val coroutineScope = rememberCoroutineScope()
coroutineScope.launch { coroutineScope.launch {
@ -49,19 +50,26 @@ fun App() {
MaterialTheme(colors = colors, typography = typography) { MaterialTheme(colors = colors, typography = typography) {
SideMenu { SideMenu {
Box { Scaffold(
Column( bottomBar = { BottomBar() },
Modifier.background(color = Colors.Zinc100).fillMaxWidth() backgroundColor = Colors.Zinc100,
floatingActionButton = {
FloatingActionButton(
shape = CircleShape,
modifier = Modifier.offset(x = 4.dp, y = fabPositionAdjustment),
onClick = { DI.uiState.showAddAccountDialog.value = true }
) { ) {
Column(Modifier.fillMaxWidth().weight(1f), horizontalAlignment = Alignment.CenterHorizontally) { Icon(Icons.Filled.Add, contentDescription = "Add a bank account")
TransactionsList(DI.uiState)
} }
},
snackbarHost = { snackbarHostState ->
StateHandler(DI.uiState, snackbarHostState)
SnackbarHost( SnackbarHost(
hostState = snackbarHostState hostState = snackbarHostState
) { data -> ) { data ->
Snackbar( Snackbar(
modifier = Modifier.padding(bottom = 18.dp).padding(12.dp), modifier = Modifier.offset(y = fabPositionAdjustment - 4.dp).padding(horizontal = 12.dp),
action = { if (data.actionLabel == null) null else { action = { if (data.actionLabel == null) null else {
TextButton( TextButton(
onClick = { data.performAction() }, onClick = { data.performAction() },
@ -73,22 +81,12 @@ fun App() {
backgroundColor = Colors.Primary backgroundColor = Colors.Primary
) )
} }
BottomBar()
} }
) { insets ->
Row(Modifier.align(Alignment.BottomEnd)) { Column(Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally) {
FloatingActionButton( TransactionsList(DI.uiState)
shape = CircleShape,
modifier = Modifier.offset((-12).dp, (-26).dp),
onClick = { DI.uiState.showAddAccountDialog.value = true }
) {
Icon(Icons.Filled.Add, contentDescription = "Add a bank account")
} }
} }
} }
StateHandler(DI.uiState, snackbarHostState)
}
} }
} }