https://kotlinlang.org logo
#compose
Title
# compose
d

Davide Giuseppe Farella

08/30/2020, 4:15 PM
This is something that always made struggle also with XML design. I tried with something like
Copy code
Scaffold(topBar = ..., bottomBar = ..., ...) {
  when (currentScreen) {
    ...
  }
}
Problem is that some screen have fab, some have search bar in topBar, which has actions, etc. So I change that as
Copy code
val content @Composable () -> Unit = {
  when (currentScreen) {
    ...
  }
}

if (currentScreen.isHomeDestination) {
  Scaffold(...) { content() }
else 
  content()
and it was still looking nice on the UI prospective, but ugly on the code, because some screens will be wrapped in Scaffold, while some will be wrapped somewhere else ( 👆 ), So I created a custom Scaffold and moved into my screens
Copy code
@Composable
fun SearchMovie(...) {
  HomeScaffold {
    ...
  }
}
But now it looks ugly on the UI, because I open my drawer, but when I select an item it replaces the whole screen, so my drawer disappear without the animation. What would be the best way to deal with that?
Woops, that was stupid 🙂
Copy code
drawerState.close(myAction)
e

Eric Martori

08/30/2020, 8:40 PM
what a about a property in
currentScreen
that tells you if the screen has a top bar?
Copy code
Scaffold(
    topBar = { AppBar(currentScreen) }.takeIf(currentScreen.hasTopBar)
) { /*body*/ }
d

Davide Giuseppe Farella

08/31/2020, 6:49 PM
Problem is that some screen have fab, some have search bar in topBar, which has actions, etc.
e

Eric Martori

08/31/2020, 7:59 PM
Scaffold accepts nullable lambdas for this parameters, you can decide wether they compose or not cheking the currentScreen. You could (for example) have the following Screen interface:
Copy code
interface Screen {
    val topBar: @Composable (() -> Unit)?
    val bottomBar: @Composable (() -> Unit)?
    val fab: @Composable (() -> Unit)?
    val body: @Composable (InnerPadding) -> Unit
}
and implement your scaffold like this:
Copy code
Scaffold(
    topBar = currentScreen.topBar,
    bottomBar = currentScreen.bottomBar,
    floatingActionButton = currentScreen.fab
) {
    currentScreen.body(it)
}
Take in mind this are just some ideas I am not experienced with Compose yet
d

Davide Giuseppe Farella

09/01/2020, 3:45 PM
What about the click action for the fab? 😅
Or even worse, the query for the search bar
t

Timo Drick

09/02/2020, 9:36 AM
You could also just draw the scaffold inside of your screen. Maybe when it is so complexe and completly different on every screen that makes more sense.
4 Views