我们如何在屏幕中获取 Composable 的 position/size？

Question

在 Compose 中，我们如何获取 Composable 在屏幕中的位置或大小？例如，我正在尝试将地图相机聚焦在特定边界之间并添加填充。这里需要获取pager顶部位置和TopBar底部位置对应的padding。

目前该画面的代码如下：

BoxWithConstraints {
        MapViewWithMarkers(...)
        TopAppBar(
            modifier = Modifier
                .fillMaxWidth()
                .statusBarsPadding(),
            backgroundColor = Color.Transparent,
            elevation = 0.dp,
        )
        HorizontalPager(
            state = pagerState,
            modifier = Modifier
                .align(Alignment.BottomCenter)
                .fillMaxWidth()
                .navigationBarsPadding()
                .padding(bottom = 32.dp),
            itemSpacing = 8.dp,
        ) { page ->
            val hikeOnMapCard = hikeMarkerList[page]
            HikeOnMapCard(hikeOnMapCard) {
                viewModel.hikeOnMapCardClicked(hikeOnMapCard.id)
            }
        }
    }

我想将与此屏幕上的 TopAppBar 大小和 Pager 大小对应的填充转发给 MapViewWithMarkers Composable

谢谢！

Answer 1

要获取可组合项的位置和大小，您可以使用 onGloballyPositioned 修饰符。

类似于：

 var sizeTopBar by remember { mutableStateOf(IntSize.Zero) }
 var positionInRootTopBar by remember { mutableStateOf(Offset.Zero) }

 TopAppBar(
        modifier = Modifier
          .onGloballyPositioned { coordinates ->
             // size
             sizeTopBar = coordinates.size

             // global position (local also available)
             positionInRootTopBar = coordinates.positionInRoot() 

          }
       //...
 )

对于测量和布局多个可组合项的复杂布局，请改用 Layout 可组合项。此可组合项允许您手动测量和布置子项。

我们如何在屏幕中获取 Composable 的 position/size？

How do we get the position/size of a Composable in a screen?

android

android-jetpack-compose