Как предотвратить перемещение раскрывающегося списка ⇐ Android

[Anonymous]

problem gifКак вы можете видеть на гифке, когда я раскрываюсь, представление ниже выталкивается.
Я хочу, чтобы раскрывающийся список находился над представлением ниже, но не выталкивался. Как я могу это сделать?
В частности, мне бы хотелось, чтобы анимация была такой же плавной, как сейчас.
Я пробовал использовать DropdownMenu и PopUp, но не смог добиться желаемых результатов.
В частности, использование PopUp, казалось, работало, но потом не получилось.
@Composable
fun RewardTypeDropdown(
modifier: Modifier = Modifier,
selectedText: String,
onSelectedChange: (String) -> Unit
) {
var expanded by remember { mutableStateOf(false) }

val options = listOf(
"선착순",
"직접 선정 (1인)",
"순위 선정 (다수)"
)

Column(
modifier = modifier
.fillMaxWidth()
.clip(RoundedCornerShape(12.dp))
.background(Color(0xFF2C2C2C))
.animateContentSize(
animationSpec = spring(
dampingRatio = Spring.DampingRatioNoBouncy,
stiffness = Spring.StiffnessMediumLow
)
)
) {
Row(
modifier = Modifier
.fillMaxWidth()
.clickable { expanded = !expanded }
.padding(horizontal = 12.dp, vertical = 10.dp),
verticalAlignment = Alignment.CenterVertically
) {
Text(
text = selectedText,
modifier = Modifier.weight(1f),
style = MaterialTheme.typography.bodyMedium,
color = Color.LightGray
)

Icon(
painter = painterResource(
if (expanded) R.drawable.ic_launcher_background
else R.drawable.ic_launcher_background
),
contentDescription = null,
tint = Color.LightGray
)
}

if (expanded) {
Column(
modifier = Modifier
.fillMaxWidth()
) {
options.forEach { option ->
Row(
modifier = Modifier
.fillMaxWidth()
.clickable {
onSelectedChange(option)
expanded = false
}
.padding(horizontal = 16.dp, vertical = 12.dp),
verticalAlignment = Alignment.CenterVertically
) {
Text(
text = option,
style = MaterialTheme.typography.bodyMedium,
color = if (option == selectedText) {
Color.White
} else {
Color.LightGray
}
)
}
}
}
}
}
}

@Composable
fun CreateDemandScreen(
modifier: Modifier = Modifier,
padding: PaddingValues,
onPopBackStack: () -> Unit
) {
var isContentPublic by remember { mutableStateOf(false) }
var rewardType by remember { mutableStateOf("선착순") }

var title by remember { mutableStateOf("") }
var content by remember { mutableStateOf("") }
var tag by remember { mutableStateOf("") }

Column(
modifier = modifier
.fillMaxSize()
.background(MaterialTheme.colorScheme.background)
.padding(padding)
.verticalScroll(rememberScrollState())
) {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(start = 16.dp, end = 16.dp, top = 10.dp)
) {
Row(
modifier = Modifier
.fillMaxWidth()
.height(48.dp),
verticalAlignment = Alignment.CenterVertically
) {
Icon(
painter = painterResource(id = R.drawable.ic_launcher_background),
contentDescription = null,
modifier = Modifier
.size(24.dp)
.clickable { onPopBackStack() }
)
Spacer(Modifier.width(12.dp))
Text(
text = "디맨드 작성",
style = MaterialTheme.typography.titleMedium,
fontWeight = FontWeight.Bold
)
}

Spacer(Modifier.height(32.dp))
}

OutlinedTextField(
value = title,
onValueChange = { title = it },
singleLine = false,
placeholder = { Text("제목을 입력해주세요.") },
modifier = Modifier.fillMaxWidth()
)

HorizontalDivider(
modifier = Modifier.height(1.dp),
color = Color.DarkGray
)

OutlinedTextField(
value = content,
onValueChange = { content = it },
singleLine = false,
placeholder = { Text("요청 사항들을 자세히 입력해주세요.") },
modifier = Modifier
.fillMaxWidth()
.heightIn(min = 120.dp)
)

HorizontalDivider(
modifier = Modifier.height(1.dp),
color = Color.DarkGray
)

Row(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(16.dp)
) {
Icon(
modifier = Modifier
.size(24.dp)
.clickable {},
painter = painterResource(id = R.drawable.ic_launcher_background),
contentDescription = null
)
Icon(
modifier = Modifier
.size(24.dp)
.clickable {},
painter = painterResource(id = R.drawable.ic_launcher_background),
contentDescription = null
)
}

HorizontalDivider(
modifier = Modifier.height(1.dp),
color = Color.DarkGray
)

Column(
modifier = Modifier
.fillMaxWidth()
.padding(start = 16.dp, end = 16.dp)
) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(top = 20.dp, bottom = 14.dp),
verticalAlignment = Alignment.CenterVertically
) {
Text(
text = "태그",
modifier = Modifier.padding(end = 10.dp),
color = MaterialTheme.colorScheme.onBackground,
style = MaterialTheme.typography.bodyMedium,
fontWeight = FontWeight.Bold
)
Text(
text = "*",
modifier = Modifier.padding(end = 2.dp),
color = MaterialTheme.colorScheme.primary,
style = MaterialTheme.typography.bodySmall
)
Text(
text = "태그는 최대 4개까지 가능합니다.",
color = Color.Gray,
style = MaterialTheme.typography.bodySmall
)
}

OutlinedTextField(
value = tag,
onValueChange = { tag = it },
singleLine = false,
placeholder = { Text("태그 입력") },
modifier = Modifier.fillMaxWidth()
)

Row(
modifier = Modifier
.fillMaxWidth()
.padding(top = 14.dp, bottom = 20.dp),
verticalAlignment = Alignment.CenterVertically,
) {
Text(
text = "마감 기한",
color = MaterialTheme.colorScheme.onBackground,
style = MaterialTheme.typography.bodyMedium,
fontWeight = FontWeight.Bold
)

Spacer(modifier = Modifier.weight(1f))

Icon(
modifier = Modifier
.padding(end = 4.dp)
.size(24.dp)
.clickable {},
painter = painterResource(id = R.drawable.ic_launcher_background),
contentDescription = null
)
}

Column(
modifier = Modifier
.fillMaxWidth()
.padding(top = 14.dp, bottom = 20.dp)
) {
Text(
text = "콘텐츠 공개 여부",
color = MaterialTheme.colorScheme.onBackground,
style = MaterialTheme.typography.bodyMedium,
fontWeight = FontWeight.Bold
)

Spacer(Modifier.height(16.dp))

Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
Button(
modifier = Modifier.weight(1f),
onClick = { isContentPublic = false },
colors = ButtonDefaults.buttonColors(
containerColor = if (!isContentPublic)
MaterialTheme.colorScheme.primary
else
Color.DarkGray
)
) {
Text("비공개", color = Color.White)
}
Button(
modifier = Modifier.weight(1f),
onClick = { isContentPublic = true },
colors = ButtonDefaults.buttonColors(
containerColor = if (isContentPublic)
MaterialTheme.colorScheme.primary
else
Color.DarkGray
)
) {
Text("공개", color = Color.White)
}
}

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

Text(
text = "리워드 선정 기준",
color = MaterialTheme.colorScheme.onBackground,
style = MaterialTheme.typography.bodyMedium,
fontWeight = FontWeight.Bold
)

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

Test(
modifier = Modifier.fillMaxWidth(),
selectedText = rewardType,
onSelectedChange = { rewardType = it }
)

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

Row(
modifier = Modifier
.fillMaxWidth()
.padding(top = 14.dp, bottom = 16.dp),
verticalAlignment = Alignment.CenterVertically,
) {
Text(
text = "리워드 금액",
modifier = Modifier.padding(end = 10.dp),
color = MaterialTheme.colorScheme.onBackground,
style = MaterialTheme.typography.bodyMedium,
fontWeight = FontWeight.Bold
)
Text(
text = "*",
modifier = Modifier.padding(end = 2.dp),
color = MaterialTheme.colorScheme.primary,
style = MaterialTheme.typography.bodySmall
)
Text(
text = "10단위로 리워드 지급이 가능합니다.",
color = Color.Gray,
style = MaterialTheme.typography.bodySmall
)
}

Row(
modifier = Modifier.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically,
) {
Button(onClick = {}) {
Icon(
painter = painterResource(id = R.drawable.ic_launcher_background),
contentDescription = null
)
}
Spacer(Modifier.width(8.dp))
Button(onClick = {}) {
Icon(
painter = painterResource(id = R.drawable.ic_launcher_background),
contentDescription = null
)
}
}

Spacer(Modifier.height(20.dp))
}
}
}
}



Подробнее здесь: https://stackoverflow.com/questions/798 ... ing-pushed