danvics/VerveDo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui): 优化界面在小屏幕下的显示效果

Browse source 
为对话框内容添加滚动以防遮挡
为顶部应用栏文本设置单行
优化单选对话框的实现方式
This commit is contained in:
Super12138 2025-02-07 08:52:17 +08:00
parent 746b663e9c
commit b5f327cacc
4 changed files with 57 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
app/src/main/kotlin/cn/super12138/todo/ui/components/Dialogs.kt
View file

@ -1,5 +1,8 @@
package cn.super12138.todo.ui.components
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.ErrorOutline
import androidx.compose.material3.AlertDialog
@ -103,7 +106,11 @@ fun BasicDialog(
AlertDialog(
icon = icon,
title = title,
text = text,
text = {
Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
text?.let { it() }
}
},
confirmButton = confirmButton,
dismissButton = dismissButton,
onDismissRequest = onDismissRequest,

1
app/src/main/kotlin/cn/super12138/todo/ui/pages/main/MainPage.kt
View file

@ -97,6 +97,7 @@ fun MainPage(
enter = fadeIn() + expandIn(),
exit = shrinkOut() + fadeOut()
) {
// TODO: 修复在滑动列表时FAB位移导致的动画不连贯
TodoFAB(
expanded = isExpanded,
onClick = {

5
app/src/main/kotlin/cn/super12138/todo/ui/pages/main/components/TodoTopAppBar.kt
View file

@ -29,6 +29,7 @@ import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalView
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import cn.super12138.todo.R
import cn.super12138.todo.utils.VibrationUtils
@ -74,7 +75,9 @@ fun TodoTopAppBar(
R.string.title_selected_count,
selectedTodoIds.size
)
}
},
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
},
actions = {

72
app/src/main/kotlin/cn/super12138/todo/ui/pages/settings/components/SettingsDialogs.kt
View file

@ -33,7 +33,6 @@ fun SettingsRadioDialog(
onDismiss: () -> Unit,
modifier: Modifier = Modifier,
) {
val view = LocalView.current
SettingsDialog(
visible = visible,
title = title,
@ -42,33 +41,15 @@ fun SettingsRadioDialog(
// Modifier.selectableGroup() 用来确保无障碍功能运行正确
Column(Modifier.selectableGroup()) {
options.forEach { option ->
Row(
Modifier
.fillMaxWidth()
.height(56.dp)
.selectable(
selected = option.id == selectedItemIndex,
onClick = {
selectedItemIndex = option.id
VibrationUtils.performHapticFeedback(view)
onSelect(option.id)
onDismiss()
},
role = Role.RadioButton
)
.padding(horizontal = 16.dp),
verticalAlignment = Alignment.CenterVertically
) {
RadioButton(
selected = option.id == selectedItemIndex,
onClick = null // 设置为 null 有利于屏幕阅读器
)
Text(
text = option.text,
style = MaterialTheme.typography.bodyLarge,
modifier = Modifier.padding(start = 16.dp)
)
}
RadioItem(
selected = option.id == selectedItemIndex,
text = option.text,
onClick = {
selectedItemIndex = option.id
onSelect(option.id)
onDismiss()
}
)
}
}
},
@ -77,6 +58,41 @@ fun SettingsRadioDialog(
)
}
@Composable
fun RadioItem(
selected: Boolean,
text: String,
onClick: () -> Unit,
modifier: Modifier = Modifier
) {
val view = LocalView.current
Row(
Modifier
.fillMaxWidth()
.height(56.dp)
.selectable(
selected = selected,
onClick = {
VibrationUtils.performHapticFeedback(view)
onClick()
},
role = Role.RadioButton
),
// .padding(horizontal = TodoDefaults.screenPadding),
verticalAlignment = Alignment.CenterVertically
) {
RadioButton(
selected = selected,
onClick = null // 设置为 null 有利于屏幕阅读器
)
Text(
text = text,
style = MaterialTheme.typography.bodyLarge,
modifier = Modifier.padding(start = 16.dp)
)
}
}
data class SettingsRadioOptions(
val id: Int,
val text: String,