feat: 给主题选择器添加了边缘渐变保护

This commit is contained in:
Super12138 2025-05-02 13:31:37 +08:00
parent 9eee5ead8a
commit fa1bf678d0
4 changed files with 50 additions and 5 deletions

View file

@ -34,7 +34,7 @@ android {
applicationId = "cn.super12138.todo"
minSdk = 24
targetSdk = 36
versionCode = 656
versionCode = 657
versionName = "2.1.2"
testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"

View file

@ -16,8 +16,18 @@ import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.drawWithContent
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.BlendMode
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.CompositingStrategy
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.graphics.drawscope.ContentDrawScope
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.sp
import cn.super12138.todo.ui.TodoDefaults
@ -32,7 +42,8 @@ fun RowSettingsItem(
horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
verticalAlignment: Alignment.Vertical = Alignment.Top,
scrollState: ScrollState = rememberScrollState(),
rowModifier: Modifier = Modifier,
fadedEdgeWidth: Dp,
maskColor: Color = MaterialTheme.colorScheme.background,
content: @Composable RowScope.() -> Unit
) {
MoreContentSettingsItem(
@ -46,8 +57,22 @@ fun RowSettingsItem(
Row(
modifier = Modifier
.fillMaxWidth()
.horizontalScroll(scrollState)
.then(rowModifier),
// 渲染到离屏缓冲区是为了确保边缘淡出的 alpha 效果仅应用于文本本身,而不影响该可组合项下方绘制的内容(例如窗口背景)。
.graphicsLayer { compositingStrategy = CompositingStrategy.Offscreen }
.drawWithContent {
drawContent()
drawFadedEdge(
edgeWidth = fadedEdgeWidth,
maskColor = maskColor,
leftEdge = true
)
drawFadedEdge(
edgeWidth = fadedEdgeWidth,
maskColor = maskColor,
leftEdge = false
)
}
.horizontalScroll(scrollState),
horizontalArrangement = horizontalArrangement,
verticalAlignment = verticalAlignment,
content = content
@ -109,4 +134,23 @@ fun MoreContentSettingsItem(
content()
}
}
fun ContentDrawScope.drawFadedEdge(
edgeWidth: Dp,
maskColor: Color,
leftEdge: Boolean
) {
val edgeWidthPx = edgeWidth.toPx()
drawRect(
topLeft = Offset(if (leftEdge) 0f else size.width - edgeWidthPx, 0f),
size = Size(edgeWidthPx, size.height),
brush =
Brush.horizontalGradient(
colors = listOf(Color.Transparent, maskColor),
startX = if (leftEdge) 0f else size.width,
endX = if (leftEdge) edgeWidthPx else size.width - edgeWidthPx
),
blendMode = BlendMode.DstIn
)
}

View file

@ -24,7 +24,6 @@ fun DarkModePicker(
val context = LocalContext.current
val isInDarkTheme = isSystemInDarkTheme()
var darkModeState by rememberPrefIntState(
Constants.PREF_DARK_MODE,
Constants.PREF_DARK_MODE_DEFAULT
@ -34,6 +33,7 @@ fun DarkModePicker(
title = stringResource(R.string.pref_dark_mode),
description = stringResource(R.string.pref_dark_mode_desc),
horizontalArrangement = Arrangement.spacedBy(5.dp),
fadedEdgeWidth = 8.dp,
modifier = modifier
) {
DarkModeItem(

View file

@ -37,6 +37,7 @@ fun PalettePicker(
title = stringResource(R.string.pref_palette_style),
description = stringResource(R.string.pref_palette_style_desc),
horizontalArrangement = Arrangement.spacedBy(5.dp),
fadedEdgeWidth = 8.dp,
modifier = modifier
) {
paletteOptions.forEach { paletteStyle ->