WearPreview.kt

package com.google.android.horologist.scratch

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.wear.compose.foundation.ExperimentalWearFoundationApi
import androidx.wear.compose.foundation.HierarchicalFocusCoordinator
import androidx.wear.compose.foundation.OnFocusChange
import androidx.wear.compose.foundation.lazy.ScalingLazyColumn
import androidx.wear.compose.foundation.lazy.rememberScalingLazyListState
import androidx.wear.compose.foundation.rememberActiveFocusRequester
import androidx.wear.compose.material.ListHeader
import androidx.wear.compose.material.Text
import androidx.wear.compose.ui.tooling.preview.WearPreviewLargeRound
import com.google.android.horologist.compose.material.Chip
import com.google.android.horologist.compose.rotaryinput.rotaryWithScroll

@WearPreviewLargeRound
@Composable
fun WearPreview() {
    var shouldShowWarningOverlay by remember { mutableStateOf(false) }

    Box(
        modifier = Modifier
            .fillMaxSize()
    ) {
        HierarchicalFocusCoordinator(requiresFocus = {
            !shouldShowWarningOverlay
        }) {
            val state1 = rememberScalingLazyListState()
            val focus1 = rememberActiveFocusRequester()
            OnFocusChange {
                println("Main focus:$it")
            }
            ScalingLazyColumn(
                modifier = Modifier
                    .fillMaxSize()
                    .rotaryWithScroll(state1, focus1),
                state = state1
            ) {
                item {
                    ListHeader {
                        Text(text = "Main")
                    }
                }
                item {
                    Chip(label = "Show Dialog", onClick = { shouldShowWarningOverlay = true })
                }
                items(10) {
                    Text(text = "Item $it")
                }
            }
        }

        HierarchicalFocusCoordinator(requiresFocus = { shouldShowWarningOverlay }) {
            OnFocusChange {
                println("Dialog focus:$it")
            }
            AnimatedVisibility(visible = shouldShowWarningOverlay) {
                val state2 = rememberScalingLazyListState()
                ScalingLazyColumn(
                    modifier = Modifier
                        .fillMaxSize()
                        .rotaryWithScroll(state2),
                    state = state2
                ) {
                    item {
                        ListHeader {
                            Text(text = "Dialog")
                        }
                    }
                    item {
                        Chip(label = "Hide", onClick = { shouldShowWarningOverlay = false })
                    }
                    items(10) {
                        Text(text = "Item $it")
                    }
                }
            }
        }
    }
}