IssueTracker

Component used: Wear Compose

Version used: 1.2.0-beta01

Devices/Android versions reproduced on: emulator

• my clicks are going to the expanded version, even when it's collapsed.
• it seems to recompose both a lot, and I wouldn't expect in the steady state, for it to compose the non used version at all
• it surprised me that state isn't maintained within the composable, for me, it breaks the expected state rules. But I can see why.

package com.google.android.horologist.scratch

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.Composable
import androidx.compose.runtime.SideEffect
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.foundation.expandableItem
import androidx.wear.compose.foundation.rememberExpandableState
import androidx.wear.compose.material.Text
import androidx.wear.compose.navigation.rememberSwipeDismissableNavController
import com.google.android.horologist.compose.layout.ScalingLazyColumn
import com.google.android.horologist.compose.layout.ScalingLazyColumnDefaults
import com.google.android.horologist.compose.layout.ScalingLazyColumnState
import com.google.android.horologist.compose.material.Chip
import com.google.android.horologist.compose.material.SplitToggleChip
import com.google.android.horologist.compose.material.ToggleChipToggleControl
import com.google.android.horologist.compose.navscaffold.WearNavScaffold
import com.google.android.horologist.compose.navscaffold.composable
import com.google.android.horologist.compose.navscaffold.scrollable

class ScratchActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            WearApp()
        }
    }
}

@Composable
fun WearApp() {
    val navController = rememberSwipeDismissableNavController()
    WearNavScaffold(
        startDestination = "a",
        navController = navController,
    ) {
        scrollable(
            "a",
            columnStateFactory = ScalingLazyColumnDefaults.belowTimeText(firstItemIsFullWidth = true)
        ) {
            ExpandableScreen(it.columnState) { navController.navigate("c") }
        }

        composable("b") {
            SimpleScreen("b", onClick = { navController.navigate("c") })
        }

        composable("c") {
            SimpleScreen("c", onClick = { navController.navigate("c") })
        }
    }
}

@Composable
fun SimpleScreen(s: String, onClick: (() -> Unit)?) {
    Box(modifier = Modifier.fillMaxSize()) {
        Chip(s, onClick = onClick ?: {}, enabled = onClick != null)
    }
}

@Composable
fun ExpandableScreen(state: ScalingLazyColumnState, onClick: () -> Unit) {
    val expandedState = rememberExpandableState(false)
    Box(modifier = Modifier.fillMaxSize()) {
        ScalingLazyColumn(columnState = state) {
            expandableItem(expandedState) { expanded ->
                SideEffect {
                    println("Item expanded: $expanded")
                }
                val counter = remember {
                    mutableIntStateOf(0)
                }
                Column {
                    SplitToggleChip(
                        checked = expanded,
                        onCheckedChanged = {
                            println("item onCheckedChange state=${expandedState.expanded} it=$expanded")
                            counter.intValue = counter.intValue + 1
                            expandedState.expanded = !expanded
                        },
                        label = "Next Screen ${counter.intValue}",
                        onClick = onClick,
                        toggleControl = ToggleChipToggleControl.Switch
                    )

                    if (expanded) {
                        Text(text = "Expanded Text\nMore Expanded Text\nGetting ridiculous now!")
                    }
                }
            }
        }

        Chip(
            modifier = Modifier.align(Alignment.BottomCenter),
            label = "Expanded ${expandedState.expanded}",
            onClick = {
                println("Box onCheckedChange current=$expandedState.expanded")
                expandedState.expanded = !expandedState.expanded
            },
        )
    }
}