[优化] 优化界面显示

This commit is contained in:
HapeLee
2026-01-21 01:34:13 +08:00
parent 7f0a3be9ad
commit c68f543299
15 changed files with 121 additions and 71 deletions
@@ -71,7 +71,7 @@ import io.legado.app.ui.widget.components.EmptyMessageView
import io.legado.app.ui.widget.components.SearchBarSection import io.legado.app.ui.widget.components.SearchBarSection
import io.legado.app.ui.widget.components.lazylist.FastScrollLazyColumn import io.legado.app.ui.widget.components.lazylist.FastScrollLazyColumn
import io.legado.app.ui.widget.components.lazylist.Scroller import io.legado.app.ui.widget.components.lazylist.Scroller
import io.legado.app.ui.widget.components.modalBottomSheet.GlobalModalBottomSheet import io.legado.app.ui.widget.components.modalBottomSheet.GlassModalBottomSheet
import org.koin.androidx.compose.koinViewModel import org.koin.androidx.compose.koinViewModel
@OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class, @OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class,
@@ -390,7 +390,7 @@ fun BookmarkEditSheet(
var bookText by remember { mutableStateOf(bookmark.bookText) } var bookText by remember { mutableStateOf(bookmark.bookText) }
var content by remember { mutableStateOf(bookmark.content) } var content by remember { mutableStateOf(bookmark.content) }
GlobalModalBottomSheet( GlassModalBottomSheet(
onDismissRequest = onDismiss, onDismissRequest = onDismiss,
sheetState = sheetState sheetState = sheetState
) { ) {
@@ -97,7 +97,7 @@ import io.legado.app.ui.widget.components.AnimatedTextLine
import io.legado.app.ui.widget.components.Cover import io.legado.app.ui.widget.components.Cover
import io.legado.app.ui.widget.components.SearchBarSection import io.legado.app.ui.widget.components.SearchBarSection
import io.legado.app.ui.widget.components.TextCard import io.legado.app.ui.widget.components.TextCard
import io.legado.app.ui.widget.components.modalBottomSheet.GlobalModalBottomSheet import io.legado.app.ui.widget.components.modalBottomSheet.GlassModalBottomSheet
import kotlinx.coroutines.delay import kotlinx.coroutines.delay
import kotlinx.coroutines.flow.Flow import kotlinx.coroutines.flow.Flow
import org.koin.androidx.compose.koinViewModel import org.koin.androidx.compose.koinViewModel
@@ -181,7 +181,7 @@ fun ExploreShowScreen(
skipPartiallyExpanded = true skipPartiallyExpanded = true
) )
GlobalModalBottomSheet( GlassModalBottomSheet(
sheetState = sheetState, sheetState = sheetState,
modifier = Modifier modifier = Modifier
.padding(16.dp), .padding(16.dp),
@@ -242,7 +242,7 @@ fun ExploreShowScreen(
} }
) )
GlobalModalBottomSheet( GlassModalBottomSheet(
onDismissRequest = { showKindSheet = false }, onDismissRequest = { showKindSheet = false },
sheetState = sheetState, sheetState = sheetState,
modifier = Modifier modifier = Modifier
@@ -21,7 +21,6 @@ import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.ModalBottomSheet
import androidx.compose.material3.OutlinedTextField import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarDefaults import androidx.compose.material3.TopAppBarDefaults
@@ -39,6 +38,7 @@ import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import io.legado.app.R import io.legado.app.R
import io.legado.app.data.entities.DictRule import io.legado.app.data.entities.DictRule
import io.legado.app.ui.widget.components.modalBottomSheet.GlassModalBottomSheet
import kotlinx.coroutines.launch import kotlinx.coroutines.launch
@OptIn(ExperimentalMaterial3Api::class) @OptIn(ExperimentalMaterial3Api::class)
@@ -58,7 +58,7 @@ fun DictRuleEditSheet(
var showRule by remember(rule) { mutableStateOf(rule?.showRule ?: "") } var showRule by remember(rule) { mutableStateOf(rule?.showRule ?: "") }
var showMenu by remember { mutableStateOf(false) } var showMenu by remember { mutableStateOf(false) }
ModalBottomSheet( GlassModalBottomSheet(
onDismissRequest = onDismissRequest, onDismissRequest = onDismissRequest,
sheetState = sheetState, sheetState = sheetState,
) { ) {
@@ -11,7 +11,6 @@ import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Check import androidx.compose.material.icons.filled.Check
import androidx.compose.material.icons.filled.Delete import androidx.compose.material.icons.filled.Delete
import androidx.compose.material.icons.filled.Edit import androidx.compose.material.icons.filled.Edit
import androidx.compose.material3.Card
import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton import androidx.compose.material3.IconButton
@@ -30,7 +29,8 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import io.legado.app.R import io.legado.app.R
import io.legado.app.ui.widget.components.modalBottomSheet.GlobalModalBottomSheet import io.legado.app.ui.widget.components.GlassCard
import io.legado.app.ui.widget.components.modalBottomSheet.GlassModalBottomSheet
@OptIn(ExperimentalMaterial3Api::class) @OptIn(ExperimentalMaterial3Api::class)
@Composable @Composable
@@ -43,7 +43,7 @@ fun GroupManageBottomSheet(
var editingGroup by remember { mutableStateOf<String?>(null) } var editingGroup by remember { mutableStateOf<String?>(null) }
var updatedGroupName by remember { mutableStateOf("") } var updatedGroupName by remember { mutableStateOf("") }
GlobalModalBottomSheet( GlassModalBottomSheet(
onDismissRequest = onDismissRequest, onDismissRequest = onDismissRequest,
sheetState = sheetState sheetState = sheetState
) { ) {
@@ -60,7 +60,7 @@ fun GroupManageBottomSheet(
) )
LazyColumn(verticalArrangement = Arrangement.spacedBy(8.dp)) { LazyColumn(verticalArrangement = Arrangement.spacedBy(8.dp)) {
items(groups) { group -> items(groups) { group ->
Card(modifier = Modifier.fillMaxWidth()) { GlassCard(modifier = Modifier.fillMaxWidth()) {
if (editingGroup == group) { if (editingGroup == group) {
Row( Row(
modifier = Modifier modifier = Modifier
@@ -20,15 +20,13 @@ fun AppTheme(
val isPureBlack by ThemeState.isPureBlack.collectAsState() val isPureBlack by ThemeState.isPureBlack.collectAsState()
val hasImageBg by ThemeState.hasImageBg.collectAsState() val hasImageBg by ThemeState.hasImageBg.collectAsState()
val paletteStyle by ThemeState.paletteStyle.collectAsState() val paletteStyle by ThemeState.paletteStyle.collectAsState()
val opacity by ThemeState.containerOpacity.collectAsState()
val colorScheme = ThemeManager.getColorScheme( val colorScheme = ThemeManager.getColorScheme(
mode = appThemeMode, mode = appThemeMode,
darkTheme = darkTheme, darkTheme = darkTheme,
isAmoled = isPureBlack, isAmoled = isPureBlack,
isImageBg = hasImageBg, isImageBg = hasImageBg,
paletteStyle = paletteStyle, paletteStyle = paletteStyle
opacity = opacity
) )
MaterialExpressiveTheme( MaterialExpressiveTheme(
@@ -47,8 +47,7 @@ object ThemeManager {
isAmoled: Boolean, isAmoled: Boolean,
isImageBg: Boolean, isImageBg: Boolean,
paletteStyle: String?, paletteStyle: String?,
forceOpaque: Boolean = false, forceOpaque: Boolean = false
opacity: Int = 100
): ColorScheme { ): ColorScheme {
val context = LocalContext.current val context = LocalContext.current
val style = resolvePaletteStyle(paletteStyle) val style = resolvePaletteStyle(paletteStyle)
@@ -93,18 +92,6 @@ object ThemeManager {
) )
} }
val alpha = opacity / 100f return scheme
return if (opacity < 100 && !forceOpaque) {
scheme.copy(
surfaceContainerLowest = scheme.surfaceContainerLowest.copy(alpha = alpha),
surfaceContainerLow = scheme.surfaceContainerLow.copy(alpha = alpha),
surfaceContainer = scheme.surfaceContainer.copy(alpha = alpha),
surfaceContainerHigh = scheme.surfaceContainerHigh.copy(alpha = alpha),
surfaceContainerHighest = scheme.surfaceContainerHighest.copy(alpha = alpha),
)
} else {
scheme
}
} }
} }
@@ -2,8 +2,20 @@ package io.legado.app.ui.widget.components
import androidx.compose.animation.animateContentSize import androidx.compose.animation.animateContentSize
import androidx.compose.foundation.BorderStroke import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.layout.* import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.lazy.grid.* import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.grid.items
import androidx.compose.foundation.pager.HorizontalPager import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.CircleShape
@@ -11,17 +23,28 @@ import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material.icons.automirrored.filled.ArrowForward import androidx.compose.material.icons.automirrored.filled.ArrowForward
import androidx.compose.material.icons.filled.Delete import androidx.compose.material.icons.filled.Delete
import androidx.compose.material3.* import androidx.compose.material3.Button
import androidx.compose.runtime.* import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.FilledTonalIconButton
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.derivedStateOf
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import kotlinx.coroutines.launch import kotlinx.coroutines.launch
import java.time.* import java.time.DayOfWeek
import java.time.LocalDate
import java.time.format.DateTimeFormatter import java.time.format.DateTimeFormatter
import java.time.format.TextStyle import java.time.format.TextStyle
import java.util.* import java.util.Locale
const val START_PAGE_OFFSET = 100 const val START_PAGE_OFFSET = 100
@@ -55,12 +78,14 @@ fun Calendar(
} }
} }
Card( GlassCard(
modifier = modifier.fillMaxWidth(), modifier = modifier.fillMaxWidth(),
shape = MaterialTheme.shapes.medium, shape = MaterialTheme.shapes.medium,
colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surfaceContainer) color = MaterialTheme.colorScheme.surfaceContainer
) { ) {
Column(modifier = Modifier.padding(vertical = 12.dp).animateContentSize()) { Column(modifier = Modifier
.padding(vertical = 12.dp)
.animateContentSize()) {
MonthNavigation( MonthNavigation(
currentMonth = currentMonth, currentMonth = currentMonth,
selectedDate = selectedDate, selectedDate = selectedDate,
@@ -145,7 +170,9 @@ fun MonthNavigation(
onClearClick: (() -> Unit)? onClearClick: (() -> Unit)?
) { ) {
Row( Row(
modifier = Modifier.fillMaxWidth().padding(horizontal = 12.dp), modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 12.dp),
horizontalArrangement = Arrangement.SpaceBetween, horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically verticalAlignment = Alignment.CenterVertically
) { ) {
@@ -246,7 +273,9 @@ fun DateItem(
Button( Button(
onClick = onClick, onClick = onClick,
modifier = Modifier.size(36.dp).padding(4.dp), modifier = Modifier
.size(36.dp)
.padding(4.dp),
shape = CircleShape, shape = CircleShape,
colors = buttonColors, colors = buttonColors,
border = borderStroke, border = borderStroke,
@@ -0,0 +1,52 @@
package io.legado.app.ui.widget.components
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.CardElevation
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Shape
import io.legado.app.ui.theme.ThemeState
@Composable
fun GlassCard(
modifier: Modifier = Modifier,
onClick: (() -> Unit)? = null,
shape: Shape = CardDefaults.shape,
color: Color = MaterialTheme.colorScheme.surface,
elevation: CardElevation = CardDefaults.cardElevation(),
border: BorderStroke? = null,
content: @Composable ColumnScope.() -> Unit
) {
val opacity by ThemeState.containerOpacity.collectAsState()
val cardColors = CardDefaults.cardColors(
containerColor = color.copy(alpha = opacity / 100f)
)
if (onClick != null) {
Card(
onClick = onClick,
modifier = modifier,
shape = shape,
colors = cardColors,
elevation = elevation,
border = border,
content = content
)
} else {
Card(
modifier = modifier,
shape = shape,
colors = cardColors,
elevation = elevation,
border = border,
content = content
)
}
}
@@ -20,8 +20,6 @@ import androidx.compose.foundation.lazy.LazyItemScope
import androidx.compose.material.icons.Icons import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Edit import androidx.compose.material.icons.filled.Edit
import androidx.compose.material.icons.filled.MoreVert import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Checkbox import androidx.compose.material3.Checkbox
import androidx.compose.material3.DropdownMenu import androidx.compose.material3.DropdownMenu
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
@@ -73,11 +71,11 @@ fun SelectionItemCard(
label = "CardColor" label = "CardColor"
) )
Card( GlassCard(
onClick = onToggleSelection, onClick = onToggleSelection,
modifier = modifier.fillMaxWidth(), modifier = modifier.fillMaxWidth(),
shape = MaterialTheme.shapes.medium, shape = MaterialTheme.shapes.medium,
colors = CardDefaults.cardColors(containerColor = containerColor) color = containerColor
) { ) {
ListItem( ListItem(
modifier = Modifier.animateContentSize(), modifier = Modifier.animateContentSize(),
@@ -10,11 +10,9 @@ import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ChevronRight import androidx.compose.material.icons.filled.ChevronRight
import androidx.compose.material.icons.filled.Info import androidx.compose.material.icons.filled.Info
import androidx.compose.material3.Card
import androidx.compose.material3.DropdownMenu import androidx.compose.material3.DropdownMenu
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.ListItem import androidx.compose.material3.ListItem
import androidx.compose.material3.ListItemDefaults
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
@@ -103,11 +101,12 @@ fun SettingItem(
) { ) {
var showMenu by remember { mutableStateOf(false) } var showMenu by remember { mutableStateOf(false) }
Card( GlassCard(
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth()
.animateContentSize(), .animateContentSize(),
shape = RoundedCornerShape(8.dp) shape = RoundedCornerShape(8.dp),
color = MaterialTheme.colorScheme.surfaceContainerLow,
) { ) {
ListItem( ListItem(
modifier = modifier modifier = modifier
@@ -162,10 +161,7 @@ fun SettingItem(
} }
} }
}, },
trailingContent = trailingContent, trailingContent = trailingContent
colors = ListItemDefaults.colors(
containerColor = MaterialTheme.colorScheme.surfaceContainerLow
)
) )
if (dropdownMenu != null) { if (dropdownMenu != null) {
@@ -1,19 +1,15 @@
package io.legado.app.ui.widget.components package io.legado.app.ui.widget.components
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ColumnScope import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
/** /**
@@ -39,11 +35,9 @@ fun SplicedColumnGroup(
) )
} }
Card( GlassCard(
shape = RoundedCornerShape(16.dp), shape = RoundedCornerShape(16.dp),
colors = CardDefaults.cardColors( color = MaterialTheme.colorScheme.surface,
containerColor = MaterialTheme.colorScheme.surface
),
modifier = Modifier.fillMaxWidth() modifier = Modifier.fillMaxWidth()
) { ) {
Column( Column(
@@ -6,8 +6,6 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.MaterialTheme.colorScheme import androidx.compose.material3.MaterialTheme.colorScheme
@@ -47,12 +45,10 @@ fun TextCard(
textStyle: TextStyle = MaterialTheme.typography.labelSmall, textStyle: TextStyle = MaterialTheme.typography.labelSmall,
bold: Boolean = true, bold: Boolean = true,
) { ) {
Card( GlassCard(
modifier = modifier, modifier = modifier,
shape = RoundedCornerShape(cornerRadius), shape = RoundedCornerShape(cornerRadius),
colors = CardDefaults.cardColors( color = backgroundColor
containerColor = backgroundColor
),
) { ) {
Row( Row(
modifier = Modifier.padding( modifier = Modifier.padding(
@@ -29,7 +29,7 @@ import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import io.legado.app.R import io.legado.app.R
import io.legado.app.ui.widget.components.modalBottomSheet.GlobalModalBottomSheet import io.legado.app.ui.widget.components.modalBottomSheet.GlassModalBottomSheet
enum class FilePickerSheetMode { enum class FilePickerSheetMode {
DIR, FILE, EXPORT DIR, FILE, EXPORT
@@ -46,7 +46,7 @@ fun FilePickerSheet(
onUpload: (() -> Unit)? = null, onUpload: (() -> Unit)? = null,
allowExtensions: Array<String>? = null, allowExtensions: Array<String>? = null,
) { ) {
GlobalModalBottomSheet( GlassModalBottomSheet(
onDismissRequest = onDismissRequest, onDismissRequest = onDismissRequest,
sheetState = sheetState, sheetState = sheetState,
containerColor = { it.surface } containerColor = { it.surface }
@@ -61,7 +61,7 @@ import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import io.legado.app.R import io.legado.app.R
import io.legado.app.ui.widget.components.AnimatedText import io.legado.app.ui.widget.components.AnimatedText
import io.legado.app.ui.widget.components.modalBottomSheet.GlobalModalBottomSheet import io.legado.app.ui.widget.components.modalBottomSheet.GlassModalBottomSheet
import kotlinx.coroutines.launch import kotlinx.coroutines.launch
@Composable @Composable
@@ -137,7 +137,7 @@ fun <T> BatchImportDialog(
val selectedCount = importState.items.count { it.isSelected } val selectedCount = importState.items.count { it.isSelected }
val totalCount = importState.items.size val totalCount = importState.items.size
GlobalModalBottomSheet( GlassModalBottomSheet(
onDismissRequest = onDismissRequest, onDismissRequest = onDismissRequest,
sheetState = sheetState, sheetState = sheetState,
containerColor = { it.surfaceContainer } containerColor = { it.surfaceContainer }
@@ -24,7 +24,7 @@ import io.legado.app.ui.theme.ThemeState
@OptIn(ExperimentalMaterial3Api::class, ExperimentalMaterial3ExpressiveApi::class) @OptIn(ExperimentalMaterial3Api::class, ExperimentalMaterial3ExpressiveApi::class)
@Composable @Composable
fun GlobalModalBottomSheet( fun GlassModalBottomSheet(
onDismissRequest: () -> Unit, onDismissRequest: () -> Unit,
modifier: Modifier = Modifier, modifier: Modifier = Modifier,
sheetState: SheetState = rememberModalBottomSheetState(), sheetState: SheetState = rememberModalBottomSheetState(),