Compose 中的 CollapsingToolbar 和 Button Sticky

Question

我正在尝试在Compose中实现 CollapsingToolbar，但我通过 inte.net 找到的示例无法满足我的需求。 我曾经使用 xml 并且相同的布局是：

-AppBarLayout
  -CollapsingToolbarLayout
    -ConstraintLayout
      -ImageView(parallax, centerCrop)
      -Toolbar
-NestedScrollView
-FloatingButton (anchorGravity="bottom|end")
-Button(sticky)

我已经尝试了很多东西，但困难的是拥有FloatingButton （可以是任何其他视图，而不是特别是FAB ）。

演示：

我做的parallax效果如下：

Box(
   modifier = Modifier.graphicsLayer { 
        translationy = -scroll.value.toFloat() / 2f
        alpha = (-1f / headerHeightPx) * scroll.value + 1
   }
) { Image... }

我还找到了Compose Collapsing Toolbar library ，但我宁愿尽可能不使用任何库。

我已经看到有一个 Material3 和一个TopAppBar ，也许它会起作用。

更新

我也尝试过Material3库，但没有按预期工作，因为我的行为破坏了它应有的方式。

我在想的是创建一个Box或者因为我想要一个Surface并在其上包含Icon和Image以及中心Box 。

我创建了一个简单的图像来描述我的想法，这也许是一个很好的开始方式。

在这里，我需要链接List的滚动并使用.value创建animation或更改Image的Alpha ，然后在折叠后将elevation添加到Surface 。

在第二张图片中，中心框没有以相同的方式对齐，但我不想更改它，这是一个错误的油漆。

所以总结应该是：

创建此Composable并伪造TopAppBar ，以便它在高度为56.dp作为TopAppBar的最小尺寸时停止折叠。

滚动时， Image应该设置动画或更改其 alpha（或视差效果），然后将背景转换为白色作为过渡。

然后我看到的问题是我需要添加一些计算来检测exitUntilCollapsed的行为假设我想在列表的第一项可见时取消折叠。

Answer 1

根据您的绘图建议尝试一下：

import androidx.compose.animation.core.animateDpAsState
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Button
import androidx.compose.material.ButtonDefaults
import androidx.compose.material.Divider
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Alignment.Companion.BottomCenter
import androidx.compose.ui.Alignment.Companion.Center
import androidx.compose.ui.Alignment.Companion.CenterVertically
import androidx.compose.ui.Alignment.Companion.TopStart
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.max
import com.canopas.base.ui.AppTheme
import com.canopas.base.ui.ColorPrimary
import com.canopas.base.ui.White
import com.canopas.ui.R
import kotlin.math.min


Column(modifier = Modifier.fillMaxSize()) {
        val items = (1..100).map { "Item $it" }
        val lazyListState = rememberLazyListState()
        val scrollOffset: Float = min(
            1f,
            1 - (lazyListState.firstVisibleItemScrollOffset / 200f + lazyListState.firstVisibleItemIndex)
        )
        val imageSize by animateDpAsState(targetValue = max(0.dp, 300.dp * scrollOffset))
        Box(contentAlignment = Center) {
            Image(
                painterResource(id = R.drawable.ic_intro_screen_image1),
                modifier = Modifier.size(imageSize),
                contentScale = ContentScale.FillWidth,
                contentDescription = "Food Category thumbnail"
            )
            Row(
                Modifier
                    .height(56.dp)
                    .background(Color.White).align(BottomCenter),
                horizontalArrangement = Arrangement.Center, verticalAlignment = CenterVertically
            ) {
                Text(text = "Title", modifier = Modifier.padding(vertical = 12.dp).fillMaxSize(), textAlign = TextAlign.Center)
            }
            IconButton(onClick = { /*TODO*/ }, modifier = Modifier.align(TopStart)) {
            Icon(imageVector = Icons.Default.ArrowBack, contentDescription = "")
        }
        }

        LazyColumn(
            Modifier
                .fillMaxWidth()
                .weight(1f),
            lazyListState,
        ) {
            items(items) {
                Text(
                    text = it,
                    Modifier
                        .background(Color.White)
                        .fillMaxWidth()
                        .padding(8.dp)
                )
            }
        }

        Column(
            modifier = Modifier.fillMaxWidth(),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Divider(modifier = Modifier.fillMaxWidth(), color = ColorPrimary)
            Spacer(modifier = Modifier.height(10.dp))
            Button(
                onClick = {
                },
                shape = RoundedCornerShape(25.dp),
                colors = ButtonDefaults.buttonColors(
                    backgroundColor = ColorPrimary,
                ),
                elevation = ButtonDefaults.elevation(
                    defaultElevation = 0.dp,
                    pressedElevation = 0.dp,
                    disabledElevation = 0.dp,
                    hoveredElevation = 0.dp,
                    focusedElevation = 0.dp
                ),
                modifier = Modifier
                    .wrapContentHeight()
            ) {
                Text(
                    text = "Button",
                    color = White,
                    style = AppTheme.typography.buttonStyle,
                    modifier = Modifier.padding(vertical = 6.dp)
                )
            }
            Spacer(modifier = Modifier.height(10.dp))
        }
    }