下拉菜单填充

Question

在制作 compose 中的下拉菜单时，我遇到了一个问题，我的 DropdownMenu 始终会按照修改器中给定的 fillMaxWidth 填充。我的目标是添加填充，以便它与屏幕的内容匹配，但是向修改器添加填充不起作用......

@Composable
fun PriorityDropDown(
    priority: Priority,
    onPrioritySelected: (Priority) -> Unit
) {

    var expanded by remember { mutableStateOf(false) }
    val dropDownIconAngle: Float by animateFloatAsState(targetValue = if (expanded) 0f else -90f)

    Row(
        modifier = Modifier
            .fillMaxWidth()
            .background(MaterialTheme.colors.background)
            .height(PRIORITY_DROPDOWN_HEIGHT)
            .clickable { expanded = true }
            .border(
                width = 1.dp,
                shape = MaterialTheme.shapes.small,
                color = MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.disabled)
            ),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Canvas(
            modifier = Modifier
                .size(PRIORITY_INDICATOR_SIZE)
                .weight(1.5f),
            onDraw = {
                drawCircle(color = priority.color)
            }
        )

        Text(
            text = priority.name,
            style = MaterialTheme.typography.subtitle2,
            modifier = Modifier.weight(8f)
        )

        IconButton(
            onClick = { expanded = true },
            modifier = Modifier.weight(2f)
        ) {
            Icon(
                imageVector = Icons.Filled.ArrowDropDown,
                contentDescription = stringResource(R.string.drop_down_arrow),
                modifier = Modifier
                    .alpha(ContentAlpha.medium)
                    .rotate(dropDownIconAngle)
            )
        }

        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false },
            modifier = Modifier
                .fillMaxWidth()
        ) {
            // ...
        }
    }
}

没有填充的情况是怎样的：

硬编码是什么样的.fillMaxWidth(fraction = 0.942f)

Answer 1

添加 var rowSize by remember { mutableStateOf(Size.Zero) }

向行修改器添加：

.onGloballyPositioned { layoutCoordinates ->
    rowSize = layoutCoordinates.size.toSize()
}

然后到下拉修饰符：

.width(with(LocalDensity.current) { rowSize.width.toDp() })

解决了问题