Jetpack Compose中正确组合Modifier实现可调整大小组件的问题

你遇到的核心问题是Modifier的组合顺序和职责冲突：

1. 调用者传入的Modifier.size()会给组件添加强制固定尺寸的约束，后续内部动态更新的.size(size)无法突破这个约束，导致拖动手柄时尺寸无法变化。
2. 初始的size状态硬编码为200x200，没有将调用者期望的初始尺寸同步到状态中。

不要通过Modifier传递初始尺寸，而是给ResizableBox新增一个initialSize参数，专门用于设置初始尺寸，同时调整Modifier的组合顺序，确保内部动态尺寸能优先生效。

修正后的代码如下：

@Composable
fun ResizableBox(
    modifier: Modifier = Modifier,
    initialSize: DpSize = DpSize(200.dp, 200.dp)
) {
    var size by remember { mutableStateOf(initialSize) }

    Box(
        modifier = modifier
            .size(size)
            .background(Color.Red)
    ) {
        Handle(modifier = Modifier.align(Alignment.BottomEnd)) { delta ->
            size = DpSize(
                width = max(size.width + delta.x.dp, 48.dp), // 可选：添加最小尺寸限制，避免盒子过小
                height = max(size.height + delta.y.dp, 48.dp)
            )
        }
    }
}

1. 新增initialSize参数：明确区分调用者传入的通用Modifier（比如padding、border等）和组件专属的初始尺寸参数，避免职责混淆，同时让初始尺寸能正确同步到内部状态。
2. 调整Modifier顺序：将.size(size)放在modifier之后、.background之前。这样内部动态更新的尺寸会覆盖modifier中可能存在的非固定尺寸设置，同时modifier里的其他属性（比如padding）仍能正常生效。
3. 可选的最小尺寸限制：添加max()函数防止盒子被缩得太小，提升交互体验。

// 默认初始尺寸200x200，可正常调整
ResizableBox()

// 初始尺寸100x150，可正常调整
ResizableBox(initialSize = DpSize(100.dp, 150.dp))

// 同时添加自定义Modifier（比如padding）和初始尺寸
ResizableBox(
    modifier = Modifier.padding(16.dp),
    initialSize = DpSize(150.dp, 200.dp)
)

内容的提问来源于stack exchange，提问作者JonasVautherin