android 如何在向Material3 TopAppBar添加其他内容时保留色调颜色

col17t5w 于 2023-06-20 发布在 Android

关注(0)|答案(2)|浏览(186)

我正在使用Jetpack Compose和Material3开发Android应用程序。
我有一个由TopAppBar和LazyColumn组成的屏幕作为内容，通过scrollBehavior链接在一起以实现漂亮的材质色调高度变化：

我现在想添加一个过滤器布局，它应该看起来和感觉像它的顶部应用程序栏的一部分

它应该是粘性的
应该具有相同的音调高度

我的简单实现没有做到这一点：滤波器没有音调升高：

@Composable
fun TestScreen() {
    val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior()
    Scaffold(
        topBar = {
            Column {
                TopAppBar(
                    title = { Text("Material3 top app bar") },
                    scrollBehavior = scrollBehavior,
                )
                Text(
                    text = "Filter - Filter - Filter - Filter - Filter",
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(30.dp)
                )
                Divider()
            }
        },
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection)
    ) { contentPadding ->
        LazyColumn(Modifier.padding(contentPadding)) {
            items(100) { index ->
                Text(
                    text = "item $index",
                    modifier = Modifier.fillMaxWidth()
                )
            }
        }
    }
}

那么我该如何正确地做到这一点呢？可悲的是，与Material2不同，我找不到“空”的TopAppBar。

android

来源：https://stackoverflow.com/questions/76474300/how-to-retain-tonal-colours-when-adding-additional-content-to-a-material3-topapp

2条答案

按热度按时间

inkz8wg91#

您好，您可以使用此代码自定义工具栏：

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TestScreen() {
    val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior()
    Scaffold(
    topBar = {
        Column {
            TopAppBar(
                title = { Text("Material3 top app bar") },
                scrollBehavior = scrollBehavior,
            )
            val colorTransitionFraction = scrollBehavior.state.overlappedFraction
            val fraction = if (colorTransitionFraction > 0.01f) 1f else 0f
            val appBarContainerColor by animateColorAsState(
                targetValue = lerp(
                    MaterialTheme.colorScheme.surface,
                    MaterialTheme.colorScheme.surfaceColorAtElevation(3.dp),
                    FastOutLinearInEasing.transform(fraction)
                ),
                animationSpec = spring(stiffness = Spring.StiffnessMediumLow), label = ""
            )
            Text(
                text = "Filter - Filter - Filter - Filter - Filter",
                modifier = Modifier
                    .fillMaxWidth()
                    .height(30.dp)
                    .background(appBarContainerColor)
            )
        }
    },
    modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection)
    ) { contentPadding ->
        LazyColumn(Modifier.padding(contentPadding)) {
            items(100) { index ->
                Text(
                    text = "item $index",
                    modifier = Modifier.fillMaxWidth()
                )
            }
       }
    }
}

展开查看全部

赞(0）回复(0）举报 2023-06-20

eulz3vhy2#

Amiir Kalantari提供了一个漂亮的答案：）
这个答案建立在他的代码上，使其可重用并包括正确的导入。所有的赞美都归于他，因为他弄清楚了困难的部分！

import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.core.FastOutLinearInEasing
import androidx.compose.animation.core.Spring
import androidx.compose.animation.core.spring
import androidx.compose.foundation.background
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.TopAppBarScrollBehavior
import androidx.compose.material3.surfaceColorAtElevation
import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.composed
import androidx.compose.ui.graphics.lerp
import androidx.compose.ui.unit.dp
// modelled after https://stackoverflow.com/a/76475561/12871582
public fun Modifier.topAppBarBackground(
    scrollBehavior: TopAppBarScrollBehavior,
): Modifier = composed {
    val colorTransitionFraction = scrollBehavior.state.overlappedFraction
    val fraction = if (colorTransitionFraction > 0.01f) 1f else 0f
    val appBarContainerColor by animateColorAsState(
        targetValue = lerp(
            MaterialTheme.colorScheme.surface,
            MaterialTheme.colorScheme.surfaceColorAtElevation(3.dp),
            FastOutLinearInEasing.transform(fraction)
        ),
        animationSpec = spring(stiffness = Spring.StiffnessMediumLow), label = ""
    )
    background(appBarContainerColor)
}

展开查看全部

赞(0）回复(0）举报 2023-06-20

我来回答

android 如何在向Material3 TopAppBar添加其他内容时保留色调颜色

2条答案

相关问题

热门标签

最新问答