我们如何获得 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大小对应的padding转发给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 可组合项。这个可组合允许您手动测量和布置孩子。