使用 Jetpack Compose 将按钮垂直放置在父级中

Question

我有以下按钮可组合项：

@Composable
private fun ImageButton() {
    Button(onClick = { }) {
        Icon(
            Icons.Filled.Image,
            contentDescription = stringResource(id = R.string.load_image_button)
        )
    }
}

@Composable
private fun CameraButton() {
    Button(onClick = { }) {
        Icon(
            Icons.Filled.PhotoCamera,
            contentDescription = stringResource(id = R.string.capture_image_button)
        )
    }
}

我把它放在我的应用程序的一栏中：

@Composable
fun App(modifier: Modifier) {
    Surface(
        modifier = modifier,
        color = MaterialTheme.colorScheme.background
    ) {
        Column(
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            CameraButton()
            ImageButton()
        }
    }
}

如何将按钮放置在屏幕下方 2/3 的位置？

Answer 1

您可以使用垫片。通过添加权重修饰符为 1f 的间隔可组合元素。它们占据了 1/3 的可用空间。然后按钮将被放置在剩余 1/3 的空间中，这实际上将它们放置在屏幕下方的 2/3 处。

@Composable
fun App(modifier: Modifier) {
    Surface(
        modifier = modifier,
        color = MaterialTheme.colorScheme.background
    ) {
        Column(
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Spacer(modifier = Modifier.weight(1f)) 
            CameraButton()
            ImageButton()
            Spacer(modifier = Modifier.weight(1f)) 
        }
    }
}