Блог

Я пытаюсь создать экран с контентом, начинающимся прямо за верхней панелью приложений, используя accompanist-insets . Однако панель приложений всегда прозрачна.

Как сделать его сплошной/непрозрачной панелью навигации?

Выходной ток

Код

 val scrollState = rememberLazyListState()
var isScrollStateChanged by remember { mutableStateOf(false) }
isScrollStateChanged = scrollState.firstVisibleItemScrollOffset != 0

val position by animateFloatAsState(if (isScrollStateChanged) 0f else -45f)
val listItems = (1..100).toList()

ProvideWindowInsets {
    Surface(
        modifier = Modifier
            .fillMaxSize()
            .systemBarsPadding(),
        color = Color.White
    ) {
        Box(Modifier.fillMaxSize()) {
            TopAppBar(
                content = { Text("Hello nav bar!") },
                modifier = Modifier
                    .offset(0.dp, position.dp)
                    .alpha(min(1f, 1   (position / 45f)))
                    .navigationBarsPadding(bottom = false),
                backgroundColor = Color.Red
            )
            LazyColumn(
                state = scrollState
            ) {
                items(items = listItems) {
                    Text(
                        "Hello $it",
                        Modifier
                            .padding(20.dp)
                            .fillMaxWidth()
                    )
                }
            }
        }
    }
}
 

У него нет прозрачного фона. На самом деле он LazyColumn имеет прозрачный фон и TopAppBar помещен под ним.

С помощью Box вы кладете предметы друг на друга, так что второй будет находиться под первым. Измените их порядок:

 Box(Modifier.fillMaxSize()) {
    LazyColumn(
        state = scrollState
    ) {
        items(items = listItems) {
            Text(
                "Hello $it",
                Modifier
                    .padding(20.dp)
                    .fillMaxWidth()
            )
        }
    }
    TopAppBar(
        content = { Text("Hello nav bar!") },
        modifier = Modifier
            .offset(0.dp, position.dp)
            .alpha(min(1f, 1   (position / 45f)))
            .navigationBarsPadding(bottom = false),
        backgroundColor = Color.Red
    )
}