android - 应用 TopAppBar 的插图变为透明？

Question

我正在尝试构建一个屏幕，内容从 TopAppBar 后面开始，使用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()
                    )
                }
            }
        }
    }
}

标签： androidandroid-jetpack-compose

Answer 1

它没有透明背景。实际上它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
    )
}