Android Jetpack Compose中Row布局逻辑及子Row需fillMaxWidth的原因

我正在学习Android Jetpack Compose开发，想要实现屏幕左上角返回按钮、中间显示文本的布局。最初父Row设置了fillMaxWidth，子Row仅配置horizontalArrangement = Arrangement.Center，结果返回按钮与文本靠左并排；给子Row添加fillMaxWidth()后布局正常。疑惑为何子Row需设置该修饰符，父级已配置的情况下后台运行逻辑是怎样的？

最初代码（布局异常） #

Row(modifier = Modifier
        .padding(5.dp)
        .fillMaxWidth()) {
        Image(
            modifier = Modifier
                .clickable {
                    onBackClick()
                }
                .padding(4.dp),
            alignment = Alignment.CenterStart,
            painter = painterResource(id = R.drawable.ic_back),
            contentDescription = "back")
        
        Row(
            horizontalArrangement = Arrangement.Center){
            Text(text = "Help")
        }
    }

修改后代码（布局正常） #

Row(modifier = Modifier
        .padding(5.dp)
        .fillMaxWidth()) {
        Image(
            modifier = Modifier
                .clickable {
                    onBackClick()
                }
                .padding(4.dp),
            alignment = Alignment.CenterStart,
            painter = painterResource(id = R.drawable.ic_back),
            contentDescription = "back")
        
        Row(modifier = Modifier.fillMaxWidth(), // <---- 添加的修饰符
            horizontalArrangement = Arrangement.Center){
            Text(text = "Yardım")
        }
    }

原因解析 #

• Compose的布局流程分为测量和布局两个阶段：父组件先确定自身可用空间，再将空间分配给子组件，但子组件默认只会占据自身内容所需的最小空间，不会主动填充父组件分配的全部可用空间。
• 父Row设置fillMaxWidth()后，它会占据整个屏幕宽度，但它的两个子组件（Image和子Row）默认只会获取自身内容的宽度。此时子Row没有fillMaxWidth()，它的宽度就是内部Text的宽度，horizontalArrangement = Arrangement.Center只是让Text在这个窄Row的中间，而整个子Row会跟着父Row的默认排列（靠左），所以会和Image挤在一起。
• 给子Row添加fillMaxWidth()后，它会请求占据父Row剩余的全部可用宽度（父Row总宽度减去Image的宽度），此时horizontalArrangement = Arrangement.Center就能让Text在这个宽Row的中间，也就是整个屏幕的水平中间位置，最终实现预期布局。

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