pref: 动态页面平板模式瀑布流改为列表

This commit is contained in:
HuanCheng65 2023-07-15 22:53:14 +08:00
parent 10a3a4ac1e
commit 0ae5dde3df
No known key found for this signature in database
GPG Key ID: 5EC9DD60A32C7360
3 changed files with 56 additions and 29 deletions

View File

@ -140,6 +140,11 @@ private fun ThreadList(
onClassifySelected: (Int) -> Unit onClassifySelected: (Int) -> Unit
) { ) {
val itemHolders = itemHoldersProvider() val itemHolders = itemHoldersProvider()
val windowSizeClass = LocalWindowSizeClass.current
val itemFraction = when (windowSizeClass.widthSizeClass) {
WindowWidthSizeClass.Expanded -> 0.5f
else -> 1f
}
LazyColumn( LazyColumn(
state = state, state = state,
horizontalAlignment = Alignment.CenterHorizontally, horizontalAlignment = Alignment.CenterHorizontally,
@ -174,13 +179,8 @@ private fun ThreadList(
} }
) { index, holder -> ) { index, holder ->
val (item) = holder val (item) = holder
val windowSizeClass = LocalWindowSizeClass.current
val fraction = when (windowSizeClass.widthSizeClass) {
WindowWidthSizeClass.Expanded -> 0.5f
else -> 1f
}
Column( Column(
modifier = Modifier.fillMaxWidth(fraction) modifier = Modifier.fillMaxWidth(itemFraction)
) { ) {
if (item.isTop == 1) { if (item.isTop == 1) {
Row( Row(

View File

@ -3,10 +3,11 @@ package com.huanchengfly.tieba.post.ui.page.main.explore.concern
import androidx.compose.foundation.ExperimentalFoundationApi import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.staggeredgrid.LazyVerticalStaggeredGrid import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridCells import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.lazy.staggeredgrid.itemsIndexed import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material.ExperimentalMaterialApi import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.pullrefresh.PullRefreshIndicator import androidx.compose.material.pullrefresh.PullRefreshIndicator
import androidx.compose.material.pullrefresh.pullRefresh import androidx.compose.material.pullrefresh.pullRefresh
@ -16,10 +17,13 @@ import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import com.huanchengfly.tieba.post.arch.BaseComposeActivity
import com.huanchengfly.tieba.post.arch.CommonUiEvent.ScrollToTop.bindScrollToTopEvent
import com.huanchengfly.tieba.post.arch.collectPartialAsState import com.huanchengfly.tieba.post.arch.collectPartialAsState
import com.huanchengfly.tieba.post.arch.onEvent import com.huanchengfly.tieba.post.arch.onEvent
import com.huanchengfly.tieba.post.arch.pageViewModel import com.huanchengfly.tieba.post.arch.pageViewModel
import com.huanchengfly.tieba.post.arch.wrapImmutable import com.huanchengfly.tieba.post.arch.wrapImmutable
import com.huanchengfly.tieba.post.ui.common.windowsizeclass.WindowWidthSizeClass
import com.huanchengfly.tieba.post.ui.page.LocalNavigator import com.huanchengfly.tieba.post.ui.page.LocalNavigator
import com.huanchengfly.tieba.post.ui.page.destinations.ThreadPageDestination import com.huanchengfly.tieba.post.ui.page.destinations.ThreadPageDestination
import com.huanchengfly.tieba.post.ui.page.main.MainUiEvent import com.huanchengfly.tieba.post.ui.page.main.MainUiEvent
@ -64,6 +68,9 @@ fun ConcernPage(
viewModel.send(ConcernUiIntent.Refresh) viewModel.send(ConcernUiIntent.Refresh)
} }
val lazyListState = rememberLazyListState()
viewModel.bindScrollToTopEvent(lazyListState = lazyListState)
Box( Box(
modifier = Modifier.pullRefresh(pullRefreshState) modifier = Modifier.pullRefresh(pullRefreshState)
) { ) {
@ -71,8 +78,15 @@ fun ConcernPage(
isLoading = isLoadingMore, isLoading = isLoadingMore,
onLoadMore = { viewModel.send(ConcernUiIntent.LoadMore(nextPageTag)) } onLoadMore = { viewModel.send(ConcernUiIntent.LoadMore(nextPageTag)) }
) { ) {
LazyVerticalStaggeredGrid( val windowSizeClass = BaseComposeActivity.LocalWindowSizeClass.current
columns = StaggeredGridCells.Adaptive(240.dp), val itemFraction = when (windowSizeClass.widthSizeClass) {
WindowWidthSizeClass.Expanded -> 0.5f
else -> 1f
}
LazyColumn(
state = lazyListState,
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier.fillMaxWidth(),
) { ) {
itemsIndexed( itemsIndexed(
items = data, items = data,
@ -80,7 +94,9 @@ fun ConcernPage(
contentType = { _, item -> item.recommendType } contentType = { _, item -> item.recommendType }
) { index, item -> ) { index, item ->
if (item.recommendType == 1) { if (item.recommendType == 1) {
Column { Column(
modifier = Modifier.fillMaxWidth(itemFraction)
) {
FeedCard( FeedCard(
item = wrapImmutable(item.threadList!!), item = wrapImmutable(item.threadList!!),
onClick = { onClick = {

View File

@ -7,7 +7,6 @@ import androidx.compose.animation.fadeOut
import androidx.compose.animation.shrinkVertically import androidx.compose.animation.shrinkVertically
import androidx.compose.animation.slideInVertically import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOutVertically import androidx.compose.animation.slideOutVertically
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background import androidx.compose.foundation.background
import androidx.compose.foundation.clickable import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Arrangement
@ -18,11 +17,10 @@ import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.staggeredgrid.LazyStaggeredGridState import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.staggeredgrid.LazyVerticalStaggeredGrid import androidx.compose.foundation.lazy.LazyListState
import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridCells import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.lazy.staggeredgrid.itemsIndexed import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.lazy.staggeredgrid.rememberLazyStaggeredGridState
import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.ExperimentalMaterialApi import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.Icon import androidx.compose.material.Icon
@ -50,11 +48,13 @@ import com.huanchengfly.tieba.post.R
import com.huanchengfly.tieba.post.api.models.protos.ThreadInfo import com.huanchengfly.tieba.post.api.models.protos.ThreadInfo
import com.huanchengfly.tieba.post.api.models.protos.personalized.DislikeReason import com.huanchengfly.tieba.post.api.models.protos.personalized.DislikeReason
import com.huanchengfly.tieba.post.api.models.protos.personalized.ThreadPersonalized import com.huanchengfly.tieba.post.api.models.protos.personalized.ThreadPersonalized
import com.huanchengfly.tieba.post.arch.BaseComposeActivity
import com.huanchengfly.tieba.post.arch.ImmutableHolder import com.huanchengfly.tieba.post.arch.ImmutableHolder
import com.huanchengfly.tieba.post.arch.collectPartialAsState import com.huanchengfly.tieba.post.arch.collectPartialAsState
import com.huanchengfly.tieba.post.arch.onEvent import com.huanchengfly.tieba.post.arch.onEvent
import com.huanchengfly.tieba.post.arch.pageViewModel import com.huanchengfly.tieba.post.arch.pageViewModel
import com.huanchengfly.tieba.post.ui.common.theme.compose.ExtendedTheme import com.huanchengfly.tieba.post.ui.common.theme.compose.ExtendedTheme
import com.huanchengfly.tieba.post.ui.common.windowsizeclass.WindowWidthSizeClass
import com.huanchengfly.tieba.post.ui.page.LocalNavigator import com.huanchengfly.tieba.post.ui.page.LocalNavigator
import com.huanchengfly.tieba.post.ui.page.destinations.ForumPageDestination import com.huanchengfly.tieba.post.ui.page.destinations.ForumPageDestination
import com.huanchengfly.tieba.post.ui.page.destinations.ThreadPageDestination import com.huanchengfly.tieba.post.ui.page.destinations.ThreadPageDestination
@ -65,8 +65,9 @@ import com.huanchengfly.tieba.post.ui.widgets.compose.LoadMoreLayout
import com.huanchengfly.tieba.post.ui.widgets.compose.VerticalDivider import com.huanchengfly.tieba.post.ui.widgets.compose.VerticalDivider
import kotlinx.coroutines.delay import kotlinx.coroutines.delay
import kotlinx.coroutines.flow.Flow import kotlinx.coroutines.flow.Flow
import kotlinx.coroutines.launch
@OptIn(ExperimentalFoundationApi::class, ExperimentalMaterialApi::class) @OptIn(ExperimentalMaterialApi::class)
@Composable @Composable
fun PersonalizedPage( fun PersonalizedPage(
eventFlow: Flow<MainUiEvent>, eventFlow: Flow<MainUiEvent>,
@ -109,7 +110,7 @@ fun PersonalizedPage(
refreshing = isRefreshing, refreshing = isRefreshing,
onRefresh = { viewModel.send(PersonalizedUiIntent.Refresh) } onRefresh = { viewModel.send(PersonalizedUiIntent.Refresh) }
) )
val lazyStaggeredGridState = rememberLazyStaggeredGridState() val lazyListState = rememberLazyListState()
var refreshCount by remember { var refreshCount by remember {
mutableStateOf(0) mutableStateOf(0)
} }
@ -127,12 +128,15 @@ fun PersonalizedPage(
if (showRefreshTip) { if (showRefreshTip) {
LaunchedEffect(Unit) { LaunchedEffect(Unit) {
lazyStaggeredGridState.scrollToItem(0, 0) launch {
delay(20)
lazyListState.scrollToItem(0, 0)
}
delay(2000) delay(2000)
showRefreshTip = false showRefreshTip = false
} }
} }
if (lazyStaggeredGridState.isScrollInProgress) { if (lazyListState.isScrollInProgress) {
DisposableEffect(Unit) { DisposableEffect(Unit) {
PauseLoadWhenScrollingDrawableDecodeInterceptor.scrolling = true PauseLoadWhenScrollingDrawableDecodeInterceptor.scrolling = true
onDispose { onDispose {
@ -183,7 +187,7 @@ fun PersonalizedPage(
onOpenForum = { onOpenForum = {
navigator.navigate(ForumPageDestination(it)) navigator.navigate(ForumPageDestination(it))
}, },
state = lazyStaggeredGridState state = lazyListState
) )
} }
@ -219,7 +223,6 @@ fun PersonalizedPage(
} }
} }
@OptIn(ExperimentalFoundationApi::class)
@Composable @Composable
private fun FeedList( private fun FeedList(
dataProvider: () -> List<ImmutableHolder<ThreadInfo>>, dataProvider: () -> List<ImmutableHolder<ThreadInfo>>,
@ -231,15 +234,21 @@ private fun FeedList(
onDislike: (ThreadInfo, Long, List<ImmutableHolder<DislikeReason>>) -> Unit, onDislike: (ThreadInfo, Long, List<ImmutableHolder<DislikeReason>>) -> Unit,
onRefresh: () -> Unit, onRefresh: () -> Unit,
onOpenForum: (forumName: String) -> Unit = {}, onOpenForum: (forumName: String) -> Unit = {},
state: LazyStaggeredGridState, state: LazyListState,
) { ) {
val data = dataProvider() val data = dataProvider()
val threadPersonalizedData = personalizedDataProvider() val threadPersonalizedData = personalizedDataProvider()
val refreshPosition = refreshPositionProvider() val refreshPosition = refreshPositionProvider()
val hiddenThreadIds = hiddenThreadIdsProvider() val hiddenThreadIds = hiddenThreadIdsProvider()
LazyVerticalStaggeredGrid( val windowSizeClass = BaseComposeActivity.LocalWindowSizeClass.current
columns = StaggeredGridCells.Adaptive(240.dp), val itemFraction = when (windowSizeClass.widthSizeClass) {
state = state WindowWidthSizeClass.Expanded -> 0.5f
else -> 1f
}
LazyColumn(
state = state,
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier.fillMaxWidth(),
) { ) {
itemsIndexed( itemsIndexed(
items = data, items = data,
@ -253,7 +262,9 @@ private fun FeedList(
} }
} }
) { index, item -> ) { index, item ->
Column { Column(
modifier = Modifier.fillMaxWidth(itemFraction)
) {
AnimatedVisibility( AnimatedVisibility(
visible = !hiddenThreadIds.contains(item.get { threadId }), visible = !hiddenThreadIds.contains(item.get { threadId }),
enter = EnterTransition.None, enter = EnterTransition.None,