主页 / 问题 / 1592379
Accepted
Роман Юмагулов
Asked:2024-08-30 19:54:42 +0000 UTC2024-08-30 19:54:42 +0000 UTC

应应用哪些修饰符以及在何处应用以使所有元素适合横向方向？

  • 772
import ...

data class ArtInfo(
    val artId: Int,
    val drawableRes: Int,
    val title: String,
    val author: String,
    val year: Int,
)

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            ComposeTheme {
                Surface(
                    modifier = Modifier
                        .statusBarsPadding()
                        .navigationBarsPadding()
                        .fillMaxSize(),
                    color = MaterialTheme.colorScheme.onPrimary
                ) {
                    ArtSpaceApp()
                }
            }
        }
    }
}

@Composable
fun ArtSpaceApp(modifier: Modifier = Modifier) {
    val arts = listOf(
        ...
    )

    var artState by remember {
        mutableStateOf(arts[0])
    }

    fun navigateToNextArt() {
        ...
    }

    fun navigateToPreviousArt() {
        ...
    }

    Column(
        modifier = modifier
            .fillMaxSize()
            .padding(horizontal = 24.dp),
        verticalArrangement = Arrangement.SpaceBetween,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Spacer(modifier = Modifier.height(20.dp))
        Art(imageResource = artState.drawableRes)
        Spacer(modifier = Modifier.height(60.dp))
        AboutArt(
            title = artState.title,
            author = artState.author,
            year = artState.year
        )
        NavigationArts(
            { navigateToNextArt() },
            { navigateToPreviousArt() }
        )
    }
}

@Composable
fun Art(@DrawableRes imageResource: Int) {
    Surface(
        modifier = Modifier
            .border(width = 32.dp, color = Color.White)
            .shadow(elevation = 16.dp),
        ) {
        Image(
            painter = painterResource(id = imageResource),
            contentDescription = null
        )
    }
}

@Composable
fun AboutArt(
    modifier: Modifier = Modifier
        .background(color = colorResource(id = R.color.background_about_art)),
    title: String,
    author: String,
    year: Int,
) {
    Surface(
        modifier = modifier
            .padding(16.dp)
    ) {
        Column(
            modifier = modifier
                .fillMaxWidth()
        ) {
            Text(
                text = title,
                fontSize = 24.sp,
                fontWeight = FontWeight.W300,
            )

            Row {
                Text(
                    text = author,
                    fontWeight = FontWeight.W800
                )

                Text(
                    text = " ($year)"
                )
            }
        }
    }
}

@Composable
fun NavigationArts(
    navigateToNext: () -> Unit,
    navigateToPrevious: () -> Unit,
) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 8.dp),
        horizontalArrangement = Arrangement.SpaceBetween
    ) {
        Button(onClick = ... }) {
            Text(text = "Previous")
        }

        Button(onClick = ... }) {
            Text(text = "Next")
        }
    }
}

纵向

横向

问题是 Art(...) - 图像占据了所有垂直空间，没有为 AboutArt(...) - 图像描述和 NavigationArts(...) - 图像之间的导航按钮留下空间。

android-jetpack-compose

2 个回答

  1. Best Answer
    @Composable
fun ArtSpaceApp(modifier: Modifier = Modifier) {
    ...
    Column(
        modifier = modifier
            .fillMaxSize()
            .padding(horizontal = 24.dp),
        verticalArrangement = Arrangement.SpaceBetween,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Spacer(modifier = Modifier.height(20.dp))
        Column(
            modifier = modifier,
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Art(
                imageResource = artState.drawableRes,
                modifier = Modifier
                    .padding(top = 32.dp, bottom = 16.dp)
                    .requiredHeightIn(min = 0.dp, max = 500.dp)
            )
            Spacer(modifier = Modifier.height(24.dp))
            AboutArt(
                title = artState.title,
                author = artState.author,
                year = artState.year,
            )
        }
        NavigationArts(
            { navigateToNextArt() },
            { navigateToPreviousArt() }
        )
    }
}

@Composable
fun Art(
    @DrawableRes imageResource: Int,
    modifier: Modifier = Modifier,
) {
    Surface(modifier = modifier.shadow(elevation = 16.dp)) {
        Surface(
            modifier = Modifier
                .border(width = 32.dp, color = Color.White)
        ) {
            Image(
                modifier = Modifier.padding(32.dp),
                painter = painterResource(id = imageResource),
                contentDescription = null,
                contentScale = ContentScale.Inside
            )
        }
    }
}

    将 Art()、Spacer() 和 AboutArt() 包装在单独的 Column 容器中，以便导航按钮“钉”在屏幕底部。在Art()本身中，Surface容器必须包装在另一个容器中，否则modifier.shadow(elevation = 16.dp)阴影将不会显示。

    我不会假装自己是最好的实现）

    • 0

  2. 需要这样的放置

    отступ
картинка
отступ
подпись
отступ до самого низа
навигация

    并且使签名始终可见，并使图片尺寸缩小 问题在于图片不知道可以承受多少高度。列不限制其大小。Modifier.weight(1f)没有帮助，因为当应用于Surface它时，它会拉伸它的整个高度，如果应用于图片，导航将被压在标题上。

    您有太多嵌套块。我们删除不必要的东西

    data class ArtState(
    @DrawableRes val drawableRes: Int,
    val title: String,
    val author: String,
    val year: Int
)

@Composable
fun Art(
    @DrawableRes imageResource: Int,
    modifier: Modifier = Modifier,
) {
    Surface(
        modifier = modifier
            .shadow(elevation = 16.dp)
            .border(width = 32.dp, color = Color.White)
    ) {
        Image(
            modifier = Modifier.padding(32.dp),
            painter = painterResource(id = imageResource),
            contentDescription = null,
            contentScale = ContentScale.Inside
        )
    }
}

@Composable
fun NavigationArts(
    navigateToNext: () -> Unit,
    navigateToPrevious: () -> Unit,
) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 8.dp),
        horizontalArrangement = Arrangement.SpaceBetween
    ) {
        Button(onClick = navigateToNext) { Text(text = "Previous") }
        Button(onClick = navigateToPrevious) { Text(text = "Next") }
    }
}

@Composable
fun AboutArt(
    title: String,
    author: String,
    year: Int,
    modifier: Modifier = Modifier
) {
    Surface(
        modifier = modifier
            .background(color = Color.Gray)
            .padding(16.dp)
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
        ) {
            Text(
                text = title,
                fontSize = 24.sp,
                fontWeight = FontWeight.W300,
            )

            Row {
                Text(
                    text = author,
                    fontWeight = FontWeight.W800
                )
                Text(text = " ($year)")
            }
        }
    }
}

    这是通过插槽的解决方案。Spacer + padding如果您只能设置填充，那么组合就没有意义。还删除了不必要的嵌套Column->Column

    @Composable
fun ArtSpaceApp(artState: ArtState, modifier: Modifier = Modifier) {
    Column(
        modifier = modifier
            .fillMaxSize()
            .padding(horizontal = 24.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        MyLayout(
            modifier = Modifier.weight(1f),
            content = {
                Art(
                    imageResource = artState.drawableRes,
                    modifier = Modifier
                        // убрал лишние Spacer
                        .padding(top = (32.dp + 20.dp), bottom = (16.dp + 24.dp))
                )
            },
            bottomContent = {
                AboutArt(
                    title = artState.title,
                    author = artState.author,
                    year = artState.year,
                )
            }
        )

        NavigationArts(
            { },
            { }
        )
    }
}

@Composable
fun MyLayout(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit,
    bottomContent: @Composable () -> Unit,
) {
    SubcomposeLayout(modifier = modifier) { constraints: Constraints ->
        // тут bottom определяет свой размер. По ширине пусть берет все, а по высоте не более ей нужного
        val bottomPlaceable: Placeable = subcompose(SlotsEnum.Bottom, bottomContent).map {
            it.measure(Constraints(maxWidth = constraints.maxWidth))
        }.first()

        // а тут основной контент определяет свой размер. Из общей высоты вычитаем bottom и пусть умещается
        // по высоте, а по ширине там сработает ContentScale
        val contentPlaceable: Placeable = subcompose(SlotsEnum.Main, content).map {
            it.measure(
                Constraints(
                    maxWidth = constraints.maxWidth,
                    maxHeight = constraints.maxHeight - bottomPlaceable.height
                )
            )
        }.first()

        // размещаем
        layout(constraints.maxWidth, constraints.maxHeight) {
            // центрируем
            contentPlaceable.placeRelative((constraints.maxWidth - contentPlaceable.width) / 2, 0)
            // приклеиваем bottom к картинке
            bottomPlaceable.placeRelative(0, contentPlaceable.height)
        }
    }
}

enum class SlotsEnum {
    Main,
    Bottom
}

    如果您需要显示小图片，那么标题可能太高，因此在 MyLayout 中您可以传递最小高度并执行以下操作

    maxHeight = min(myminHeight, constraints.maxHeight - bottomPlaceable.height)

    我将尝试使用 ConstraintLayout 进行相同的操作。如果有效，我会添加到答案中。

    • 0

相关问题