JetPack Compose: Surface или Box не расширяются до фиксированной ширины в ландшафте, внутренний переполнение пользовател ⇐ Android

[Anonymous]

Я разрабатываю приложение для Android на основе JetPack. Поверхность или коробка, белый фон не расширяется, как и ожидалось, и элементы внутреннего пользовательского интерфейса (например, ряды с полями) переполняют белый фон. Ширина?

Код: Выделить всё

@Composable
fun DialogScreen(
text1: String,
text2: String,
savePassword: Boolean,
onSavePasswordChange: (Boolean) -> Unit,
onForgotPassword: () -> Unit,
onLeftButton: () -> Unit,
onRightButton: () -> Unit,
onClose: () ->  Unit,
) {
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center
) {
Surface(
modifier = Modifier
.width(608.dp)
.height(328.dp),
color = Color.White,
shape = RoundedCornerShape(16.dp)
) {
Box {
// Close button (top right)
IconButton(
onClick = onClose,
modifier = Modifier.align(Alignment.TopEnd).padding(12.dp)
) {
Icon(Icons.Default.Close, contentDescription = "close")
}
// Main UI
Column(
modifier = Modifier
.fillMaxSize()
.padding(start = 32.dp, end = 32.dp, top = 32.dp, bottom = 24.dp)
) {
Text(
text = "Dialog Title",
color = Color.Black,
fontSize = 21.sp,
modifier = Modifier.padding(bottom = 18.dp)
)

// Row1: label + field
Row(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.padding(bottom = 12.dp)
) {
Text(
text = "Label1",
modifier = Modifier.width(90.dp)
)
TextField(
value = text1,
onValueChange = {},
modifier = Modifier
.width(457.dp)
.height(40.dp)
)
}
// Row2: label + field
Row(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.padding(bottom = 10.dp)
) {
Text(
text = "Label2",
modifier = Modifier.width(90.dp)
)
TextField(
value = text2,
onValueChange = {},
modifier = Modifier
.width(457.dp)
.height(40.dp)
)
}
// Row3: Save password checkbox + forgot link
Row(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier
.padding(start = 90.dp, bottom = 8.dp)
.width(457.dp)
) {
Checkbox(
checked = savePassword,
onCheckedChange = onSavePasswordChange
)
Text(
text = "Save password",
fontSize = 13.sp,
color = Color.Gray,
)
Spacer(modifier = Modifier.width(18.dp))
Text(
text = "Forgot password?",
fontSize = 13.sp,
color = Color.Gray,
modifier = Modifier.clickable { onForgotPassword() }
)
}
Spacer(modifier = Modifier.weight(1f))
// Row4:  two buttons
Row(
horizontalArrangement = Arrangement.Center,
modifier = Modifier.fillMaxWidth()
) {
Button(
onClick = onLeftButton,
modifier = Modifier.width(180.dp).height(40.dp)
) {
Text("Left Button")
}
Spacer(modifier = Modifier.width(24.dp))
Button(
onClick = onRightButton,
modifier = Modifier.width(180.dp).height(40.dp)
) {
Text("Right Button")
}
}
}
}
}
}
}

Что я пробовал:

[*] Использование .width (608.dp) и .height (328.dp) для поверхности и/или коробки

[*] Использование. /> < /li>
Настройка фиксированной ширины для всех внутренних текстовых полей, строк и т. Д. < /p>
< /li>
Удаление ненужных родителей /гнездо в ландшафте. < /p>
Что я хочу: < /h2>

Белый диалог (фон (

Код: Выделить всё

Surface

) всегда быть 608.dp широко и содержать все внутреннее UI.

Нет переполнения, не выходя за белый фон. /> < /ol>

Подробнее здесь: https://stackoverflow.com/questions/796 ... dscape-inn