Skip to content

Commit d3121c7

Browse files
committed
调整TopAppBar的largeTitle动画
1 parent 1467815 commit d3121c7

File tree

1 file changed

+35
-20
lines changed
  • miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic

1 file changed

+35
-20
lines changed

miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/TopAppBar.kt

Lines changed: 35 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,11 @@ import androidx.compose.foundation.layout.WindowInsets
1818
import androidx.compose.foundation.layout.WindowInsetsSides
1919
import androidx.compose.foundation.layout.captionBar
2020
import androidx.compose.foundation.layout.displayCutout
21+
import androidx.compose.foundation.layout.fillMaxHeight
2122
import androidx.compose.foundation.layout.fillMaxWidth
2223
import androidx.compose.foundation.layout.heightIn
2324
import androidx.compose.foundation.layout.navigationBars
25+
import androidx.compose.foundation.layout.offset
2426
import androidx.compose.foundation.layout.only
2527
import androidx.compose.foundation.layout.padding
2628
import androidx.compose.foundation.layout.statusBars
@@ -52,12 +54,14 @@ import androidx.compose.ui.platform.LocalDensity
5254
import androidx.compose.ui.text.font.FontWeight
5355
import androidx.compose.ui.unit.Constraints
5456
import androidx.compose.ui.unit.Dp
57+
import androidx.compose.ui.unit.IntOffset
5558
import androidx.compose.ui.unit.Velocity
5659
import androidx.compose.ui.unit.dp
5760
import androidx.compose.ui.util.fastFirst
5861
import top.yukonga.miuix.kmp.basic.TopAppBarState.Companion.Saver
5962
import top.yukonga.miuix.kmp.theme.MiuixTheme
6063
import kotlin.math.abs
64+
import kotlin.math.max
6165
import kotlin.math.roundToInt
6266

6367
/**
@@ -90,7 +94,7 @@ fun TopAppBar(
9094
) {
9195
val density = LocalDensity.current
9296
val expandedHeightPx by rememberUpdatedState(
93-
with(density) { TopAppBarExpandedHeight.toPx().coerceAtLeast(0f) }
97+
with(density) { (TopAppBarExpandedHeight).toPx().coerceAtLeast(0f) }
9498
)
9599
SideEffect {
96100
// Sets the app bar's height offset to collapse the entire bar's height when content is
@@ -560,6 +564,10 @@ private fun TopAppBarLayout(
560564
targetValue = if (extOffset > 1f) 0f else 10f,
561565
animationSpec = tween(durationMillis = 250)
562566
)
567+
// Subtract the scrolledOffset from the maxHeight. The scrolledOffset is expected to be
568+
// equal or smaller than zero.
569+
val scrolledOffsetValue = scrolledOffset.offset()
570+
val heightOffset = if (scrolledOffsetValue.isNaN()) 0 else scrolledOffsetValue.roundToInt()
563571

564572
Layout(
565573
{
@@ -595,15 +603,25 @@ private fun TopAppBarLayout(
595603
Modifier
596604
.layoutId("largeTitle")
597605
.fillMaxWidth()
598-
.padding(horizontal = horizontalPadding)
599-
.graphicsLayer(alpha = 1f - (abs(scrolledOffset.offset()) / expandedHeightPx * 2).coerceIn(0f, 1f))
600606
) {
601-
Text(
602-
text = largeTitle,
603-
maxLines = 1,
604-
fontSize = MiuixTheme.textStyles.title1.fontSize,
605-
fontWeight = FontWeight.Normal
606-
)
607+
Box(
608+
Modifier
609+
.fillMaxWidth()
610+
.padding(top = 56.dp)
611+
.padding(horizontal = horizontalPadding)
612+
.graphicsLayer(alpha = 1f - (abs(scrolledOffset.offset()) / expandedHeightPx * 2).coerceIn(0f, 1f))
613+
.clipToBounds()
614+
){
615+
Text(
616+
modifier = Modifier.offset{IntOffset(0,heightOffset)},
617+
text = largeTitle,
618+
maxLines = 1,
619+
fontSize = MiuixTheme.textStyles.title1.fontSize,
620+
fontWeight = FontWeight.Normal
621+
)
622+
}
623+
624+
607625
}
608626
},
609627
modifier = Modifier
@@ -640,16 +658,6 @@ private fun TopAppBarLayout(
640658
.fastFirst { it.layoutId == "title" }
641659
.measure(constraints.copy(minWidth = 0, maxWidth = maxTitleWidth, minHeight = 0))
642660

643-
val largeTitlePlaceable =
644-
measurables
645-
.fastFirst { it.layoutId == "largeTitle" }
646-
.measure(constraints.copy(minWidth = 0, minHeight = 0))
647-
648-
// Subtract the scrolledOffset from the maxHeight. The scrolledOffset is expected to be
649-
// equal or smaller than zero.
650-
val scrolledOffsetValue = scrolledOffset.offset()
651-
val heightOffset = if (scrolledOffsetValue.isNaN()) 0 else scrolledOffsetValue.roundToInt()
652-
653661

654662
val layoutHeight =
655663
(if (constraints.maxHeight == Constraints.Infinity) {
@@ -658,6 +666,13 @@ private fun TopAppBarLayout(
658666
constraints.maxHeight + heightOffset
659667
}).coerceAtLeast(0)
660668

669+
val largeTitlePlaceable =
670+
measurables
671+
.fastFirst { it.layoutId == "largeTitle" }
672+
.measure(
673+
constraints.copy(minWidth = 0)
674+
)
675+
661676
layout(constraints.maxWidth, layoutHeight) {
662677
val verticalCenter = 60.dp.roundToPx() / 2
663678

@@ -688,7 +703,7 @@ private fun TopAppBarLayout(
688703
// Large title
689704
largeTitlePlaceable.placeRelative(
690705
x = 0,
691-
y = layoutHeight - largeTitlePlaceable.height
706+
y = 0
692707
)
693708
}
694709
}

0 commit comments

Comments
 (0)