Выравнивание текстового поля с измененным размером в Jetpack Compose

Question

У меня проблема с выравниванием измененного размера в Jetpack Composeдля рабочего стола. Когда я изменяю ширину, 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

В качестве обходного пути попробуйте обернуть OutlinedTextField с помощью Box и применить к нему модификатор ширины :

                  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
    }
}