ImportScreen: fade gradient indicates more content below

derivedStateOf tracks scrollState.value < maxValue. When not at
bottom, a 48dp white-to-transparent gradient overlays the bottom
of the scroll area. Disappears when fully scrolled.
This commit is contained in:
Kyle Bolen
2026-07-28 05:31:39 +00:00
parent edaf4cb0d7
commit 9c489306f4

View File

@@ -9,6 +9,9 @@ import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawWithContent
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import com.bolenpad.photophetch.util.StagingPath
@@ -43,11 +46,15 @@ fun ImportScreen(state: AppState) {
HorizontalDivider()
// ── Scrollable body ──────────────────────────────────────────────────
// ── Scrollable body with bottom fade ────────────────────────────────
val scrollState = rememberScrollState()
val showFade by remember { derivedStateOf { scrollState.value < scrollState.maxValue } }
Box(modifier = Modifier.weight(1f)) {
Column(
modifier = Modifier
.weight(1f)
.verticalScroll(rememberScrollState())
.fillMaxSize()
.verticalScroll(scrollState)
.padding(horizontal = 32.dp, vertical = 20.dp),
verticalArrangement = Arrangement.spacedBy(20.dp),
) {
@@ -134,7 +141,28 @@ fun ImportScreen(state: AppState) {
// Extra bottom padding so last item isn't flush against the button
Spacer(Modifier.height(8.dp))
} // end scroll Column
// Fade gradient — visible when not scrolled to bottom
if (showFade) {
Box(
modifier = Modifier
.fillMaxWidth()
.height(48.dp)
.align(Alignment.BottomCenter)
.drawWithContent {
drawContent()
drawRect(
brush = Brush.verticalGradient(
colors = listOf(Color.Transparent, Color.White),
startY = 0f,
endY = size.height,
)
)
}
)
}
} // end Box
// ── Pinned bottom button ─────────────────────────────────────────────
HorizontalDivider()