Add a work around to fix the scrollable state.

This commit is contained in:
Thomas Andres Gomez 2021-05-14 15:06:12 +02:00
parent befb235b8b
commit 01d635ca1a
2 changed files with 53 additions and 45 deletions

View file

@ -1,45 +1,38 @@
package com.pixelized.biblib.ui.composable.pages
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.gestures.ScrollableState
import androidx.compose.foundation.gestures.scrollable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyListState
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.paging.compose.LazyPagingItems
import androidx.paging.compose.collectAsLazyPagingItems
import androidx.paging.compose.items
import com.pixelized.biblib.ui.composable.items.BookThumbnailComposable
import com.pixelized.biblib.ui.data.BookThumbnailUio
import com.pixelized.biblib.ui.theme.BibLibTheme
import com.pixelized.biblib.ui.viewmodel.book.IBooksViewModel
import com.pixelized.biblib.ui.viewmodel.navigation.INavigationViewModel
import com.pixelized.biblib.ui.viewmodel.navigation.INavigationViewModel.Navigable.Page
@Preview
@Composable
fun HomePageComposablePreview() {
BibLibTheme {
val navigation = INavigationViewModel.Mock()
val books = IBooksViewModel.Mock()
HomePageComposable(navigation, books)
}
}
// https://issuetracker.google.com/issues/177245496
@Composable
fun HomePageComposable(
navigationViewModel: INavigationViewModel,
booksViewModel: IBooksViewModel
lazyListState: LazyListState,
scrollableState: ScrollableState,
lazyBooks: LazyPagingItems<BookThumbnailUio>,
) {
val lazyBooks: LazyPagingItems<BookThumbnailUio> =
booksViewModel.books.collectAsLazyPagingItems()
LazyColumn(
Modifier.scrollable(state = scrollableState, orientation = Orientation.Vertical),
contentPadding = PaddingValues(16.dp),
verticalArrangement = Arrangement.spacedBy(16.dp),
state = lazyListState,
) {
items(lazyBooks) { thumbnail ->
BookThumbnailComposable(

View file

@ -2,7 +2,8 @@ package com.pixelized.biblib.ui.composable.screen
import androidx.compose.animation.*
import androidx.compose.animation.core.tween
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.rememberScrollState
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.sharp.ArrowBack
@ -12,9 +13,12 @@ import androidx.compose.runtime.livedata.observeAsState
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.lifecycle.viewmodel.compose.viewModel
import androidx.paging.compose.LazyPagingItems
import androidx.paging.compose.collectAsLazyPagingItems
import com.pixelized.biblib.R
import com.pixelized.biblib.ui.composable.pages.DetailPageComposable
import com.pixelized.biblib.ui.composable.pages.HomePageComposable
import com.pixelized.biblib.ui.data.BookThumbnailUio
import com.pixelized.biblib.ui.theme.Animation
import com.pixelized.biblib.ui.theme.BibLibTheme
import com.pixelized.biblib.ui.viewmodel.book.BooksViewModel
@ -23,32 +27,6 @@ import com.pixelized.biblib.ui.viewmodel.navigation.INavigationViewModel
import com.pixelized.biblib.ui.viewmodel.navigation.INavigationViewModel.Navigable.Page
import com.pixelized.biblib.ui.viewmodel.navigation.NavigationViewModel
@Preview
@Composable
fun ToolbarComposableDarkPreview() {
BibLibTheme(darkTheme = false) {
ToolbarComposable(navigationViewModel = INavigationViewModel.Mock())
}
}
@Preview
@Composable
fun ToolbarComposableLightPreview() {
BibLibTheme(darkTheme = true) {
ToolbarComposable(navigationViewModel = INavigationViewModel.Mock())
}
}
@Preview
@Composable
fun MainScreenComposablePreview() {
BibLibTheme {
MainScreenComposable(
INavigationViewModel.Mock(page = Page.HomePage),
IBooksViewModel.Mock()
)
}
}
@OptIn(ExperimentalAnimationApi::class)
@Composable
@ -56,6 +34,10 @@ fun MainScreenComposable(
navigationViewModel: INavigationViewModel = viewModel<NavigationViewModel>(),
booksViewModel: IBooksViewModel = viewModel<BooksViewModel>(),
) {
val lazyBooks: LazyPagingItems<BookThumbnailUio> =
booksViewModel.books.collectAsLazyPagingItems()
val lazyListState = rememberLazyListState()
val scrollableState = rememberScrollState()
val page by navigationViewModel.page.observeAsState()
LaunchedEffect(key1 = "MainScreen", block = {
@ -64,6 +46,7 @@ fun MainScreenComposable(
Scaffold(
topBar = { ToolbarComposable(navigationViewModel) },
drawerContent = {}
) {
AnimatedVisibility(
visible = page is Page.HomePage,
@ -77,7 +60,12 @@ fun MainScreenComposable(
targetOffsetX = { width -> -width }
),
) {
HomePageComposable(navigationViewModel, booksViewModel)
HomePageComposable(
navigationViewModel,
lazyListState,
scrollableState,
lazyBooks
)
}
AnimatedVisibility(
visible = page is Page.Detail,
@ -129,4 +117,31 @@ fun NavigationIcon(navigationViewModel: INavigationViewModel) {
}
}
}
}
@Preview
@Composable
fun ToolbarComposableDarkPreview() {
BibLibTheme(darkTheme = false) {
ToolbarComposable(navigationViewModel = INavigationViewModel.Mock())
}
}
@Preview
@Composable
fun ToolbarComposableLightPreview() {
BibLibTheme(darkTheme = true) {
ToolbarComposable(navigationViewModel = INavigationViewModel.Mock())
}
}
@Preview
@Composable
fun MainScreenComposablePreview() {
BibLibTheme {
MainScreenComposable(
INavigationViewModel.Mock(page = Page.HomePage),
IBooksViewModel.Mock()
)
}
}