我们如何获取可组合项在屏幕中的位置/大小？

Question

在 Compose 中，我们如何获取可组合项在屏幕中的位置或大小？例如，我试图将地图相机聚焦在特定边界之间并添加填充。这里我需要获取与寻呼机顶部位置和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

谢谢 ！

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可组合项。此可组合项允许您手动测量和布置子项。