优化个人主页的导航栏交互和视觉

- 优化导航栏的透明度过渡效果,使其在滚动时更早达到完全不透明,并适配深色/亮色模式。
- 调整导航栏图标和边框颜色逻辑,使其在深色模式下始终为白色,在亮色模式下根据背景透明度在白色和黑色之间切换。
- 将互动数据卡片和分享按钮调整为仅在“我的”主页显示。
- 将页面内容(`HorizontalPager`)的高度从 `500.dp` 增加到 `650.dp`。
- 更新了导航栏右侧的菜单图标。
This commit is contained in:
2025-11-13 16:15:40 +08:00
parent 83ef3e8dce
commit 96d804b4c7

View File

@@ -4,9 +4,11 @@ import android.content.Context
import android.content.Intent
import android.net.Uri
import android.util.Log
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
@@ -14,7 +16,6 @@ import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.asPaddingValues
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
@@ -22,12 +23,11 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.systemBars
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.grid.rememberLazyGridState
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
@@ -37,12 +37,12 @@ import androidx.compose.material.pullrefresh.PullRefreshIndicator
import androidx.compose.material.pullrefresh.pullRefresh
import androidx.compose.material.pullrefresh.rememberPullRefreshState
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.ModalBottomSheet
import androidx.compose.material3.rememberModalBottomSheetState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.DisposableEffect
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.derivedStateOf
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
@@ -52,26 +52,24 @@ import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.drawWithContent
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.graphics.nativeCanvas
import androidx.compose.ui.input.nestedscroll.NestedScrollConnection
import androidx.compose.ui.input.nestedscroll.NestedScrollSource
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.layout.onGloballyPositioned
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.res.painterResource
import androidx.compose.runtime.collectAsState
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.aiosman.ravenow.AppState
import com.aiosman.ravenow.ConstVars
import com.aiosman.ravenow.GuestLoginCheckOut
import com.aiosman.ravenow.GuestLoginCheckOutScene
import com.aiosman.ravenow.LocalAppTheme
import com.aiosman.ravenow.LocalNavController
import com.aiosman.ravenow.MainActivity
@@ -82,14 +80,9 @@ import com.aiosman.ravenow.entity.AgentEntity
import com.aiosman.ravenow.entity.MomentEntity
import com.aiosman.ravenow.ui.NavigationRoute
import com.aiosman.ravenow.ui.composables.CustomAsyncImage
import com.aiosman.ravenow.ui.composables.StatusBarSpacer
import com.aiosman.ravenow.ui.composables.pickupAndCompressLauncher
import com.aiosman.ravenow.ui.composables.toolbar.CollapsingToolbarScaffold
import com.aiosman.ravenow.ui.composables.toolbar.ScrollStrategy
import com.aiosman.ravenow.ui.composables.toolbar.rememberCollapsingToolbarScaffoldState
import com.aiosman.ravenow.ui.index.IndexViewModel
import com.aiosman.ravenow.ui.index.tabs.profile.composable.GalleryGrid
import com.aiosman.ravenow.ui.post.MenuActionItem
import com.aiosman.ravenow.ui.index.tabs.profile.composable.GroupChatEmptyContent
import com.aiosman.ravenow.ui.index.tabs.profile.composable.OtherProfileAction
import com.aiosman.ravenow.ui.index.tabs.profile.composable.UserAgentsList
@@ -97,23 +90,13 @@ import com.aiosman.ravenow.ui.index.tabs.profile.composable.UserAgentsRow
import com.aiosman.ravenow.ui.index.tabs.profile.composable.UserContentPageIndicator
import com.aiosman.ravenow.ui.index.tabs.profile.composable.UserItem
import com.aiosman.ravenow.ui.modifiers.noRippleClickable
import com.aiosman.ravenow.ui.navigateToPost
import com.aiosman.ravenow.ui.post.MenuActionItem
import com.google.accompanist.systemuicontroller.rememberSystemUiController
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch
import java.io.File
import androidx.compose.foundation.rememberScrollState
import androidx.compose.ui.res.stringResource
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.border
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.input.nestedscroll.NestedScrollConnection
import androidx.compose.ui.input.nestedscroll.NestedScrollSource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.graphics.Brush
import java.text.NumberFormat
import java.util.Locale
import com.aiosman.ravenow.ui.points.PointsBottomSheet
import kotlin.math.max
@OptIn(ExperimentalFoundationApi::class, ExperimentalMaterialApi::class, ExperimentalMaterial3Api::class)
@@ -233,18 +216,15 @@ fun ProfileV3(
}
val pointsBalanceState = PointService.pointsBalance.collectAsState(initial = null)
// 计算导航栏背景透明度根据滚动位置从0到1
// 计算导航栏背景透明度根据滚动位置从0到1,在前段就达到完全不透明
val toolbarBackgroundAlpha by remember {
derivedStateOf {
if (!isSelf) {
1f
} else {
val maxScroll = 600f // 增加最大滚动距离,让渐变更平缓
val maxScroll = 120f // 大幅减少最大滚动距离,让前段就完全不透明
val progress = (scrollState.value.coerceAtMost(maxScroll.toInt()) / maxScroll).coerceIn(0f, 1f)
// 直接使用线性插值,尽快达到完全不透明
progress
}
}
}
// observe list scrolling
val reachedAgentsBottom by remember {
@@ -530,7 +510,7 @@ fun ProfileV3(
)
HorizontalPager(
state = pagerState,
modifier = Modifier.height(500.dp) // 固定滚动高度
modifier = Modifier.height(650.dp) // 固定滚动高度
) { idx ->
when (idx) {
0 -> GalleryGrid(
@@ -715,24 +695,18 @@ fun TopNavigationBar(
// 仅本人主页显示积分:收集全局积分
val pointsBalanceState = if (isSelf) PointService.pointsBalance.collectAsState(initial = null) else null
// 根据背景透明度和主题决定图标与边框颜色
val iconColor = if (backgroundAlpha >= 0.7f) appColors.text else Color.White
val cardBorderColor = if (backgroundAlpha >= 0.7f) appColors.divider else Color.White
val toolbarSolidColor = remember(backgroundAlpha, appColors) {
appColors.background.copy(alpha = backgroundAlpha.coerceIn(0f, 1f))
}
val toolbarOverlayBrush = remember(backgroundAlpha) {
val overlayAlpha = (1f - backgroundAlpha).coerceIn(0f, 1f) * 0.25f
if (overlayAlpha > 0f) {
Brush.verticalGradient(
colors = listOf(
Color.Black.copy(alpha = overlayAlpha),
Color.Transparent
)
)
// 根据背景透明度和暗色模式决定图标颜色
// 暗色模式下:图标始终为白色
// 亮色模式下根据背景透明度决定透明度为1时变黑否则为白色
val iconColor = if (AppState.darkMode) {
Color.White // 暗色模式下图标始终为白色
} else {
null
if (backgroundAlpha >= 1f) Color.Black else Color.White
}
val cardBorderColor = if (AppState.darkMode) {
Color.White // 暗色模式下边框应为白色
} else {
if (backgroundAlpha >= 1f) Color.Black else Color.White
}
Box(
@@ -743,25 +717,31 @@ fun TopNavigationBar(
val statusBarHeight = statusBarPadding.calculateTopPadding()
val navigationBarHeight = 56.dp // 增加导航栏高度,包括图标和额外空间
// 导航栏背景层,包括状态栏区域,根据滚动位置逐渐变白
// 导航栏背景层,包括状态栏区域,根据滚动位置逐渐显示实色填充
val totalHeight = statusBarHeight + navigationBarHeight
// 根据滚动位置计算背景颜色,从透明逐渐变为实色填充,尽快完成
val toolbarBackgroundColor = remember(backgroundAlpha) {
val progress = backgroundAlpha.coerceIn(0f, 1f)
if (AppState.darkMode) {
// 暗色模式下:从透明逐渐变为黑色实色填充
Color.Black.copy(alpha = progress)
} else {
// 亮色模式下:从透明逐渐变为白色实色填充
Color.White.copy(alpha = progress)
}
}
Box(
modifier = Modifier
.fillMaxWidth()
.height(totalHeight) // 状态栏高度 + 导航栏高度
.align(Alignment.TopCenter)
.background(toolbarSolidColor)
.background(
color = toolbarBackgroundColor // 实色填充,不使用渐变
)
toolbarOverlayBrush?.let { brush ->
Box(
modifier = Modifier
.fillMaxWidth()
.height(totalHeight)
.align(Alignment.TopCenter)
.background(brush)
)
}
// 功能按钮区域,图标和文字根据背景透明度改变颜色
Row(
@@ -773,12 +753,25 @@ fun TopNavigationBar(
horizontalArrangement = Arrangement.End,
verticalAlignment = Alignment.CenterVertically
) {
// 左侧:互动数据卡片
// 左侧:互动数据卡片(仅自己的界面显示)
if (isSelf) {
// 根据 toolbar 背景透明度动态调整卡片背景
val cardBackgroundColor = remember(backgroundAlpha) {
val smoothProgress = backgroundAlpha.coerceIn(0f, 1f)
if (AppState.darkMode) {
// 暗色模式:从半透明白色逐渐变为更不透明的白色
Color.White.copy(alpha = 0.52f + (0.48f * smoothProgress))
} else {
// 亮色模式:从半透明白色逐渐变为完全不透明的白色
Color.White.copy(alpha = 0.52f + (0.48f * smoothProgress))
}
}
Row(
modifier = Modifier
.height(24.dp)
.background(
color = Color.White.copy(alpha = 0.52f),
color = cardBackgroundColor,
shape = RoundedCornerShape(16.dp)
)
.border(
@@ -787,9 +780,7 @@ fun TopNavigationBar(
shape = RoundedCornerShape(16.dp)
)
.padding(horizontal = 8.dp)
.let {
if (isSelf) it.noRippleClickable { onPointsClick?.invoke() } else it
},
.noRippleClickable { onPointsClick?.invoke() },
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Center
) {
@@ -801,11 +792,7 @@ fun TopNavigationBar(
)
Spacer(modifier = Modifier.width(4.dp))
Text(
text = if (isSelf) {
pointsBalanceState?.value?.balance?.let { numberFormat.format(it) } ?: "--"
} else {
numberFormat.format(interactionCount)
},
text = pointsBalanceState?.value?.balance?.let { numberFormat.format(it) } ?: "--",
fontSize = 14.sp,
fontWeight = FontWeight.W500,
color = if (AppState.darkMode) Color.White else Color.Black, // 暗色模式下为白色,亮色模式下为黑色
@@ -815,7 +802,7 @@ fun TopNavigationBar(
Spacer(modifier = Modifier.width(16.dp))
// 中间:分享图标
// 中间:分享图标(仅自己的界面显示)
Image(
painter = painterResource(id = R.mipmap.menu_icon),
contentDescription = "分享",
@@ -828,10 +815,11 @@ fun TopNavigationBar(
)
Spacer(modifier = Modifier.width(16.dp))
}
// 右侧:菜单图标
// 右侧:菜单图标(三点图标)
Image(
painter = painterResource(id = R.mipmap.menu_ico),
painter = painterResource(id = R.drawable.rider_pro_more_horizon),
contentDescription = "菜单",
modifier = Modifier
.size(24.dp)