Jetpack Compose父子组件Modifier适配异常问题解答

运行结果说明 #

• 运行Code A1、Code A2得到相同效果，对应效果图：
  
• 运行Code B得到对应效果：
  
• 运行Code C1、Code C2得到相同效果，对应效果图：
  

疑问解答 #

1. 为什么Code A1和A2中Canvas的两种modifier写法效果一致？为什么A1中Canvas的fillMaxSize()没有实现全屏？ #

两个写法效果一致的核心原因有两点：

• weight 是Column/Row专属的ParentData修饰符，只有被设置在Column/Row的直接子元素上时才会被父布局识别生效。Code A2里把带weight(0.4f)的parentModifier传给Box内部的Canvas时，Canvas是Box的直接子元素，Box根本不会解析weight修饰符，这个属性直接被忽略。
• 外层Box本身已经通过parentModifier拿到了固定的测量约束：宽度占满Column全宽，高度占Column剩余空间的40%。Box作为父布局，会给内部子元素传递和自身匹配的约束范围，这时候不管你是从空Modifier开始链式调用fillMaxSize()，还是从带了无效weight属性的parentModifier开始调用fillMaxSize()，最终效果都是让Canvas撑满Box的全部可用空间，自然表现完全一致。

至于fillMaxSize()没有实现全屏，是Compose布局约束的基本规则：子元素的尺寸永远不可能超过直接父布局给的约束范围。ScreenHome_Table里的Box本身只占Column高度的40%，内部的Canvas哪怕调用fillMaxSize()，最多也只能撑满这个Box的大小，根本拿不到整个屏幕的空间，自然不可能全屏。

2. 为什么Code B中Row调用parentModifier.fillMaxSize()可以占满父元素全屏范围？ #

这是Column的测量顺序规则导致的：
Column测量子元素时，会先测量不带weight修饰符的子元素，把这些子元素占用的空间扣除后，再把剩余空间按weight比例分配给带weight的子元素。
Code B里修改的ScreenHome_Info是Column的直接子元素，本身没有设置weight，你给它的Row加了fillMaxSize()后，Row会在测量阶段直接申请占用父Column的全部可用宽高，Column把全屏幕空间都分配给了Info的Row之后，剩下给Watch、Table两个带weight子元素的剩余高度就是0，所以最终表现就是灰色背景的Row占满了整个屏幕，其他两个组件完全不显示。

3. 为什么Code C1和C2中的Canvas都无法显示？ #

这是Canvas组件本身的实现特性决定的：Canvas本质是绑定了onDraw回调的Spacer组件，Spacer没有子元素，默认测量尺寸为0x0，只有配置了尺寸相关修饰符（fillMaxSize()、固定宽高、比例尺寸等）时，才会占用对应大小的布局空间。

• Code C1里只给Canvas设置了background，没有加任何尺寸相关修饰符，Canvas最终测量大小是0x0，自然无法显示。
• Code C2里给Canvas传的parentModifier只有两个有效属性：fillMaxWidth()会让Canvas宽度占满父布局，weight(0.4f)是Column/Row专属修饰符，Box无法识别会直接忽略；整个修饰符链没有任何高度相关的尺寸设置，Canvas最终高度为0，实际是一条肉眼不可见的水平线，看起来就像完全没显示。

参考代码 #

Code A1 #

@Composable
fun ScreenHome(
    rootModifier: Modifier = Modifier,
    ...
) {
    Scaffold(
        modifier = rootModifier.fillMaxSize(),
        ...            
    ) { paddingValues ->

        Column(
            modifier = Modifier.fillMaxSize()
        ) {
            ScreenHome_Watch(
                parentModifier = Modifier.fillMaxWidth().weight(0.6f)
            )    
            ScreenHome_Info(
                parentModifier = Modifier.fillMaxWidth()
            )    
            ScreenHome_Table(
                parentModifier = Modifier.fillMaxWidth().weight(0.4f)
            )
        }
    }    
}

@Composable
fun ScreenHome_Watch(
    parentModifier: Modifier = Modifier,
){
    Box(
        modifier = parentModifier
            .background(color = Color.Yellow)
    ) {
        Canvas(
            modifier = Modifier.fillMaxSize()
        ) {

        }
    }
}

@Composable
fun ScreenHome_Info(
    parentModifier: Modifier = Modifier
){
    Row(
        modifier = parentModifier
                      .background(color = Color.Gray),
        verticalAlignment= Alignment.CenterVertically

    ){
        Text("Hello")
    }
}


@Composable
fun ScreenHome_Table(
    parentModifier: Modifier = Modifier,
) {
    Box(
        modifier = parentModifier
    ) {
        Canvas(
            modifier = Modifier
                        .fillMaxSize()
                        .background(color = Color.Green)
        ) {

        }
    }
}

Code A2 #

//其余代码与Code A1一致

@Composable
fun ScreenHome_Table(
    parentModifier: Modifier = Modifier,
) {
    Box(
        modifier = parentModifier
    ) {
        Canvas(
            modifier = parentModifier
                        .fillMaxSize()
                        .background(color = Color.Green)
        ) {

        }
    }
}

Code B #

//其余代码与Code A1一致


@Composable
fun ScreenHome_Info(
    parentModifier: Modifier = Modifier
){
    Row(
        modifier = parentModifier
                      .fillMaxSize()
                      .background(color = Color.Gray),
        verticalAlignment= Alignment.CenterVertically

    ){
        Text("Hello")
    }
}

Code C1 #

//其余代码与Code A1一致

@Composable
fun ScreenHome_Table(
    parentModifier: Modifier = Modifier,
) {
    Box(
        modifier = parentModifier
    ) {
        Canvas(
            modifier = Modifier                       
                        .background(color = Color.Green) //Canvas不显示
        ) {

        }
    }
}

Code C2 #

//其余代码与Code A1一致

@Composable
fun ScreenHome_Table(
    parentModifier: Modifier = Modifier,
) {
    Box(
        modifier = parentModifier
    ) {
        Canvas(
            modifier = parentModifier
                        .background(color = Color.Green) //Canvas不显示
        ) {

        }
    }
}

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