fix(ui): 重构排序对话框布局,解决水平溢出挤压错位问题

This commit is contained in:
xfy 2026-07-23 15:09:52 +08:00
parent 80e4e5e86c
commit de1e3178f6

View File

@ -562,65 +562,140 @@ private fun SortDialog(
) { ) {
AlertDialog( AlertDialog(
onDismissRequest = onDismiss, onDismissRequest = onDismiss,
title = { Text("排序方式", fontWeight = FontWeight.Bold) }, title = {
Text(
text = "排序方式",
style = MaterialTheme.typography.titleLarge.copy(fontWeight = FontWeight.Bold)
)
},
text = { text = {
Column(verticalArrangement = Arrangement.spacedBy(4.dp)) { Column(verticalArrangement = Arrangement.spacedBy(16.dp)) {
sortFields.forEach { (field, label) -> // 1. 排序字段选择
val isCurrentField = currentSortOrder.field == field Column(verticalArrangement = Arrangement.spacedBy(6.dp)) {
Row( Text(
modifier = Modifier text = "排序依据",
.fillMaxWidth() style = MaterialTheme.typography.labelMedium.copy(fontWeight = FontWeight.Bold),
.clip(RoundedCornerShape(12.dp)) color = MaterialTheme.colorScheme.primary
.background( )
if (isCurrentField) MaterialTheme.colorScheme.primaryContainer.copy(alpha = 0.4f) sortFields.forEach { (field, label) ->
else Color.Transparent val isSelected = currentSortOrder.field == field
) Surface(
.padding(horizontal = 12.dp, vertical = 8.dp), onClick = {
horizontalArrangement = Arrangement.SpaceBetween, onSelectSort(currentSortOrder.copy(field = field))
verticalAlignment = Alignment.CenterVertically },
) { shape = RoundedCornerShape(12.dp),
Text( color = if (isSelected) MaterialTheme.colorScheme.primaryContainer.copy(alpha = 0.6f)
text = label, else MaterialTheme.colorScheme.surfaceContainerLow,
style = MaterialTheme.typography.bodyLarge, modifier = Modifier.fillMaxWidth()
fontWeight = if (isCurrentField) FontWeight.Bold else FontWeight.Normal ) {
) Row(
Row { modifier = Modifier.padding(horizontal = 14.dp, vertical = 12.dp),
FilterChip( horizontalArrangement = Arrangement.SpaceBetween,
selected = isCurrentField && !currentSortOrder.ascending, verticalAlignment = Alignment.CenterVertically
onClick = { onSelectSort(RecordSortOrder(field, ascending = false)) }, ) {
label = { Text("最新优先") }, Text(
leadingIcon = if (isCurrentField && !currentSortOrder.ascending) { text = label,
{ Icon(Icons.Filled.Check, contentDescription = null, modifier = Modifier.size(14.dp)) } style = MaterialTheme.typography.bodyLarge,
} else null, fontWeight = if (isSelected) FontWeight.Bold else FontWeight.Normal,
colors = FilterChipDefaults.filterChipColors( color = if (isSelected) MaterialTheme.colorScheme.onPrimaryContainer
selectedContainerColor = MaterialTheme.colorScheme.primary, else MaterialTheme.colorScheme.onSurface
selectedLabelColor = MaterialTheme.colorScheme.onPrimary
) )
) if (isSelected) {
Spacer(modifier = Modifier.width(6.dp)) Icon(
FilterChip( imageVector = Icons.Filled.Check,
selected = isCurrentField && currentSortOrder.ascending, contentDescription = "已选择",
onClick = { onSelectSort(RecordSortOrder(field, ascending = true)) }, tint = MaterialTheme.colorScheme.primary,
label = { Text("最早优先") }, modifier = Modifier.size(18.dp)
leadingIcon = if (isCurrentField && currentSortOrder.ascending) { )
{ Icon(Icons.Filled.Check, contentDescription = null, modifier = Modifier.size(14.dp)) } }
} else null, }
colors = FilterChipDefaults.filterChipColors(
selectedContainerColor = MaterialTheme.colorScheme.primary,
selectedLabelColor = MaterialTheme.colorScheme.onPrimary
)
)
} }
} }
} }
// 2. 排序方向选择
Column(verticalArrangement = Arrangement.spacedBy(6.dp)) {
Text(
text = "排序顺序",
style = MaterialTheme.typography.labelMedium.copy(fontWeight = FontWeight.Bold),
color = MaterialTheme.colorScheme.primary
)
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
SortOrderDirectionOption(
text = "最新优先",
subtitle = "从新到旧",
icon = Icons.Filled.ArrowDownward,
isSelected = !currentSortOrder.ascending,
onClick = { onSelectSort(currentSortOrder.copy(ascending = false)) },
modifier = Modifier.weight(1f)
)
SortOrderDirectionOption(
text = "最早优先",
subtitle = "从旧到新",
icon = Icons.Filled.ArrowUpward,
isSelected = currentSortOrder.ascending,
onClick = { onSelectSort(currentSortOrder.copy(ascending = true)) },
modifier = Modifier.weight(1f)
)
}
}
} }
}, },
confirmButton = { confirmButton = {
TextButton(onClick = onDismiss) { Text("关闭") } TextButton(onClick = onDismiss) {
Text("完成", fontWeight = FontWeight.Bold)
}
} }
) )
} }
/** 排序方向单选 Chip 卡片。 */
@Composable
private fun SortOrderDirectionOption(
text: String,
subtitle: String,
icon: ImageVector,
isSelected: Boolean,
onClick: () -> Unit,
modifier: Modifier = Modifier
) {
Surface(
onClick = onClick,
shape = RoundedCornerShape(12.dp),
color = if (isSelected) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.surfaceContainerLow,
contentColor = if (isSelected) MaterialTheme.colorScheme.onPrimary else MaterialTheme.colorScheme.onSurface,
border = if (isSelected) null else BorderStroke(1.dp, MaterialTheme.colorScheme.outlineVariant.copy(alpha = 0.5f)),
modifier = modifier
) {
Column(
modifier = Modifier.padding(horizontal = 10.dp, vertical = 10.dp),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Row(verticalAlignment = Alignment.CenterVertically) {
Icon(
imageVector = icon,
contentDescription = null,
modifier = Modifier.size(14.dp)
)
Spacer(modifier = Modifier.width(4.dp))
Text(
text = text,
style = MaterialTheme.typography.labelLarge.copy(fontWeight = FontWeight.Bold)
)
}
Text(
text = subtitle,
style = MaterialTheme.typography.labelSmall,
color = if (isSelected) MaterialTheme.colorScheme.onPrimary.copy(alpha = 0.8f)
else MaterialTheme.colorScheme.onSurfaceVariant
)
}
}
}
@Composable @Composable
private fun RecordGrid( private fun RecordGrid(
records: List<DateRecord>, records: List<DateRecord>,