如何在Jetpack Composer中以适当大小/布局显示垂直文本 [英] How to show vertical text with proper size/layout in jetpack compose

问题描述

如何正确旋转Jetpack Compose中的文本并使其进行正确的布局？当我在文本对象上使用rotate修饰符时，文本会旋转，但布局中的大小似乎使用了预先旋转的文本宽度。

以下是我想要实现的一个简单示例--垂直文本应该位于左侧的狭窄空间中：

@Composable
fun MainBox() {
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            modifier = Modifier.padding(4.dp).background(Color.Gray),
            text = "This is at the top"
        )

        Row(
            modifier = Modifier.fillMaxWidth().weight(1f),
            verticalAlignment = Alignment.CenterVertically
        ) {

            Text(
                modifier = Modifier.padding(4.dp).rotate(-90f),
                text = "This should be vertical text on the left side"
            )

            Text(
                modifier = Modifier.fillMaxSize().background(Color.Yellow),
                textAlign = TextAlign.Center,
                text = "This is a big yellow box that should take up most of the space"
            )
        }
    }
}

但是，这显示的是这样的。

如果我缩短竖排文本中的文本，它只会占用很小的空间，这看起来更像我想要的布局。

有没有办法截取布局过程或某些其他设置来固定大小，以便竖排文本只占据水平空间的一个文本行宽度，但仍然适应用户字体大小的更改(因此没有固定的大小)？

类似问题的答案here和here无法解决此问题或不再有效。

推荐答案

我的版本。经过几次测试，它似乎运行得很好

class ComposeActivity7 : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            ComposeTutorialTheme {

                Column(
                    modifier = Modifier.fillMaxSize(),
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    Text(
                        modifier = Modifier
                            .padding(4.dp)
                            .background(Color.Gray),
                        text = "This is at the top"
                    )

                    Row(
                        modifier = Modifier
                            .fillMaxWidth()
                            .weight(1f),
                        verticalAlignment = Alignment.CenterVertically
                    ) {
                        Text(
                            modifier = Modifier
                                .vertical()
                                .rotate(-90f)
                                .background(Color.Gray)
                                .padding(4.dp),
                            text = "This should be vertical text on the left side"
                        )
                        Text(
                            modifier = Modifier
                                .fillMaxSize()
                                .background(Color.Yellow),
                            textAlign = TextAlign.Center,
                            text = "This is a big yellow box that should take up most of the space"
                        )
                    }
                }
            }
        }
    }
}

fun Modifier.vertical() =
    layout { measurable, constraints ->
        val placeable = measurable.measure(constraints)
        layout(placeable.height, placeable.width) {
            placeable.place(
                x = -(placeable.width / 2 - placeable.height / 2),
                y = -(placeable.height / 2 - placeable.width / 2)
            )
        }
    }

结果

这篇关于如何在Jetpack Composer中以适当大小/布局显示垂直文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！