Jetpack Compose中如何将Row内右侧对象移动到屏幕边缘
问题根因
你给Row里两个子项都加了weight(1f),等于把整行可用宽度劈成了相等的两半,文本占左半边、开关占右半边。开关默认在自己分到的半块区域里居中摆,当然挨不到行的最右边,就会出现你截图里开关右侧空一大块的问题。
实现方案
两种常用写法都能实现右侧子项贴靠边缘的效果:
方案1:仅给左侧文本设置weight
weight修饰符的作用就是让加了这个修饰符的子项占满父布局剩下的可用空间,你只需要给左边的文本加weight(1f)就行,右边的Switch不要加weight。这时候文本会自动把开关以外的宽度全占了,直接把开关顶到行的最右端。
Row( modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically // 让文字和开关垂直居中对齐,视觉效果更协调 ) { Text( text = "My custom switch", modifier = Modifier.weight(1f) ) Switch( checked = switchState, onCheckedChange = { switchState = it } ) }
方案2:给Row配置SpaceBetween水平排列
不想给子项加weight的话,直接给Row加个水平排列参数horizontalArrangement = Arrangement.SpaceBetween就行,布局会自动把第一个子项搁最左边,最后一个子项搁最右边,中间所有剩余空间留空。
Row( modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween, verticalAlignment = Alignment.CenterVertically ) { Text(text = "My custom switch") Switch( checked = switchState, onCheckedChange = { switchState = it } ) }
选型参考:如果后续需要在这行里添加更多子项,
SpaceBetween会均匀分配所有子项之间的间距;如果只需要左侧内容占满剩余空间、其他控件依次靠右排列,优先选仅给左侧元素加weight的写法。
内容的提问来源于stack exchange,提问作者wbk727
相关产品推荐
相关产品推荐

