如何在屏幕中获取Composable的位置/大小？

Question

在Compose中，我们如何获取屏幕上某个Composable的位置或大小？例如，我想将地图镜头聚焦于特定边界并添加填充。在这里，我需要获取与页面顶部位置和TopBar底部位置相对应的填充。

目前该屏幕的代码如下:

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。

谢谢！

- Guimareshh

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 组合项。该组合项允许您手动测量和布局子组件。

- Gabriele Mariotti

---

你也可以使用 positionInRoot() 方法从坐标中获取全局位置（已添加到答案中）。 - codingjeremy