feat: 页眉页脚的间距设置移到信息,信息改成dialog形式

This commit is contained in:
fansangg
2026-06-14 02:46:13 +08:00
parent 242fba70e8
commit b5bb7ed77e
6 changed files with 196 additions and 148 deletions
@@ -40,6 +40,7 @@ sealed interface ReadBookMenuRoute {
data object ReadAloud : ReadBookMenuRoute
data object AutoRead : ReadBookMenuRoute
data object PaddingConfig : ReadBookMenuRoute
data object HeaderFooterConfig : ReadBookMenuRoute
data class Bookmark(val bookmark: io.legado.app.data.entities.Bookmark) : ReadBookMenuRoute
}
@@ -139,6 +139,7 @@ import io.legado.app.help.config.ReadStyleResolver
import io.legado.app.ui.animation.DampedDragAnimation
import io.legado.app.ui.animation.InteractiveHighlight
import io.legado.app.ui.book.read.sheet.AutoReadContent
import io.legado.app.ui.book.read.sheet.HeaderFooterPage
import io.legado.app.ui.book.read.sheet.PaddingConfigContent
import io.legado.app.ui.book.read.sheet.ReadAloudContent
import io.legado.app.ui.book.read.sheet.ReadMenuButtonInfo
@@ -186,7 +187,7 @@ fun ReadBookMenuBar(
} else {
ReadBookMenuContent.Route(currentRoute)
}
val dialogLikeRoute = currentRoute == ReadBookMenuRoute.PaddingConfig
val dialogLikeRoute = currentRoute == ReadBookMenuRoute.PaddingConfig || currentRoute == ReadBookMenuRoute.HeaderFooterConfig
var readStylePage by remember { mutableIntStateOf(0) }
LaunchedEffect(currentRoute) {
if (currentRoute != ReadBookMenuRoute.ReadStyle) {
@@ -392,7 +393,7 @@ private fun ReadBookMenuSurface(
is ReadBookMenuContent.Route -> contentTarget.route
}
val expanded = route != ReadBookMenuRoute.Main
val dialogLikeRoute = route == ReadBookMenuRoute.PaddingConfig
val dialogLikeRoute = route == ReadBookMenuRoute.PaddingConfig || route == ReadBookMenuRoute.HeaderFooterConfig
val density = LocalDensity.current
val windowSize = LocalWindowInfo.current.containerSize
var surfaceHeightPx by remember { mutableIntStateOf(0) }
@@ -400,18 +401,6 @@ private fun ReadBookMenuSurface(
targetValue = if (dialogLikeRoute) 1f else 0f,
label = "ReadBookMenuMorph",
)
val headerFooterLift by animateDpAsState(
targetValue = if (route == ReadBookMenuRoute.ReadStyle && readStylePage == 2) {
72.dp
} else {
0.dp
},
animationSpec = tween(
durationMillis = 280,
easing = LinearOutSlowInEasing,
),
label = "ReadBookMenuHeaderFooterLift",
)
val maxHeight = with(density) {
windowSize.height.toDp() * 0.64f
}
@@ -518,8 +507,7 @@ private fun ReadBookMenuSurface(
.onSizeChanged { surfaceHeightPx = it.height }
.offset {
val dialogLiftPx = ((windowSize.height - surfaceHeightPx) / 2f) * morphProgress
val liftPx = dialogLiftPx + headerFooterLift.toPx()
IntOffset(x = 0, y = -liftPx.roundToInt())
IntOffset(x = 0, y = -dialogLiftPx.roundToInt())
}
.then(
if (useLiquidGlass) {
@@ -620,6 +608,9 @@ private fun ReadBookMenuSurface(
onOpenPaddingConfig = {
onIntent(ReadBookIntent.OpenReadMenuRoute(ReadBookMenuRoute.PaddingConfig))
},
onOpenHeaderFooterConfig = {
onIntent(ReadBookIntent.OpenReadMenuRoute(ReadBookMenuRoute.HeaderFooterConfig))
},
onOpenMoreConfig = {
onIntent(ReadBookIntent.ShowSheet(ReadBookSheet.MoreConfig))
},
@@ -659,6 +650,20 @@ private fun ReadBookMenuSurface(
}
}
ReadBookMenuRoute.HeaderFooterConfig -> {
ReadBookMenuRoutePage(
title = stringResource(R.string.header_footer),
maxHeight = maxHeight,
scrollContent = false,
bottomPadding = if (extendSurfaceToNavigationBar) navBarHeight else 0.dp,
onBack = { onIntent(ReadBookIntent.ReadMenuBack) },
) {
HeaderFooterPage(
onIntent = onIntent,
)
}
}
ReadBookMenuRoute.TextTitle -> {
ReadBookMenuRoutePage(
title = stringResource(R.string.read_config_text_effects),
@@ -1,25 +1,36 @@
package io.legado.app.ui.book.read.sheet
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.FastOutSlowInEasing
import androidx.compose.animation.core.tween
import androidx.compose.animation.expandVertically
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.shrinkVertically
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ChevronRight
import androidx.compose.material.icons.filled.ExpandMore
import androidx.compose.material.icons.filled.TextFields
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.DisposableEffect
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.derivedStateOf
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableFloatStateOf
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.mutableStateMapOf
import androidx.compose.runtime.mutableStateOf
@@ -41,6 +52,7 @@ import androidx.compose.ui.unit.dp
import androidx.core.net.toUri
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import io.legado.app.R
import io.legado.app.ui.theme.LegadoTheme
import io.legado.app.data.repository.ReadPreferences
import io.legado.app.data.repository.ReadSettingsRepository
import io.legado.app.help.config.ReadBookConfig
@@ -55,6 +67,7 @@ import io.legado.app.ui.widget.components.settingItem.TinySliderSettingItem
import io.legado.app.ui.widget.components.settingItem.TinySwitchSettingItem
import io.legado.app.ui.widget.components.tabRow.CardTabRow
import io.legado.app.utils.getCompatColor
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch
import org.koin.compose.koinInject
@@ -106,6 +119,48 @@ internal fun HeaderFooterPage(
var colorPickerInitial by remember { mutableIntStateOf(0) }
var showFontSelect by remember { mutableStateOf(false) }
var expandHeaderPadding by remember { mutableStateOf(false) }
var expandFooterPadding by remember { mutableStateOf(false) }
val headerScrollState = rememberScrollState()
val footerScrollState = rememberScrollState()
LaunchedEffect(expandHeaderPadding) {
if (expandHeaderPadding) {
snapshotFlow { headerScrollState.maxValue }
.collect { maxVal ->
headerScrollState.scrollTo(maxVal)
}
}
}
LaunchedEffect(expandFooterPadding) {
if (expandFooterPadding) {
snapshotFlow { footerScrollState.maxValue }
.collect { maxVal ->
footerScrollState.scrollTo(maxVal)
}
}
}
DisposableEffect(Unit) {
onDispose {
onIntent(ReadBookIntent.SaveReadStyleConfig)
}
}
// Header padding state
var headerPaddingTop by remember { mutableFloatStateOf(ReadBookConfig.headerPaddingTop.toFloat()) }
var headerPaddingBottom by remember { mutableFloatStateOf(ReadBookConfig.headerPaddingBottom.toFloat()) }
var headerPaddingLeft by remember { mutableFloatStateOf(ReadBookConfig.headerPaddingLeft.toFloat()) }
var headerPaddingRight by remember { mutableFloatStateOf(ReadBookConfig.headerPaddingRight.toFloat()) }
// Footer padding state
var footerPaddingTop by remember { mutableFloatStateOf(ReadBookConfig.footerPaddingTop.toFloat()) }
var footerPaddingBottom by remember { mutableFloatStateOf(ReadBookConfig.footerPaddingBottom.toFloat()) }
var footerPaddingLeft by remember { mutableFloatStateOf(ReadBookConfig.footerPaddingLeft.toFloat()) }
var footerPaddingRight by remember { mutableFloatStateOf(ReadBookConfig.footerPaddingRight.toFloat()) }
val tipNames = remember { ReadBookConfig.tipNames }
val tipValues = remember { ReadBookConfig.tipValues }
@@ -153,7 +208,7 @@ internal fun HeaderFooterPage(
scope.launch {
pagerState.animateScrollToPage(
page = index,
animationSpec = tween(durationMillis = 400, easing = FastOutSlowInEasing)
animationSpec = tween(durationMillis = 300, easing = FastOutSlowInEasing)
)
}
},
@@ -181,7 +236,7 @@ internal fun HeaderFooterPage(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 16.dp)
.verticalScroll(rememberScrollState()),
.verticalScroll(headerScrollState),
) {
TinySwitchSettingItem(
title = stringResource(R.string.showLine),
@@ -252,6 +307,48 @@ internal fun HeaderFooterPage(
showColorPicker = true
},
)
Spacer(Modifier.height(8.dp))
TinyClickableSettingItem(
title = stringResource(R.string.padding),
description = "上: ${headerPaddingTop.toInt()} 下: ${headerPaddingBottom.toInt()} 左: ${headerPaddingLeft.toInt()} 右: ${headerPaddingRight.toInt()}",
trailingContent = {
Icon(
imageVector = if (expandHeaderPadding) Icons.Default.ExpandMore else Icons.Default.ChevronRight,
contentDescription = null,
tint = LegadoTheme.colorScheme.onSurfaceVariant,
modifier = Modifier.size(20.dp),
)
},
onClick = { expandHeaderPadding = !expandHeaderPadding },
)
AnimatedVisibility(
visible = expandHeaderPadding,
enter = expandVertically() + fadeIn(),
exit = shrinkVertically() + fadeOut(),
) {
Column(modifier = Modifier.fillMaxWidth()) {
PaddingSliders(
top = headerPaddingTop, bottom = headerPaddingBottom,
left = headerPaddingLeft, right = headerPaddingRight,
onTopChange = {
headerPaddingTop = it
onIntent(ReadBookIntent.UpdateConfig(ConfigUpdate.HeaderPaddingTop(it.toInt())))
},
onBottomChange = {
headerPaddingBottom = it
onIntent(ReadBookIntent.UpdateConfig(ConfigUpdate.HeaderPaddingBottom(it.toInt())))
},
onLeftChange = {
headerPaddingLeft = it
onIntent(ReadBookIntent.UpdateConfig(ConfigUpdate.HeaderPaddingLeft(it.toInt())))
},
onRightChange = {
headerPaddingRight = it
onIntent(ReadBookIntent.UpdateConfig(ConfigUpdate.HeaderPaddingRight(it.toInt())))
},
)
}
}
}
}
@@ -261,7 +358,7 @@ internal fun HeaderFooterPage(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 16.dp)
.verticalScroll(rememberScrollState()),
.verticalScroll(footerScrollState),
) {
TinySwitchSettingItem(
title = stringResource(R.string.showLine),
@@ -332,6 +429,48 @@ internal fun HeaderFooterPage(
showColorPicker = true
},
)
Spacer(Modifier.height(8.dp))
TinyClickableSettingItem(
title = stringResource(R.string.padding),
description = "上: ${footerPaddingTop.toInt()} 下: ${footerPaddingBottom.toInt()} 左: ${footerPaddingLeft.toInt()} 右: ${footerPaddingRight.toInt()}",
trailingContent = {
Icon(
imageVector = if (expandFooterPadding) Icons.Default.ExpandMore else Icons.Default.ChevronRight,
contentDescription = null,
tint = LegadoTheme.colorScheme.onSurfaceVariant,
modifier = Modifier.size(20.dp),
)
},
onClick = { expandFooterPadding = !expandFooterPadding },
)
AnimatedVisibility(
visible = expandFooterPadding,
enter = expandVertically() + fadeIn(),
exit = shrinkVertically() + fadeOut(),
) {
Column(modifier = Modifier.fillMaxWidth()) {
PaddingSliders(
top = footerPaddingTop, bottom = footerPaddingBottom,
left = footerPaddingLeft, right = footerPaddingRight,
onTopChange = {
footerPaddingTop = it
onIntent(ReadBookIntent.UpdateConfig(ConfigUpdate.FooterPaddingTop(it.toInt())))
},
onBottomChange = {
footerPaddingBottom = it
onIntent(ReadBookIntent.UpdateConfig(ConfigUpdate.FooterPaddingBottom(it.toInt())))
},
onLeftChange = {
footerPaddingLeft = it
onIntent(ReadBookIntent.UpdateConfig(ConfigUpdate.FooterPaddingLeft(it.toInt())))
},
onRightChange = {
footerPaddingRight = it
onIntent(ReadBookIntent.UpdateConfig(ConfigUpdate.FooterPaddingRight(it.toInt())))
},
)
}
}
}
}
@@ -3,18 +3,11 @@ package io.legado.app.ui.book.read.sheet
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableFloatStateOf
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.runtime.snapshotFlow
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
@@ -24,8 +17,6 @@ import io.legado.app.ui.book.read.ConfigUpdate
import io.legado.app.ui.book.read.ReadBookIntent
import io.legado.app.ui.widget.components.modalBottomSheet.AppModalBottomSheet
import io.legado.app.ui.widget.components.settingItem.TinySliderSettingItem
import io.legado.app.ui.widget.components.tabRow.CardTabRow
import kotlinx.coroutines.launch
@Composable
fun PaddingConfigSheet(
@@ -58,122 +49,35 @@ fun PaddingConfigContent(
var paddingBottom by remember { mutableFloatStateOf(ReadBookConfig.paddingBottom.toFloat()) }
var paddingLeft by remember { mutableFloatStateOf(ReadBookConfig.paddingLeft.toFloat()) }
var paddingRight by remember { mutableFloatStateOf(ReadBookConfig.paddingRight.toFloat()) }
// Header padding
var headerPaddingTop by remember { mutableFloatStateOf(ReadBookConfig.headerPaddingTop.toFloat()) }
var headerPaddingBottom by remember { mutableFloatStateOf(ReadBookConfig.headerPaddingBottom.toFloat()) }
var headerPaddingLeft by remember { mutableFloatStateOf(ReadBookConfig.headerPaddingLeft.toFloat()) }
var headerPaddingRight by remember { mutableFloatStateOf(ReadBookConfig.headerPaddingRight.toFloat()) }
// Footer padding
var footerPaddingTop by remember { mutableFloatStateOf(ReadBookConfig.footerPaddingTop.toFloat()) }
var footerPaddingBottom by remember { mutableFloatStateOf(ReadBookConfig.footerPaddingBottom.toFloat()) }
var footerPaddingLeft by remember { mutableFloatStateOf(ReadBookConfig.footerPaddingLeft.toFloat()) }
var footerPaddingRight by remember { mutableFloatStateOf(ReadBookConfig.footerPaddingRight.toFloat()) }
val scope = rememberCoroutineScope()
val tabTitles = listOf(
stringResource(R.string.header),
stringResource(R.string.main_body),
stringResource(R.string.footer),
)
val pagerState = rememberPagerState(pageCount = { 3 })
var selectedTab by remember { mutableIntStateOf(0) }
LaunchedEffect(pagerState) {
snapshotFlow { pagerState.settledPage }.collect { selectedTab = it }
}
Column(
modifier = modifier.fillMaxWidth(),
) {
CardTabRow(
tabTitles = tabTitles,
selectedTabIndex = selectedTab,
onTabSelected = { index ->
selectedTab = index
scope.launch { pagerState.animateScrollToPage(index) }
PaddingSliders(
top = paddingTop, bottom = paddingBottom,
left = paddingLeft, right = paddingRight,
onTopChange = {
paddingTop = it
onIntent(ReadBookIntent.UpdateConfig(ConfigUpdate.PaddingTop(it.toInt())))
},
onBottomChange = {
paddingBottom = it
onIntent(ReadBookIntent.UpdateConfig(ConfigUpdate.PaddingBottom(it.toInt())))
},
onLeftChange = {
paddingLeft = it
onIntent(ReadBookIntent.UpdateConfig(ConfigUpdate.PaddingLeft(it.toInt())))
},
onRightChange = {
paddingRight = it
onIntent(ReadBookIntent.UpdateConfig(ConfigUpdate.PaddingRight(it.toInt())))
},
modifier = Modifier.padding(bottom = 8.dp),
)
HorizontalPager(
state = pagerState,
modifier = Modifier.fillMaxWidth(),
) { page ->
when (page) {
0 -> Column(modifier = Modifier.padding(vertical = 8.dp)) {
PaddingSliders(
top = headerPaddingTop, bottom = headerPaddingBottom,
left = headerPaddingLeft, right = headerPaddingRight,
onTopChange = {
headerPaddingTop = it
onIntent(ReadBookIntent.UpdateConfig(ConfigUpdate.HeaderPaddingTop(it.toInt())))
},
onBottomChange = {
headerPaddingBottom = it
onIntent(ReadBookIntent.UpdateConfig(ConfigUpdate.HeaderPaddingBottom(it.toInt())))
},
onLeftChange = {
headerPaddingLeft = it
onIntent(ReadBookIntent.UpdateConfig(ConfigUpdate.HeaderPaddingLeft(it.toInt())))
},
onRightChange = {
headerPaddingRight = it
onIntent(ReadBookIntent.UpdateConfig(ConfigUpdate.HeaderPaddingRight(it.toInt())))
},
)
}
1 -> Column(modifier = Modifier.padding(vertical = 8.dp)) {
PaddingSliders(
top = paddingTop, bottom = paddingBottom,
left = paddingLeft, right = paddingRight,
onTopChange = {
paddingTop = it
onIntent(ReadBookIntent.UpdateConfig(ConfigUpdate.PaddingTop(it.toInt())))
},
onBottomChange = {
paddingBottom = it
onIntent(ReadBookIntent.UpdateConfig(ConfigUpdate.PaddingBottom(it.toInt())))
},
onLeftChange = {
paddingLeft = it
onIntent(ReadBookIntent.UpdateConfig(ConfigUpdate.PaddingLeft(it.toInt())))
},
onRightChange = {
paddingRight = it
onIntent(ReadBookIntent.UpdateConfig(ConfigUpdate.PaddingRight(it.toInt())))
},
)
}
2 -> Column(modifier = Modifier.padding(vertical = 8.dp)) {
PaddingSliders(
top = footerPaddingTop, bottom = footerPaddingBottom,
left = footerPaddingLeft, right = footerPaddingRight,
onTopChange = {
footerPaddingTop = it
onIntent(ReadBookIntent.UpdateConfig(ConfigUpdate.FooterPaddingTop(it.toInt())))
},
onBottomChange = {
footerPaddingBottom = it
onIntent(ReadBookIntent.UpdateConfig(ConfigUpdate.FooterPaddingBottom(it.toInt())))
},
onLeftChange = {
footerPaddingLeft = it
onIntent(ReadBookIntent.UpdateConfig(ConfigUpdate.FooterPaddingLeft(it.toInt())))
},
onRightChange = {
footerPaddingRight = it
onIntent(ReadBookIntent.UpdateConfig(ConfigUpdate.FooterPaddingRight(it.toInt())))
},
)
}
}
}
}
}
@Composable
private fun PaddingSliders(
internal fun PaddingSliders(
top: Float, bottom: Float, left: Float, right: Float,
onTopChange: (Float) -> Unit, onBottomChange: (Float) -> Unit,
onLeftChange: (Float) -> Unit, onRightChange: (Float) -> Unit,
@@ -38,6 +38,7 @@ import kotlinx.coroutines.launch
@Composable
fun ReadStyleContent(
onOpenPaddingConfig: () -> Unit,
onOpenHeaderFooterConfig: () -> Unit,
onOpenMoreConfig: () -> Unit,
onOpenBgTextConfig: (Int) -> Unit,
onOpenTextTitle: () -> Unit,
@@ -51,7 +52,7 @@ fun ReadStyleContent(
styleConfig: ReadBookStyleConfig = ReadBookStyleConfig(),
) {
val scope = rememberCoroutineScope()
val pagerState = rememberPagerState(pageCount = { 3 })
val pagerState = rememberPagerState(pageCount = { 2 })
var currentPage by remember { mutableIntStateOf(0) }
val pageHeights = remember { mutableStateMapOf<Int, Int>() }
@@ -105,10 +106,6 @@ fun ReadStyleContent(
bottomBarButtons = bottomBarButtons,
onIntent = onIntent,
)
2 -> HeaderFooterPage(
onIntent = onIntent,
)
}
}
}
@@ -123,15 +120,17 @@ fun ReadStyleContent(
tabTitles = tabTitles,
selectedTabIndex = currentPage,
onTabSelected = { index ->
if (index < 3) {
scope.launch {
pagerState.animateScrollToPage(
page = index,
animationSpec = tween(durationMillis = 400, easing = FastOutSlowInEasing)
)
when (index) {
0, 1 -> {
scope.launch {
pagerState.animateScrollToPage(
page = index,
animationSpec = tween(durationMillis = 300, easing = FastOutSlowInEasing)
)
}
}
} else {
onOpenMoreConfig()
2 -> onOpenHeaderFooterConfig()
3 -> onOpenMoreConfig()
}
},
modifier = Modifier.padding(start = 16.dp, end = 16.dp, top = 8.dp),
@@ -128,7 +128,7 @@ internal fun SystemMenuPage(
scope.launch {
pagerState.animateScrollToPage(
page = index,
animationSpec = tween(durationMillis = 400, easing = FastOutSlowInEasing)
animationSpec = tween(durationMillis = 300, easing = FastOutSlowInEasing)
)
}
},