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

Bruno_

10/25/2019, 5:32 PM
how do I change view? (in other words - navigate to other Composable) I tried to do the same thing as in Jetnews sample but it didn't work the only thing I did different is instead of
Copy code
MaterialTheme
        ModalDrawerLayout(
            bodyContent = { AppContent { onDrawerStateChange(DrawerState.Opened) } }
        )
    }
i placed inside Material theme
AppContent()
directly
MainActivity:
Copy code
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Main()
        }
    }
}
Main composable:
Copy code
@Composable
fun Main()
{
    MaterialTheme {
        Crossfade(AppStatus) {
            when (it)
            {
                is Screen.Home -> HomeScreen()
                is Screen.Home2 -> HomeScreen2()
            }
        }
    }
Status:
Copy code
sealed class Screen {
    object Home : Screen()
    object Home2 : Screen()
}

@Model
object AppStatus {
    var screen: Screen = Screen.Home
}

fun navigateTo(destination: Screen) {
    AppStatus.screen = destination
}
and views
Copy code
@Composable
fun HomeScreen() {
    Container(alignment = Alignment.BottomRight, padding = EdgeInsets(10.dp)) {
        FloatingVectorImageButton(R.drawable.ic_crawling_applying) {
            println(1)
            navigateTo(Screen.Home2)
        }
    }
}

@Composable
fun HomeScreen2() {
    Container(alignment = Alignment.BottomLeft, padding = EdgeInsets(10.dp)) {
        FloatingVectorImageButton(R.drawable.ic_crawling_applying) {
            println(2)
            navigateTo(Screen.Home)
        }
    }
}
when I click a button, only
1
is being printed
does this @model makes that object's var something like an observable from rxjava? meaning that the view should update when the memory address of the var changes, right?
I also tried to print something in the 'Main' function which would tell me that the view is reloaded (assuming I'm not mistaken) but it wasn't actually triggered
f

Fudge

10/25/2019, 6:22 PM
Right now there’s no easy way to navigate, i think what they did in jetnews is have a global variable that says what is the current state and then display the correct page based on that
w

wasyl

10/25/2019, 6:59 PM
@Bruno__ Perhaps
fun navigateTo
needs a
@Composable
annotation too? So that plugin can do its magic when you change property on a
@Model
instance?
b

Bruno_

10/25/2019, 8:03 PM
@wasyl not working
w

wasyl

10/25/2019, 8:24 PM
Should be
Crossfade(AppStatus.screen)
. Android Studio even complained for me that the types weren’t compatible. And then in fact you don’t need
@Composable
on
navigateTo
p

pavi2410

10/25/2019, 8:31 PM
Wow @Bruno_, you just wrote Jetpack Navigation Architecture component! This is so easy to understand and use
b

Bruno_

10/25/2019, 8:42 PM
@wasyl actually that
Crossfade(AppStatus.screen)
thing was because I removed unnecessary bits here in slack chat what version of compose are you using? dev02 by any chance?
@pavi2410 I've just copied it from Jetnews
p

pavi2410

10/25/2019, 8:44 PM
Oh, I was unaware of that
w

wasyl

10/25/2019, 9:16 PM
okay, I see now. You haven’t included
FloatingVectorImageButton
so I placed
Copy code
Button("Go to home", onClick = {
    navigateTo(Screen.Home)
})
and
Copy code
Button("To home 2", onClick = {
    navigateTo(Screen.Home2)
})
in the containers
Can you post
FloatingVectorImageButton
? Are you sure the last parameter is an onClick lambda?
b

Bruno_

10/25/2019, 9:23 PM
Yeah I've already tried removing that cus I noticed that I didn't send it
anyway, there it is
Copy code
@Composable
fun FloatingVectorImageButton(
    @DrawableRes id: Int,
    color: Color = Color.White,
    backgroundColor: Color = Color(0xFF2196F3),
    onClick: () -> Unit
)
{
    FloatingActionButton(color = backgroundColor, onClick = onClick) {
        VectorImage(id, color)
    }
}

@Composable
fun VectorImage(@DrawableRes id: Int, color: Color = Color.Transparent)
{
    val vector = +vectorResource(id)
    WithDensity {
        Container(
            width = vector.defaultWidth.toDp(),
            height = vector.defaultHeight.toDp()
        ) {
            DrawVector(vector, color)
        }
    }
}
w

wasyl

10/25/2019, 9:33 PM
Interesting then. Either way it works for me. Did you enable compose in
build.gradle
?
b

Bruno_

10/25/2019, 9:46 PM
Of course I did not. Should work now tho I'm getting some weird buildtime errors, once I resolve them everything should be fine
Many thanks! ❤️ @wasyl
w

wasyl

10/25/2019, 9:52 PM
Haha no worries @Bruno_, in fact I had exactly the same issue couple of days ago 😄 https://kotlinlang.slack.com/archives/CJLTWPH7S/p1571698171183700
Glad I could help someone figure it out faster than it took me
3 Views