标签: jetpack-compose-accompanist

我正在使用 Accompanist 的 JetPack Compose Pager，我想知道如何准确知道我的页面何时显示在屏幕上。就像ViewPager 中的onPageSelected方法一样。

这是我的代码：

HorizontalPager(
        state = pagerState,
        modifier = Modifier
            .fillMaxSize()
            .background(MaterialTheme.colors.background)
    ) { page ->
         // This method reinvoked many times.

      }

因为目前每个重组都会从 Pager 调用该回调方法。

我正在学习伴奏寻呼机，我想在寻呼机上设置效果。

我想像文档一样使用lerp方法

Modifier.graphicsLayer {
    // Calculate the absolute offset for the current page from the
    // scroll position. We use the absolute value which allows us 
    // to mirror any effects for both directions
    val pageOffset = 
        calculateCurrentOffsetForPage(page).absoluteValue

    // We animate the scaleX + scaleY, between 85% and 100%
    lerp(
      start = 0.85f,
      stop = 1f,
      fraction = 1f - pageOffset.coerceIn(0f, 1f)).also { scale ->
        scaleX = scale
        scaleY = scale
      }

    // We animate the alpha, between 50% and …

我想要与 TikTok 的个人资料屏幕类似的效果。顶部是ProfilPicture和username，下面是一个stickyHeader带有TabRow( Posts, Drafts, Likes, Favorites) 的 ，下面是HorizontalPager带有 4 个屏幕 ( Posts, Drafts, Likes, Favorites) 的 ，每个屏幕都包含一个列表。

如果我在 Compose 中构建它，我会崩溃，因为我无法将两个嵌套LazyColumns在一起。

这是我尝试做的事情的简短版本：

val tabList = listOf("Posts", "Drafts", "Likes", "Favorites")
val pagerState: PagerState = rememberPagerState(initialPage = 0)
val coroutineScope = rememberCoroutineScope()

LazyColumn(modifier = Modifier.fillMaxSize()) {
    item {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(50.dp),
            contentAlignment = Alignment.Center
        ) {
            //Profile Header (Picture, …

我知道普通的底板可以这样设置

rememberModalBottomSheetState(
  initialValue = ModalBottomSheetValue.Hidden, 
  confirmStateChange = { it != ModalBottomSheetValue.HalfExpanded },
)

这样它就永远不会扩大一半。但是，如果我想在伴奏导航中使用底页执行同样的操作该怎么办？

我在 Jetpack compose 中创建了一个相当经典的折叠图像布局，其中屏幕顶部有一个图像，该图像视差滚动消失，并且在某个时刻我将工具栏背景从透明更改为primarySurface。这一切都运行得很好。

我现在希望在顶部有一个图像寻呼机，而不是单个图像，但垂直滚动消耗了屏幕顶部的所有触摸。我尝试添加 NestedScrollConnection 但我似乎仍然只在一个轴上获得 preScroll 增量。显然，我什至无法在该区域中添加图标来进行手动寻呼机滚动而不消耗点击。一旦我删除verticalScroll从我的列中删除 ，我就能够获取寻呼机的水平滚动事件。

我正在使用 Compose 1.0.2 和 Accompanist 0.18 寻呼机和插图库。

这是我想要添加寻呼机的现有代码的要点。如何让寻呼机和垂直滚动同时工作？

val scrollState = rememberScrollState()
Box {
    val imageHeight =
        if (LocalConfiguration.current.orientation == Configuration.ORIENTATION_LANDSCAPE) 180.dp else 300.dp
    Box {
        // I want to insert a horizontal pager here
        HeaderImage(
            scrollPosition = scrollState.value,
            info = item.heroImages.first(),
            imageHeight = imageHeight
        )
    }
    val appBarHeight = with(LocalDensity.current) { 56.dp.toPx() }
    val scrollHeight = with(LocalDensity.current) { imageHeight.toPx() - appBarHeight }

    Column(
        Modifier
            .verticalScroll(scrollState)
            .padding(top = …

我正在使用Google 的 Accompanist Horizo​​ntal Pager，并且我需要寻呼机来包装内容大小。由于某种原因它填满了最大尺寸。目前它是约束布局的子级，但是我尝试将其放入具有Modifier.weight(1f)相同结果的另一个列内。另外，verticalAlignment 不起作用，孩子居中。

截屏; 绿色-寻呼机，红色-它是孩子。

撰写版本：1.0.5；寻呼机版本：0.21.3-beta

HorizontalPager(
            state = stickerBookState.pagerState,
            modifier = Modifier
                .constrainAs(pager) {
                    top.linkTo(pagerNavigator.bottom, 16.dp)
                    linkTo(parent.start, parent.end)
                    height = Dimension.wrapContent // for whatever reason it's actual size if fillConstraints / fillMaxSize
                    width = Dimension.fillToConstraints
                }.background(PmColors.CompletedGreen),
            verticalAlignment = Alignment.Top, // this one also doesn't seem to work
            count = model.pages.size,
        ) { pageIndex ->
            val pageData = model.pages[pageIndex]
            @OptIn(ExperimentalFoundationApi::class)
            LazyVerticalGrid(
                modifier = Modifier
                    .wrapContentSize()
                    .background(PmColors.AlertRed),
                cells = GridCells.Fixed(2)
            ) {
                items(pageData) …

我SwipeRefresh在撰写中使用视图（来自accompanist）。我在LazyVerticalGrid里面，网格填充来自网络的分页数据。如果分页数据中没有内容，我将显示空状态视图。当有一些数据时，滑动刷新功能就会起作用。LazyVerticalGrid问题是，如果没有数据，我无法进行滑动刷新，但同样有效LazyColumn（两种情况都已NoContentView显示）。

@Composable
fun GridItems(
    searchViewModel: SearchViewModel
) {
    var isRefreshing by remember { mutableStateOf(false) }
    val posts = remember { searchViewModel.posts }.collectAsLazyPagingItems()

    Scaffold(
        topBar = { MyTopBar() }
    ) { innerPadding ->
        SwipeRefresh(
            state = rememberSwipeRefreshState(isRefreshing = isRefreshing),
            onRefresh = { searchViewModel.getPosts() }
        ) {
            Column(modifier = Modifier.padding(innerPadding)) {
                LazyVerticalGrid(
                    cells = GridCells.Fixed(3),
                    modifier = modifier.padding(horizontal = 3.dp)
                ) {
                    items() {
                        MySinglePostItem()
                    }

                    posts.apply {
                        when { …

情况

我正在使用Kotlin&编写一个非常简单的应用程序Android Jetpack Compose

我有一个scaffold包含我的navHost和一个bottomBar. 我可以用它bottomBar在三个主屏幕之间导航。其中一个主屏幕有一个详细信息屏幕，该屏幕不应显示bottomBar.

我的代码

到目前为止，这是小菜一碟：

// MainActivitys onCreate

setContent {
    val navController = rememberAnimatedNavController()
    val navBackStackEntry by navController.currentBackStackEntryAsState()
    val currentRoute = navBackStackEntry?.destination?.route?.substringBeforeLast("/")

    BottomBarNavTestTheme {
        Scaffold(
            bottomBar = {
                if (currentRoute?.substringBeforeLast("/") == Screen.Detail.route) {
                    MyBottomNavigation(
                        navController,
                        currentRoute,
                        listOf(Screen.Dashboard, Screen.Map, Screen.Events) // main screens
                    )
                }
            }
        ) { innerPadding ->
            NavHost( // to be replaced by AnimatedNavHost
                navController = navController,
                startDestination = Screen.Dashboard.route,
                modifier = …

我已尝试从本文中进行伴奏库导航，并且我想防止当我单击底部工作表的背景（灰色区域）时关闭底部工作表并使其根本不可单击，我该如何实现这一点？

这是链接中的代码

@Composable
fun MyApp() {
    val navController = rememberNavController()
    val bottomSheetNavigator = rememberBottomSheetNavigator()
    navController.navigatorProvider += bottomSheetNavigator


    ModalBottomSheetLayout(
        bottomSheetNavigator = bottomSheetNavigator
    ) {
        NavHost(navController, startDestination = "home") {
            composable(route = "home") {
                Button(onClick = { navController.navigate("sheet") }) {
                    Text("Click me to see something cool!")
                }
            }
            bottomSheet(route = "sheet") {
                Text("This is a cool bottom sheet!")
                Button(onClick = { navController.navigate("home") }) {
                    Text("Take me back, please!")
                }
                Spacer(modifier = Modifier.padding(200.dp))
            }
        }
    }
}

我的应用程序整体性能相当不错，唯一 FPS 下降的部分是在伴奏者滑动 Horizo​​ntalPager 时。

每个页面都有一个简单的 LazyVerticalGrid，有 3 个固定列，但与 XML 相比，性能要差得多。

LazyVerticalGrid 的外观如下：

出于测试目的，我在 XML 中开发了相同的设置，以使用 Perfetto 和 Android Studio 编译器进行比较。与 XML 相比，Jetpack Compose 版本具有更多的 Janky 框架。

这是 Perfetto 中 compose 的结果：

这里是 XML：

此外，每次我滑动 Horizo​​ntalPager 时，Profiler 都会显示一堆卡顿的帧：

我拥有 Jetpack Compose 的基本知识，并且还阅读了 Android 开发人员 Compose 性能指南，我非常确定我没有做任何导致大量重组的愚蠢事情。

这是我在测试项目中使用的代码：

可滚动 TabRow + Horizo​​ntalPager：

val tabList = listOf("Following", "Trending", "New", "Top", "Most Shared", "Most Saved", "All")
val pagerState: PagerState = rememberPagerState(initialPage = 1)
val coroutineScope = rememberCoroutineScope()

Column(
    modifier = Modifier
        .fillMaxSize()
        .background(MaterialTheme.colors.background) …