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

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) }

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

对于测量和布局多个可组合项的复杂布局，请改用 Layout 可组合项。这种组合式可让您手动测量和布置子项。