Jetpack Compose的Row布局内最后一个Text组件未显示是什么原因？

问题原因 #

Row布局中的Slider组件默认会抢占所有剩余可用宽度，你当前的写法没有给子组件配置权重，第一个Text占完固定宽度后，Slider直接占满了Row剩下的全部空间，导致最后一个Text没有可用渲染区域，所以无法显示。

解决方案 #

给Slider添加weight(1f)修饰符即可，该修饰符会让Slider仅占用两个Text之外的剩余中间空间，修改后的代码如下：

@Preview
@Composable
fun SliderInRow() {
    Row {
        Text("qwe")
        Slider(
            modifier = Modifier.weight(1f),
            value = 0f,
            onValueChange = {}
        )
        Text("wer")
    }
}

weight是Row/Column布局的专属修饰符，参数值代表当前组件在剩余可分配空间中的占比。配置完成后Row会先测量两个Text的固定宽度，再把剩下的空间全部分配给Slider，三个元素就能正常依次排列。如果需要调整Slider和左右文本的间距，还可以在weight后面追加padding(horizontal = 8.dp)之类的修饰符做适配。

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