- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
属性 app:liftOnScroll="true"
在 AppBarLayout 中,当关联 View 与 app:layout_behavior="@string/appbar_scrolling_view_behavior"
被滚动(通常是 RecyclerView
或带有 ScrolelView
的任何内容)。
Jetpack Compose 中有这样的东西吗?我找不到兼容的行为,TopAppBar
也没有。也不是常规的 Text
(在它们的任何参数或修饰符中)。
简而言之 - 有没有办法提升类似工具栏的 View ,但只有在滚动底层列表/可滚动内容时(而不是在它的顶部)?
最佳答案
不幸的是,它还不支持。但是您可以自己创建它。您需要使用可滚动组件包装您的主要内容,并根据主要内容的滚动状态为 AppBar 的高度设置动画。
这是示例:
/**
* AppBarScaffold displays TopAppBar above specified content. Content is wrapped with
* scrollable Column. TopAppBar's elevation is animated depending on content scroll state.
*
* Back arrow is shown only if [onBackPress] is not null
*
* @param onBackPress Call back when back arrow icon is pressed
*/
@Composable
fun AppBarScaffold(
modifier: Modifier = Modifier,
title: String = "",
onBackPress: (() -> Unit)? = null,
actions: @Composable RowScope.() -> Unit = {},
content: @Composable () -> Unit
) {
val scrollState = rememberScrollState()
val contentColor = contentColorFor(MaterialTheme.colors.background)
val elevation by animateDpAsState(if (scrollState.value == 0) 0.dp else AppBarDefaults.TopAppBarElevation)
Surface(
modifier = modifier.statusBarsPadding(),
color = MaterialTheme.colors.background,
contentColor = contentColor
) {
val topBar = @Composable { AppBar(title, onBackPress, actions, elevation) }
val body = @Composable {
Column(modifier = Modifier.verticalScroll(state = scrollState)) {
content()
}
}
SubcomposeLayout { constraints ->
val layoutWidth = constraints.maxWidth
val layoutHeight = constraints.maxHeight
val looseConstraints = constraints.copy(minWidth = 0, minHeight = 0)
layout(layoutWidth, layoutHeight) {
val topBarPlaceables = subcompose(AppBarContent.AppBar, topBar).map {
it.measure(looseConstraints)
}
val topBarHeight = topBarPlaceables.maxByOrNull { it.height }?.height ?: 0
val bodyContentHeight = layoutHeight - topBarHeight
val bodyContentPlaceables = subcompose(AppBarContent.MainContent) {
body()
}.map { it.measure(looseConstraints.copy(maxHeight = bodyContentHeight)) }
bodyContentPlaceables.forEach {
it.place(0, topBarHeight)
}
topBarPlaceables.forEach {
it.place(0, 0)
}
}
}
}
}
@Composable
fun BackArrow(onclick: () -> Unit) {
IconButton(onClick = { onclick() }) {
Icon(imageVector = Icons.Default.ArrowBack, "Back Arrow")
}
}
@Composable
private fun AppBar(
title: String = "",
onBackPress: (() -> Unit)? = null,
actions: @Composable RowScope.() -> Unit = {},
elevation: Dp
) {
var navigationIcon: @Composable (() -> Unit)? = null
onBackPress?.let {
navigationIcon = { BackArrow { onBackPress.invoke() } }
}
Surface(
color = MaterialTheme.colors.background,
contentColor = MaterialTheme.colors.onBackground,
elevation = elevation,
shape = RectangleShape
) {
Box(
contentAlignment = Alignment.Center,
modifier = Modifier.fillMaxWidth().padding(AppBarDefaults.ContentPadding).height(AppBarHeight)
) {
navigationIcon?.let {
Row(TitleIconModifier.align(Alignment.CenterStart), verticalAlignment = Alignment.CenterVertically) {
CompositionLocalProvider(
LocalContentAlpha provides ContentAlpha.high,
content = it
)
}
}
Row(
horizontalArrangement = Arrangement.Center,
modifier = Modifier.fillMaxWidth(0.5f).fillMaxHeight(),
verticalAlignment = Alignment.CenterVertically
) {
Text(
text = title,
style = MaterialTheme.typography.h4,
textAlign = TextAlign.Center
)
}
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
Row(
Modifier.align(Alignment.CenterEnd).fillMaxHeight(),
horizontalArrangement = Arrangement.End,
verticalAlignment = Alignment.CenterVertically,
content = actions
)
}
}
}
}
private val AppBarHorizontalPadding = 4.dp
private val TitleIconModifier = Modifier.fillMaxHeight().width(72.dp - AppBarHorizontalPadding)
private val AppBarHeight = 56.dp
enum class AppBarContent {
AppBar,
MainContent
}
关于android - Jetpack Compose 中是否有类似 AppBarLayout 的 "liftOnScroll"属性的东西?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68149115/
我目前状态的视频,以便更好地了解我的情况: video RecyclerView 上面的所有东西都在 AppbarLayout 里面 具有类似行为的 reddit 应用示例: video 目标: 1-
我正在创建一个带有 header 的 RecyclerView,当您向上滚动 RecyclerView 时 header 会折叠。我可以通过下面的布局非常接近地实现这一点,使用透明的 AppBarLa
我有一个 AppBarLayout 和 NestedScrollView。我希望 NestedScrollView 每当它向下滚动时,AppBarLayout 也应该优雅地展开,而 NestedScr
我正在尝试获取 AppBarLayout 的布局参数,但出现此错误。 java.lang.ClassCastException: android.support.design.widget.Coord
我正在为我的应用程序实现自定义 header 。在 AppBarLayout 中,我使用工具栏和我的自定义布局(名为 CustomHeader)。 我的 CustomHeader 有左下角和右下角圆角
我是编程新手,我想添加一个设置菜单按钮。 就像图片上的一样,我的应用程序没有显示三点按钮。 MainActivity.java : public class MainActivity extends
我有一个带有 fragment 的 ViewPager,其中包含一个 RecyclerView。 CollapsingTollbarLayout 位于 ViewPager 之上。一切正常,除了在 Re
我想做这个, 在 Android Studio 的预览中看起来不错,但在运行时我得到这个 正如您在屏幕开头看到的那样,颜色是白色,我想添加我自己的颜色,在本例中为绿色。 最初它使用的是 Cordina
我正在使用此布局来尝试实现可折叠的应用栏。 android:theme="@style/ThemeOverlay.AppCompat.Dark"
所以我有一个带有 AppBarLayout 和 CollapsingToolbarLayout 的 CoordinatorLayout。这是展开(左图)和折叠(右图)时的样子 我遇到的第一个问题是,当
我尽量让红色布局滚动,这样他就隐藏了,TabLayout 就留在了最上面 我需要红色布局来为我填充圆形头像的高度。我尝试将TabLayout滚动到顶部,红色布局继续滚动隐藏? 无法发送图片,请点击链接
我正在尝试从顶部为 AppBarLayout 设置动画,就像 this 中的工具栏一样视频。 这是我的布局
我需要我的 AppBarLayout 具有透明背景。 当我将 AppBarLayout 的背景更改为具有 @null 或 @android:color/transparent 时,我在工具栏的边框处看
使用 AppBarLayout 时出错,我尝试了 Clean Project 和 Rebuild Project,但它们没有用。 运行程序没有问题。这是为什么? XML 文件:
我想要实现的结果与图片上的结果几乎相同,但没有折叠并且在工具栏文本下有选项卡布局。我使用 CollapsingTollbarLayout 完成了它,但如果我不希望它折叠,我认为这不是一个好方法。我应该
我在 CoordinatorLayout 和 RecyclerView 中使用 AppBarLayout、CollapsingToolbarLayout 创建了折叠透明搜索栏。让 recyclerVi
Android Google Play 应用如何在用户点击 AppBarlayout 时动态改变颜色? 我尝试了以下方法 tabLayout.setOnTabSelectedListener(new
在页面上的任意位置下拉(过度滚动)时,我一直在努力实现 AppBarLayout 的缩放效果。 期望效果示例: https://android-arsenal.com/details/1/4443 我
当我尝试为 AppBarLayout 设置一个特定的高度值时,阴影完全消失了。 这是错误还是预期的行为? 我使用的是设计库的 26.0.0 版。 最佳答案 设置属性动画
我在 AppBarLayout 中使用了 CollapsingToolbarLayout,用户可以使用 AppBarLayout 中的 setExpanded(boolean) 方法展开或折叠它。 问
我是一名优秀的程序员,十分优秀!