如何将 jetpack compose 中的背景图像添加到 compose 布局

Question

从导航图中调用以下函数。

@Composable
fun InformationScreen(
) {
        Scaffold(
            topBar = {
                Box(modifier = Modifier.fillMaxWidth()) {
                    CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
                        IconButton(
                            onClick = { /*...*/ },
                            modifier = Modifier
                                .padding(horizontal = 20.dp, vertical = 20.dp)
                                .fillMaxWidth()
                        ) {
                            Icon(
                                Icons.Filled.Close,
                                contentDescription = stringResource(id = R.string.close),
                                modifier = Modifier.align(Alignment.CenterEnd)
                            )
                        }
                    }
                }
            },
            content = { innerPadding ->//}
              
    }

我应该为此撰写功能添加主题吗？如何应用它并确保应用程序这些不会改变？谢谢

Answer 1

您可以Box通过将背景图像放置在所有其他视图下来添加背景图像。修改matchParentSize器会将其拉伸到父级大小。

Box(modifier = Modifier.fillMaxWidth()) {
    Image(
        painterResource(id = R.drawable.ic_launcher_background),
        contentDescription = "",
        contentScale = ContentScale.FillBounds, // or some other scale
        modifier = Modifier.matchParentSize()
    )
    CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
        IconButton(
            onClick = { /*...*/ },
            modifier = Modifier
                .padding(horizontal = 20.dp, vertical = 20.dp)
                .fillMaxWidth()
        ) {
            Icon(
                Icons.Filled.Close,
                contentDescription = "stringResource(id = R.string.close)",
                modifier = Modifier.align(Alignment.CenterEnd)
            )
        }
    }
}