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:
@@ -9,6 +9,9 @@ import androidx.compose.material3.*
|
|||||||
import androidx.compose.runtime.*
|
import androidx.compose.runtime.*
|
||||||
import androidx.compose.ui.Alignment
|
import androidx.compose.ui.Alignment
|
||||||
import androidx.compose.ui.Modifier
|
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.text.font.FontWeight
|
||||||
import androidx.compose.ui.unit.dp
|
import androidx.compose.ui.unit.dp
|
||||||
import com.bolenpad.photophetch.util.StagingPath
|
import com.bolenpad.photophetch.util.StagingPath
|
||||||
@@ -43,11 +46,15 @@ fun ImportScreen(state: AppState) {
|
|||||||
|
|
||||||
HorizontalDivider()
|
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(
|
Column(
|
||||||
modifier = Modifier
|
modifier = Modifier
|
||||||
.weight(1f)
|
.fillMaxSize()
|
||||||
.verticalScroll(rememberScrollState())
|
.verticalScroll(scrollState)
|
||||||
.padding(horizontal = 32.dp, vertical = 20.dp),
|
.padding(horizontal = 32.dp, vertical = 20.dp),
|
||||||
verticalArrangement = Arrangement.spacedBy(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
|
// Extra bottom padding so last item isn't flush against the button
|
||||||
Spacer(Modifier.height(8.dp))
|
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 ─────────────────────────────────────────────
|
// ── Pinned bottom button ─────────────────────────────────────────────
|
||||||
HorizontalDivider()
|
HorizontalDivider()
|
||||||
|
|||||||
Reference in New Issue
Block a user