kotlin - 在 Jetpack Compose 中对齐调整大小的 TextField

Question

我TextField在Jetpack Compose为桌面对齐调整大小时遇到​​问题。当我调整 的宽度时TextField，会TextField自动将自身调整到屏幕的中心位置。我试过使用Modify.Align但没有用。

有人可以帮忙吗？这是我的代码

@Composable
fun addSales(sales: Sales,
             actionChangeSales: (sales: Sales) -> Unit,
             actionQuantityInc: (() -> Unit),
             actionItemNameInc: (() -> Unit)){
    Column{
        TextField(
            value = sales.itemName,
            textStyle = TextStyle(color = Color.DarkGray),
            onValueChange = {
                actionChangeSales(Sales(itemName = it))
                actionItemNameInc.invoke()
            },
            label = { Text("Item name")}
        )

        Spacer(modifier = Modifier.height(16.dp))

        OutlinedTextField(
            value = roundQuantity(sales.quantitySold),
            textStyle = TextStyle(color = Color.DarkGray),
            onValueChange = {
                actionChangeSales(Sales(quantitySold = getDoubleFromEditText(it)))
                actionQuantityInc.invoke()
            },
            label = { Text("Quantity")},
            modifier = Modifier.width(120.dp)
        )
    }
}

Answer 1

作为一种解决方法，尝试用Box包装OutlinedTextField并在那里应用宽度修饰符：

            Box(modifier = Modifier.width(120.dp)) {
                OutlinedTextField(
                    value = "123456789",
                    textStyle = TextStyle(color = Color.DarkGray),
                    onValueChange = {},
                    label = { Text("Quantity") },
                )
            }

Answer 2

您必须再次将它们包裹起来Column。

伪代码如下

Column(
    horizontalAlignment = Alignment.CenterHorizontally,
    modifier = Modifiler.fillMaxWidth() // needed so it knows the full width to center the content within it
) {
    // This wraps your content and centers it
    
    Column( horizontalAlignment = Alignment.Start ){
        // This wraps and aligns the content to the left/start

        // place your content here
    }
}