Добавлена анимация сжатия Floating Action Button при прокрутке вниз

Этот коммит содержится в:
Глеб Иваницкий 2024-08-24 14:04:34 +03:00
родитель bab24d6e07
Коммит 62001b1e85
2 изменённых файлов: 37 добавлений и 14 удалений

Просмотреть файл

@ -27,9 +27,12 @@ import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.MutableState import androidx.compose.runtime.MutableState
import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember import androidx.compose.runtime.remember
import androidx.compose.runtime.snapshotFlow
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.input.pointer.PointerIcon import androidx.compose.ui.input.pointer.PointerIcon
import androidx.compose.ui.input.pointer.pointerHoverIcon import androidx.compose.ui.input.pointer.pointerHoverIcon
@ -80,6 +83,19 @@ fun ScenarioDialog(
}, },
properties = properties, properties = properties,
) { ) {
val verticalScrollState = rememberScrollState()
val floatingActionButtonExpandedState = remember {
mutableStateOf(true)
}
LaunchedEffect(verticalScrollState) {
var previousValue = 0
snapshotFlow {
verticalScrollState.value
}.collect {
floatingActionButtonExpandedState.value = it <= previousValue
previousValue = it
}
}
Scaffold( Scaffold(
modifier = Modifier modifier = Modifier
.fillMaxSize(), .fillMaxSize(),
@ -185,7 +201,7 @@ fun ScenarioDialog(
contentDescription = null, contentDescription = null,
) )
}, },
expanded = true, expanded = floatingActionButtonExpandedState.value,
) )
}, },
) { paddingValues -> ) { paddingValues ->
@ -193,7 +209,7 @@ fun ScenarioDialog(
modifier = Modifier modifier = Modifier
.fillMaxSize() .fillMaxSize()
.verticalScroll( .verticalScroll(
state = rememberScrollState(), state = verticalScrollState,
) )
.padding(paddingValues) .padding(paddingValues)
.padding( .padding(
@ -467,7 +483,6 @@ fun ScenarioDialog(
}, },
isError = false, isError = false,
singleLine = true, singleLine = true,
maxLines = 3,
) )
Spacer( Spacer(
modifier = Modifier modifier = Modifier
@ -484,7 +499,9 @@ fun ScenarioDialog(
val optionState = remember { val optionState = remember {
mutableStateOf("") mutableStateOf("")
} }
Row { Row(
verticalAlignment = Alignment.CenterVertically,
) {
OutlinedTextField( OutlinedTextField(
value = optionState.value, value = optionState.value,
onValueChange = { value -> onValueChange = { value ->
@ -498,7 +515,6 @@ fun ScenarioDialog(
label = {}, label = {},
isError = false, isError = false,
singleLine = true, singleLine = true,
maxLines = 3,
) )
Spacer( Spacer(
modifier = Modifier modifier = Modifier

Просмотреть файл

@ -1,6 +1,5 @@
package ru.csasq.cit_is_bot.ui.screens package ru.csasq.cit_is_bot.ui.screens
import androidx.compose.foundation.ScrollState
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxSize
@ -11,14 +10,12 @@ import androidx.compose.material3.ExtendedFloatingActionButton
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.MutableState import androidx.compose.runtime.MutableState
import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember import androidx.compose.runtime.remember
import androidx.compose.runtime.snapshotFlow
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.input.nestedscroll.NestedScrollConnection
import androidx.compose.ui.input.nestedscroll.NestedScrollSource
import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.text.buildAnnotatedString import androidx.compose.ui.text.buildAnnotatedString
import androidx.navigation.NavController import androidx.navigation.NavController
import cit_is_bot.composeapp.generated.resources.Res import cit_is_bot.composeapp.generated.resources.Res
@ -47,6 +44,19 @@ fun ScenariosScreen(
paddingValues: PaddingValues, paddingValues: PaddingValues,
floatingActionButtonState: MutableState<(@Composable () -> Unit)?>, floatingActionButtonState: MutableState<(@Composable () -> Unit)?>,
) { ) {
val verticalScrollState = rememberScrollState()
val floatingActionButtonExpandedState = remember {
mutableStateOf(true)
}
LaunchedEffect(verticalScrollState) {
var previousValue = 0
snapshotFlow {
verticalScrollState.value
}.collect {
floatingActionButtonExpandedState.value = it <= previousValue
previousValue = it
}
}
Column( Column(
modifier = Modifier modifier = Modifier
.padding( .padding(
@ -54,15 +64,12 @@ fun ScenariosScreen(
) )
.fillMaxSize() .fillMaxSize()
.verticalScroll( .verticalScroll(
state = rememberScrollState(), state = verticalScrollState,
), ),
) { ) {
val scenarioDialogState = remember { val scenarioDialogState = remember {
mutableStateOf<Scenario?>(null) mutableStateOf<Scenario?>(null)
} }
val floatingActionButtonExpandedState = remember {
mutableStateOf(true)
}
floatingActionButtonState.value = @Composable { floatingActionButtonState.value = @Composable {
ExtendedFloatingActionButton( ExtendedFloatingActionButton(
text = { text = {