标签: android-jetpack-compose-layout

如何使用间隔填充一行中的两个元素，让一个元素位于行的开头，另一个元素位于行的末尾？

Row {
    Text("Start")
    Spacer(modifier = Modifier.SpaceBetween)  // How to set the modifier
    Text("End")
}

是否可以将Arrangement.spacedBy(16.dp)and组合Arrangement.Center在一个 中Row.horizontalArrangement？

我想做的是将内容水平居中并设置默认间距16.dp。

我知道我可以结合Row和 aBox来达到相同的结果，但我想知道是否可以仅使用 heRow的属性来完成。

    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.Center, // I would like to add the .spacedBy(16.dp), keeping the Center arrangement 
        verticalAlignment = Alignment.CenterVertically,
    ) {
        Text(
            text = stringResource(R.string.generic_error_pagination),
            style = MaterialTheme.typography.subtitle1,
            color = MaterialTheme.colors.textSecondary,
        )
        OutlinedButton(onClick = onClick) {
            Text(stringResource(id = R.string.retry_button))
        }
    }

我有一个包含一些行的列，我想在底部对齐最后一行，但该行永远不会位于屏幕底部，它位于上一行之后：

    Column {
        // RED BOX
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .height(130.dp)                
                .padding(vertical = 15.dp, horizontal = 30.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Column {
                Text(
                    text = stringResource(id = R.string.app_name),
                    style = TextStyle(fontSize = 40.sp),
                    color = Color.White
                )
                Text(
                    text = stringResource(id = R.string.app_description),
                    style = TextStyle(fontSize = 13.sp),
                    fontWeight = FontWeight.Bold,
                    color = Color.Black
                )
            }
        }

        Spacer(
            modifier = Modifier
                .fillMaxWidth()
                .height(15.dp)
        )

        // GREEN BOX
        val currentRoute = currentRoute(navController)
        items.forEach { item ->
            DrawerItem(item = …

如何使用可组合函数垂直对齐文本Text。有没有一种方法可以做到这一点，而不必添加另一个额外的视图来包含Text.

textAlign的参数只有Text以下选项：

TextAlign.

• 左边
• 正确的
• 中心
• 证明合法
• 开始
• 结尾

我尝试过使用textAlign = TextAlign.Center，但它只能水平居中。如何将其垂直居中而不将其包装在另一个视图中？

Text(
    text = "Text",
    modifier = Modifier.size(100.dp),
    textAlign = TextAlign.Center
)

结果：

我想要实现的目标：

我有一个最大宽度的行，我想在开头放置一个图标，然后在末尾放置一个文本，然后再放置另一个图标。我有特定大小的图标，我希望文本填充剩余空间。

Row(
   Modifier
   .fillMaxWidth()
   .height(30.dp)
){
  Icon(Modifier.size(20.dp))

  Text() // Fill this with remaining space available

  Icon(Modifier.size(20.dp))
}

如果我fillMaxWidth在文本中这样做，那么图标就会从视图中消失。

怎么做？

我试图在单击文本时向下滚动到特定 UI 元素的位置。

我的文本的代码是：

                Text(
                "What is autosaving?",
                color = colorResource(id = R.color.text_highlight),
                fontSize = with(LocalDensity.current) {
                    dimensionResource(id = R.dimen._11ssp).toSp()
                },
                fontFamily = FontFamily(
                    Font(R.font.poppins_regular)
                ),
                modifier = Modifier.constrainAs(whatIsAutosaving) {
                    top.linkTo(glWhatIsAutoSaving)
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                },
            )

单击此文本后，我的屏幕应滚动到另一个文本的开始位置。另一个文本的代码是：

        Text(
        stringResource(id = R.string.autosave_info),
        color = colorResource(id = R.color.bright_green),
        fontSize = with(LocalDensity.current) {
            dimensionResource(id = R.dimen._11ssp).toSp()
        },                fontFamily = FontFamily(
            Font(R.font.poppins_regular)
        ),
        modifier = Modifier.constrainAs(autoSaveInfo) {
            top.linkTo(glAutoSaveInfo)
            start.linkTo(glLeft)
            end.linkTo(glRight)
            width = Dimension.fillToConstraints
        },
    )

我该如何实现这一目标？

编辑：

我的屏幕的完整代码是：

@Composable
fun Autosave(navController: NavController) {
    val query …

我以以下可组合项为例：

@Composable
fun CustomCanvas(
) {
   Box(
      Modifier
        .aspectRatio(1.33f)
        .fillMaxWidth())
} 

我如何知道这个物体合成后的大小？

为什么我想知道：我正在尝试调整图像大小并将图像放置在画布上。这需要知道画布的大小。不，我不想对画布的大小进行硬编码。这个怎么做？

我是按照官方文档来了解Rows的。

运行良好。它水平排列视图，应用程序运行没有任何问题。

问题：

我想在Row中设置horizo​​ntalArrangement。是没安排好。

我的代码：

@Composable
fun SimpleRowArrangement(){
    Row(horizontalArrangement  =  Arrangement.SpaceEvenly,
            verticalAlignment = Alignment.Bottom) {
        Text(text = "Row Text 1")
        Text(text = "Row Text 2")
        Text(text = "Row Text 3")
    }
}

输出：

我本质上希望将卡片固定在顶部，并将一组按钮固定在底部（在屏幕键盘上）

将 Column 与这样的修饰符一起使用只会导致按钮覆盖顶部的卡片：

fun HomeScreen() {
Column(
    modifier = Modifier
        .fillMaxWidth(),
    verticalArrangement = Arrangement.SpaceAround
) {
    WordGrid()
  }
Column(
    modifier = Modifier
        .fillMaxWidth(),
        verticalArrangement = Arrangement.Bottom
    ) {
        Keyboard()
       }

我尝试过使用所有不同的安排，使用行和使用框，但似乎无法让它工作。

奇怪的是，在 @Preview 中，上面的代码看起来好像可以工作，但是当在模拟器上运行时，它们都位于屏幕的顶部。

使用垫片是另一种选择，但这会导致其他问题吗？也许与屏幕尺寸等有关？

我刚刚创建了一个简单的 Composable 并希望使用 a 来渲染它Layout，但是在实现解决方案时，我在测量阶段偶然发现了这个错误。

java.lang.IllegalArgumentException: Can't represent a size of 214748364 in Constraints
        at androidx.compose.ui.unit.Constraints$Companion.bitsNeedForSize(Constraints.kt:408)
        at androidx.compose.ui.unit.Constraints$Companion.createConstraints-Zbe2FdA$ui_unit_release(Constraints.kt:368)
        at androidx.compose.ui.unit.ConstraintsKt.Constraints(Constraints.kt:438)
        at androidx.compose.ui.unit.ConstraintsKt.Constraints$default(Constraints.kt:423)
        at com.gmarsk.aiare.MainActivity$InstructionsScreen$DisplayCard$1.measure-3p2s80s(MainActivity.kt:514)
        at androidx.compose.ui.node.InnerPlaceable.measure-BRTryo0(InnerPlaceable.kt:54)

这是我尝试这个的时候

val sampleComposable = measurables[1].measure(
                Constraints(
                    minHeight = constraints.maxHeight * 7 / 10,
                )
            )

有人以前偶然发现过这个吗？如果不是错误，有什么解决方案，请告诉我。

现在，我认为这里的问题是我嵌套了两个Layout可组合项，

Layout(
content = {
 Dummy1()
 Dummy2()
 NestedLayoutComposable() // It contains a Layout Composable itself
}{ measurables, constraints ->
 val nlc = measurables[2].measure(
  Constraints(
   minHeight = constraints.maxHeight * 7/10
  )
 )
 layout(constraints.maxWidth, constraints.maxHeight){
  nls.place(0, …